.osGame{
  --ink:#263f4f;
  --red:#d9474f;
  --red-dark:#9f2d36;
  --gold:#ffc957;
  --green:#3fb579;
  --blue:#3d7dc8;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 7%,rgba(255,255,255,.94),transparent 17%),
    linear-gradient(180deg,#bfe9ff 0 34%,#efd7a1 34% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(39,82,104,.24);
  isolation:isolate
}
.osGame *{box-sizing:border-box}
.osGame button{font:inherit}
.osSky,.osDust{position:absolute;inset:0;pointer-events:none}
.osSun{position:absolute;left:6%;top:45px;font-size:67px;filter:drop-shadow(0 9px 12px rgba(255,184,33,.28));animation:osSun 5s ease-in-out infinite}
.osCloud{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:osCloud 23s linear infinite}
.osCloud:before,.osCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.osCloud:before{width:58px;height:58px;right:20px;bottom:7px}
.osCloud:after{width:43px;height:43px;left:20px;bottom:8px}
.osCloudOne{top:72px;right:-150px}
.osCloudTwo{top:155px;left:-140px;animation-duration:30s;animation-delay:-13s;transform:scale(.78)}
.osEagle{position:absolute;right:-80px;top:170px;font-size:42px;animation:osEagle 18s linear infinite;filter:drop-shadow(0 7px 7px rgba(60,70,75,.2))}
.osDust i{position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(255,234,177,.86);box-shadow:0 0 8px #fff3c4;animation:osDust 5.5s linear infinite}
.osDust i:nth-child(1){right:8%;top:46%}
.osDust i:nth-child(2){right:25%;top:58%;animation-delay:-2s}
.osDust i:nth-child(3){right:46%;top:44%;animation-delay:-4s}
.osDust i:nth-child(4){left:13%;top:53%;animation-delay:-1s}
.osDust i:nth-child(5){left:31%;top:68%;animation-delay:-3s}
.osDust i:nth-child(6){left:48%;top:39%;animation-delay:-4.5s}

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

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

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

.osRange{position:relative;z-index:2;min-height:725px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#94dafe 0 41%,#ecd094 41% 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)}
.osRange:before{content:"";position:absolute;left:-5%;right:-5%;bottom:-120px;height:315px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#d8b36a,#a8773f);box-shadow:inset 0 17px 0 rgba(255,255,255,.1)}
.osMountains:before,.osMountains:after{content:"";position:absolute;bottom:260px;width:500px;height:230px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.osMountains:before{right:-120px;background:linear-gradient(145deg,#9d9c93 0 55%,#77766f 56% 100%)}
.osMountains:after{left:-140px;background:linear-gradient(145deg,#8e938c 0 58%,#686d67 59% 100%)}
.osGround{position:absolute;left:0;right:0;bottom:0;height:108px;background:repeating-linear-gradient(75deg,transparent 0 20px,rgba(124,84,37,.18) 21px 24px,transparent 25px 39px)}

.osWatchTower{position:absolute;z-index:5;right:24px;top:28px;width:130px;height:245px;filter:drop-shadow(0 12px 9px rgba(70,52,28,.23))}
.osTowerRoof{position:absolute;right:7px;top:0;width:115px;height:44px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#8b2f36}
.osTowerBody{position:absolute;right:29px;top:42px;width:72px;height:185px;background:linear-gradient(90deg,#825329,#b57b3e,#70441f);border:6px solid #5c381d}
.osTowerBody:before{content:"";position:absolute;left:13px;right:13px;top:18px;height:48px;border:5px solid #2b3a46;background:#a6dcf2}
.osTowerFlag{position:absolute;right:77px;top:-11px;font-size:32px;animation:osFlag 2.7s ease-in-out infinite}

.osMissionCard{position:absolute;z-index:12;top:43px;left:50%;transform:translateX(-50%);width:300px;min-height:225px;padding:30px 18px 17px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#fff0c0);border:5px solid rgba(255,255,255,.9);box-shadow:0 17px 0 rgba(112,79,43,.19),0 26px 34px rgba(50,77,68,.2);transition:.28s}
.osMissionCard.is-correct{animation:osCardCorrect .65s}
.osMissionCard.is-wrong{animation:osCardWrong .5s}
.osLevelTitle{position:absolute;top:-15px;left:50%;transform:translateX(-50%);min-width:155px;padding:6px 12px;border-radius:999px;background:#ffc957;color:#68400d;font-size:11px;font-weight:1000;box-shadow:0 5px 0 #d89b22}
.osMissionCard>small{display:block;color:#8e6a44;font-weight:900}
.osMissionCard strong{display:block;min-height:77px;margin:8px 0 4px;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:58px;line-height:1.2;color:#84313a}
.osReplay{display:none;padding:7px 12px;margin:0 auto 8px;font-size:11px}
.osHint{padding:9px 11px;border-radius:14px;background:#fff9df;color:#6b5c43;font-size:11px;font-weight:900}

.osScope{position:absolute;z-index:23;left:50%;top:315px;width:105px;height:105px;border:10px solid #253643;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 4px rgba(255,255,255,.5),0 12px 18px rgba(45,45,35,.22);transform:translate(-50%,-50%);pointer-events:none;transition:left .52s ease,top .52s ease,transform .52s ease}
.osScopeRing{position:absolute;inset:15px;border:2px solid rgba(36,51,62,.72);border-radius:50%}
.osScopeH,.osScopeV{position:absolute;background:#d9424b}
.osScopeH{left:0;right:0;top:50%;height:2px}
.osScopeV{top:0;bottom:0;left:50%;width:2px}
.osScopeDot{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#d9424b;transform:translate(-50%,-50%);box-shadow:0 0 10px #fff}
.osBeam{position:absolute;z-index:20;left:50%;top:315px;width:0;height:3px;background:linear-gradient(90deg,#fff6a4,#e33f48);transform-origin:left center;opacity:0;pointer-events:none;box-shadow:0 0 8px #fff2a2;transition:width .42s ease,transform .42s ease,opacity .15s}

.osTargets{position:absolute;z-index:14;left:6%;right:6%;bottom:94px;display:grid;grid-template-columns:repeat(6,minmax(82px,1fr));gap:12px;align-items:end}
.osTarget{position:relative;min-height:180px;border:0;background:transparent;cursor:pointer;padding:0;transition:.2s}
.osTargetStand{position:absolute;left:50%;bottom:0;width:15px;height:92px;border-radius:9px 9px 2px 2px;background:linear-gradient(90deg,#63401f,#a06a37,#5a371d);transform:translateX(-50%);box-shadow:0 7px 8px rgba(74,51,27,.17)}
.osTargetBase{position:absolute;left:50%;bottom:0;width:74px;height:18px;border-radius:50%;background:#60401f;transform:translateX(-50%);box-shadow:0 5px 7px rgba(61,43,24,.22)}
.osTargetFace{position:absolute;z-index:3;left:50%;top:0;width:118px;height:118px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#ffe35b 0 14%,#ef454c 15% 29%,#fff 30% 44%,#3c79c3 45% 61%,#fff 62% 78%,#e4494f 79% 100%);box-shadow:inset 0 0 0 5px rgba(62,44,29,.18),0 10px 15px rgba(64,54,39,.18);transition:.2s}
.osTargetValue{position:absolute;z-index:5;left:50%;top:35px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-width:78px;max-width:102px;min-height:48px;padding:4px 9px;border-radius:16px;background:rgba(255,255,255,.94);color:#522c31;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:24px;font-weight:900;line-height:1.15;box-shadow:0 3px 6px rgba(61,43,29,.18)}
.osTargetMark{position:absolute;z-index:7;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:#fff36c;transform:translate(-50%,-50%) scale(0);box-shadow:0 0 19px #fff36c}
.osTarget:hover .osTargetFace{transform:translateX(-50%) translateY(-7px) scale(1.05)}
.osTarget[disabled]{cursor:default;opacity:.68}
.osTarget.is-correct .osTargetFace{animation:osTargetCorrect .72s}
.osTarget.is-correct .osTargetMark{animation:osMark .6s forwards}
.osTarget.is-wrong .osTargetFace{animation:osTargetWrong .55s;filter:grayscale(.35)}
.osTarget:nth-child(odd) .osTargetStand{height:82px}
.osTarget:nth-child(3n) .osTargetFace{transform:translateX(-50%) rotate(2deg)}

.osMedalRack{position:absolute;z-index:11;left:21px;top:45px;width:118px;padding:14px 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}
.osMedalRack span,.osMedalRack b,.osMedalRack small{display:block}
.osMedalRack span{font-size:36px}
.osMedalRack b{font-size:30px}
.osMedalRack small{font-size:9px}

.osMessage{position:absolute;z-index:17;left:17%;right:17%;bottom:25px;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)}
.osBankStatus{position:absolute;z-index:17;left:18%;right:18%;bottom:7px;text-align:center;color:#fff5cf;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(83,58,29,.5)}
.osCombo{position:absolute;z-index:31;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff36e;font-size:38px;font-weight:1000;text-shadow:0 4px 0 #8a401a}

.osProgress{height:14px;margin:13px 4px;border-radius:999px;background:#d8c69e;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.osProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d9474f,#ffc957,#3fb579);transition:.35s}
.osControls,.osShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.osControls button,.osShare button,.osEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.osPrimary{background:linear-gradient(145deg,#d9474f,#a62e38);color:#fff}
.osSecondary{background:#fff;color:#365b68}
.osShare{margin-top:11px}
.osShare button{padding:8px 14px;background:rgba(255,255,255,.82);font-size:12px;color:#3f5d67}

.osEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(37,51,57,.79);backdrop-filter:blur(5px)}
.osEnd.is-visible{display:flex}
.osEndCard{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:osEndIn .38s}
.osEndBadge{font-size:26px}
.osCup{font-size:72px}
.osStars{font-size:37px}
.osEndCard h2{margin:6px;font-size:30px;color:#78343b}
.osEndStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.osEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.osEndStats b,.osEndStats small{display:block}
.osEndStats b{font-size:21px}
.osEndStats small{font-size:10px;color:#77766b}
.osBest{font-weight:900;color:#9b671a}
.osEndCard button{background:linear-gradient(145deg,#d9474f,#a62e38);color:#fff}

.osPaused .osSky *,.osPaused .osDust i,.osPaused .osScope{animation-play-state:paused!important}
.osPaused .osTargets{pointer-events:none;filter:grayscale(.25)}

@keyframes osSun{50%{transform:translateY(8px) rotate(6deg)}}
@keyframes osCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes osEagle{from{transform:translateX(0)}to{transform:translateX(-125vw)}}
@keyframes osDust{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-120px) translateX(35px);opacity:0}}
@keyframes osTitle{50%{transform:scale(1.1) rotate(6deg)}}
@keyframes osFlag{50%{transform:rotate(-7deg) translateY(-4px)}}
@keyframes osCardCorrect{45%{transform:translateX(-50%) translateY(-12px) scale(1.055);filter:brightness(1.12)}}
@keyframes osCardWrong{20%,60%{transform:translateX(calc(-50% - 9px))}40%,80%{transform:translateX(calc(-50% + 9px))}}
@keyframes osTargetCorrect{45%{transform:translateX(-50%) translateY(-11px) scale(1.1);filter:brightness(1.16)}}
@keyframes osTargetWrong{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
@keyframes osMark{45%{transform:translate(-50%,-50%) scale(1.7)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes osEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:920px){
  .osGame{padding:13px;border-radius:20px}
  .osHeader{align-items:flex-start}
  .osHeader p{font-size:12px}
  .osLevels{gap:6px}
  .osLevels button{padding:8px 4px}
  .osLevels button small{display:none}
  .osStats{gap:4px}
  .osStats>div{display:block;text-align:center;padding:6px 2px}
  .osStats>div>span{font-size:18px}
  .osStats small{display:block;font-size:8px}
  .osStats b{font-size:15px}
  .osRange{min-height:810px}
  .osWatchTower{right:-20px;top:30px;transform:scale(.68);transform-origin:right top;opacity:.8}
  .osMedalRack{left:3px;top:31px;transform:scale(.72);transform-origin:left top}
  .osMissionCard{top:55px;width:230px}
  .osScope{top:312px;width:85px;height:85px;border-width:8px}
  .osTargets{left:5%;right:5%;bottom:94px;grid-template-columns:repeat(3,1fr);gap:7px 11px}
  .osTarget{min-height:137px}
  .osTargetFace{transform:translateX(-50%) scale(.79);transform-origin:center bottom}
  .osTarget:hover .osTargetFace{transform:translateX(-50%) translateY(-5px) scale(.84)}
  .osTargetStand{height:60px}
  .osTarget:nth-child(odd) .osTargetStand{height:53px}
  .osMessage{left:5%;right:5%;bottom:25px;font-size:12px}
  .osBankStatus{left:5%;right:5%;bottom:8px}
}
@media(max-width:560px){
  .osHeader h1{font-size:30px}
  .osKicker{font-size:9px}
  .osSound{padding:9px 10px;font-size:11px}
  .osRange{min-height:890px}
  .osMissionCard{top:65px;width:205px}
  .osMissionCard strong{font-size:49px}
  .osWatchTower,.osMedalRack{opacity:.58}
  .osScope{top:326px}
  .osTargets{bottom:98px}
  .osTarget{min-height:145px}
  .osTargetValue{font-size:20px;min-width:68px}
  .osEndStats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .osGame *{animation:none!important;transition:none!important}
}