.gdGame{
  --ink:#243447;
  --paper:#f6e7bf;
  --paper-dark:#d6bb7c;
  --red:#c94952;
  --green:#38a86d;
  --blue:#3f74c6;
  --gold:#f2c45b;
  --night:#132132;
  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,.88),transparent 17%),
    linear-gradient(180deg,#263d5a 0 35%,#cab37a 35% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(24,43,59,.32);
  isolation:isolate
}
.gdGame *{box-sizing:border-box}
.gdGame button{font:inherit}
.gdNight,.gdDust{position:absolute;inset:0;pointer-events:none}
.gdMoon{position:absolute;left:6%;top:42px;font-size:63px;filter:drop-shadow(0 0 16px rgba(255,244,174,.48));animation:gdMoon 5s ease-in-out infinite}
.gdCloud{position:absolute;width:145px;height:40px;border-radius:999px;background:rgba(230,239,249,.16);filter:blur(.3px);animation:gdCloud 25s linear infinite}
.gdCloud:before,.gdCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.gdCloud:before{width:66px;height:58px;right:22px;bottom:7px}
.gdCloud:after{width:48px;height:44px;left:21px;bottom:8px}
.gdCloudOne{top:80px;right:-170px}
.gdCloudTwo{top:160px;left:-155px;animation-duration:32s;animation-delay:-15s;transform:scale(.8)}
.gdWindowLight{position:absolute;right:8%;top:182px;width:80px;height:95px;border:8px solid #1b2733;background:linear-gradient(145deg,#ffea84,#dba52f);box-shadow:0 0 30px rgba(255,211,82,.35)}
.gdWindowLight:before,.gdWindowLight:after{content:"";position:absolute;background:#1b2733}
.gdWindowLight:before{left:50%;top:0;bottom:0;width:5px}
.gdWindowLight:after{left:0;right:0;top:48%;height:5px}
.gdDust i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffeab0;box-shadow:0 0 8px #fff3c7;opacity:.68;animation:gdDust 5s linear infinite}
.gdDust i:nth-child(1){right:12%;top:40%}
.gdDust i:nth-child(2){right:28%;top:58%;animation-delay:-2s}
.gdDust i:nth-child(3){right:49%;top:44%;animation-delay:-4s}
.gdDust i:nth-child(4){left:13%;top:53%;animation-delay:-1s}
.gdDust i:nth-child(5){left:31%;top:68%;animation-delay:-3s}
.gdDust i:nth-child(6){left:48%;top:39%;animation-delay:-4.5s}

.gdHeader{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:2px 3px 16px;color:#fff}
.gdTitleBlock{max-width:760px}
.gdKicker{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:900;box-shadow:0 7px 17px rgba(0,0,0,.12)}
.gdHeader h1{margin:8px 0 3px;font-size:clamp(31px,5vw,52px);line-height:1;color:#ffd66f;text-shadow:0 3px 0 rgba(0,0,0,.24)}
.gdHeader h1 span{display:inline-block;animation:gdTitle 2.2s ease-in-out infinite}
.gdHeader p{margin:0;font-weight:800;color:#dce9f2}
.gdSound,.gdReplay{border:0;border-radius:999px;background:#fff;cursor:pointer;font-weight:900;box-shadow:0 8px 19px rgba(0,0,0,.18)}
.gdSound{padding:11px 16px;white-space:nowrap;color:#30485c}

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

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

.gdOffice{position:relative;z-index:2;min-height:745px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#4a5968 0 39%,#785b3a 39% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.16),inset 0 -28px 50px rgba(49,29,12,.25),0 15px 35px rgba(14,27,35,.24)}
.gdWall{position:absolute;left:0;right:0;top:0;height:44%;background:
 linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
 linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
 linear-gradient(180deg,#445565,#303c49);
 background-size:32px 32px,32px 32px,auto}
.gdOffice:before{content:"";position:absolute;left:-5%;right:-5%;bottom:-110px;height:330px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#8b683f,#54361f);box-shadow:inset 0 18px 0 rgba(255,255,255,.05)}

.gdEvidenceBoard{position:absolute;z-index:5;right:18px;top:24px;width:220px;min-height:260px;padding:18px 15px;border-radius:18px;background:#8f6a47;border:8px solid #52351f;box-shadow:0 14px 0 rgba(43,28,18,.3),0 22px 30px rgba(0,0,0,.23);transform:rotate(1deg)}
.gdBoardTitle{display:block;text-align:center;color:#fff8d8;font-weight:1000;margin-bottom:12px}
.gdRuleCard{position:relative;padding:9px 10px;margin:9px 0;border-radius:10px;background:#f8e9bd;color:#4c3a28;box-shadow:0 5px 8px rgba(0,0,0,.13);transform:rotate(-1deg)}
.gdRuleCard:before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;border-radius:50%;background:#b84342;box-shadow:0 2px 3px rgba(0,0,0,.2)}
.gdRuleCard b,.gdRuleCard small{display:block}
.gdRuleCard b{font-size:14px}
.gdRuleCard small{font-size:9px;line-height:1.5}
.gdRuleVerb{transform:rotate(1.2deg)}
.gdRuleParticle{transform:rotate(-.5deg)}
.gdThread{position:absolute;height:2px;background:#b94342;transform-origin:right center;opacity:.72}
.gdThreadOne{right:52px;top:94px;width:92px;transform:rotate(26deg)}
.gdThreadTwo{right:40px;top:180px;width:118px;transform:rotate(-17deg)}

.gdLamp{position:absolute;z-index:8;left:28px;top:34px;width:165px;height:235px}
.gdLampHead{position:absolute;left:0;top:0;width:87px;height:58px;border-radius:55% 55% 20% 20%;background:linear-gradient(145deg,#1b2834,#0f171e);transform:rotate(-12deg);box-shadow:inset 0 -8px #02070a}
.gdLampLight{position:absolute;left:6px;top:43px;width:180px;height:160px;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,228,123,.22),transparent);filter:blur(1px)}
.gdLampArm{position:absolute;left:52px;top:47px;width:14px;height:170px;border-radius:10px;background:#1a2935;transform:rotate(14deg);transform-origin:top}
.gdDetective{position:absolute;z-index:18;left:50%;top:175px;font-size:68px;transform:translateX(-50%);filter:drop-shadow(0 12px 10px rgba(0,0,0,.32));transition:transform .7s cubic-bezier(.2,.8,.2,1);animation:gdDetective 2.1s ease-in-out infinite}

.gdCaseFile{position:absolute;z-index:12;left:13%;right:13%;top:225px;min-height:250px;padding:30px 26px 22px;border-radius:18px 18px 28px 28px;background:
 linear-gradient(rgba(115,82,38,.065) 1px,transparent 1px),
 linear-gradient(90deg,rgba(115,82,38,.065) 1px,transparent 1px),
 linear-gradient(160deg,#fff6d8,#e7cd91);
 background-size:22px 22px,22px 22px,auto;
 border:6px solid #9c6c34;
 box-shadow:0 16px 0 #66431f,0 26px 34px rgba(0,0,0,.28);
 transition:.25s}
.gdCaseFile.is-correct{animation:gdCaseCorrect .65s}
.gdCaseFile.is-wrong{animation:gdCaseWrong .5s}
.gdFileTab{position:absolute;right:25px;top:-23px;display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:14px 14px 0 0;background:#bb8541;color:#fff6d4;box-shadow:0 -4px 0 #7d5224}
.gdFileTab span{font-size:10px;font-weight:1000}
.gdFileTab b{font-size:10px}
.gdFileTab em{font-style:normal}
.gdCaseHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:2px dashed rgba(104,72,34,.35)}
.gdCaseHeader span{padding:5px 10px;border:2px solid #aa3e43;color:#9a3238;transform:rotate(-3deg);font-size:10px;font-weight:1000}
.gdCaseHeader strong{color:#563c24}
.gdSentence{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;min-height:90px;padding:20px 12px;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:31px;font-weight:900;line-height:1.8;color:#3c2d20;text-align:center}
.gdWord{display:inline-flex;align-items:center;justify-content:center;padding:1px 4px;border-radius:10px;position:relative}
.gdWord.is-focus{padding:2px 11px;background:#fff;border:3px solid #d54d57;color:#c92f3d;box-shadow:0 8px 13px rgba(118,56,40,.16);animation:gdFocus 1.45s ease-in-out infinite}
.gdMagnifier{position:absolute;z-index:20;left:50%;top:116px;width:86px;height:86px;border:10px solid #1f2f3b;border-radius:50%;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 4px rgba(255,255,255,.46),0 9px 14px rgba(0,0,0,.24);transform:translate(-50%,-50%) rotate(-9deg);transition:left .48s ease,top .48s ease}
.gdMagnifier:after{content:"";position:absolute;right:-38px;bottom:-30px;width:53px;height:14px;border-radius:12px;background:linear-gradient(90deg,#1e2b36,#091015);transform:rotate(45deg)}
.gdMagnifier span{position:absolute;left:16px;top:14px;width:19px;height:11px;border-radius:50%;border-top:4px solid rgba(255,255,255,.72);transform:rotate(-30deg)}
.gdClue{padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.55);color:#6a4d2f;font-size:11px;font-weight:900;text-align:center}
.gdReplay{display:none;padding:7px 12px;margin:10px auto 0;font-size:11px;color:#334d60}
.gdStamp{position:absolute;left:34px;bottom:20px;padding:8px 12px;border:5px double #279561;color:#208153;border-radius:8px;font-size:17px;font-weight:1000;opacity:0;transform:rotate(-10deg) scale(.4);transition:.38s}
.gdStamp.is-visible{opacity:.86;transform:rotate(-10deg) scale(1)}
.gdStamp.is-wrong{border-color:#bd3f47;color:#a62d37}

.gdEvidenceDrawers{position:absolute;z-index:14;left:7%;right:7%;bottom:82px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.gdDrawer{position:relative;min-height:148px;border:0;border-radius:18px 18px 10px 10px;padding:17px 12px 34px;cursor:pointer;background:linear-gradient(145deg,#ead6a4,#b98548);color:#3e2d20;box-shadow:0 10px 0 #5c3a21,0 16px 19px rgba(0,0,0,.22);transition:.22s}
.gdDrawer:before{content:"";position:absolute;left:10px;right:10px;bottom:14px;height:8px;border-radius:999px;background:#5d3d26;box-shadow:inset 0 2px 3px rgba(0,0,0,.34)}
.gdDrawer:hover{transform:translateY(-6px)}
.gdDrawerIcon,.gdDrawer b,.gdDrawer small,.gdDrawer i{display:block}
.gdDrawerIcon{font-size:37px}
.gdDrawer b{font-size:23px}
.gdDrawer small{font-size:10px;line-height:1.5}
.gdDrawer i{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);min-width:112px;padding:5px 10px;border-radius:999px;background:#fff2c3;font-style:normal;font-size:9px;font-weight:1000;box-shadow:0 4px 7px rgba(0,0,0,.15)}
.gdDrawer.is-correct{background:linear-gradient(145deg,#dfffbf,#70d58a);box-shadow:0 10px 0 #338b55,0 0 25px rgba(255,239,91,.55)}
.gdDrawer.is-wrong{background:linear-gradient(145deg,#ffd6d7,#ed888d);box-shadow:0 10px 0 #a63d45}
.gdDrawer[disabled]{cursor:default;opacity:.66}

.gdMessage{position:absolute;z-index:16;left:17%;right:17%;bottom:23px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.93);color:#3f5662;font-weight:900;box-shadow:0 8px 19px rgba(0,0,0,.17)}
.gdBankStatus{position:absolute;z-index:16;left:18%;right:18%;bottom:6px;text-align:center;color:#ffeab4;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.55)}
.gdCombo{position:absolute;z-index:30;top:51%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff36e;font-size:38px;font-weight:1000;text-shadow:0 4px 0 #5e3515}

.gdCaseProgress{height:14px;margin:13px 4px;border-radius:999px;background:#ac9365;overflow:hidden;box-shadow:inset 0 2px 5px rgba(58,39,19,.25)}
.gdCaseProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c94952,#f2c45b,#38a86d);transition:.35s}
.gdControls,.gdShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.gdControls button,.gdShare button,.gdEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.gdPrimary{background:linear-gradient(145deg,#c94952,#9d2e38);color:#fff}
.gdSecondary{background:#fff;color:#365b68}
.gdShare{margin-top:11px}
.gdShare button{padding:8px 14px;background:rgba(255,255,255,.88);font-size:12px;color:#3f5d67}

.gdEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(18,31,42,.82);backdrop-filter:blur(5px)}
.gdEnd.is-visible{display:flex}
.gdEndCard{width:min(460px,100%);padding:29px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#f3dfaa);box-shadow:0 28px 80px rgba(0,0,0,.42);animation:gdEndIn .38s}
.gdEndFiles{font-size:26px}
.gdCup{font-size:72px}
.gdStars{font-size:37px}
.gdEndCard h2{margin:6px;font-size:30px;color:#6f3d24}
.gdEndStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.gdEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.gdEndStats b,.gdEndStats small{display:block}
.gdEndStats b{font-size:21px}
.gdEndStats small{font-size:10px;color:#77766b}
.gdBest{font-weight:900;color:#8b641b}
.gdEndCard button{background:linear-gradient(145deg,#c94952,#9d2e38);color:#fff}

.gdPaused .gdNight *,.gdPaused .gdDust i,.gdPaused .gdDetective,.gdPaused .gdWord.is-focus{animation-play-state:paused!important}
.gdPaused .gdEvidenceDrawers{pointer-events:none;filter:grayscale(.25)}

@keyframes gdMoon{50%{transform:translateY(7px) rotate(5deg)}}
@keyframes gdCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes gdDust{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-120px) translateX(35px);opacity:0}}
@keyframes gdTitle{50%{transform:rotate(6deg) translateY(-4px)}}
@keyframes gdDetective{50%{transform:translateX(-50%) translateY(-8px) rotate(3deg)}}
@keyframes gdFocus{50%{transform:translateY(-3px);box-shadow:0 0 0 6px rgba(213,77,87,.12),0 8px 13px rgba(118,56,40,.16)}}
@keyframes gdCaseCorrect{45%{transform:translateY(-10px) scale(1.02);filter:brightness(1.12)}}
@keyframes gdCaseWrong{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes gdEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:920px){
  .gdGame{padding:13px;border-radius:20px}
  .gdHeader{align-items:flex-start}
  .gdHeader p{font-size:12px}
  .gdLevels{gap:6px}
  .gdLevels button{padding:8px 4px}
  .gdLevels button small{display:none}
  .gdStats{gap:4px}
  .gdStats>div{display:block;text-align:center;padding:6px 2px}
  .gdStats>div>span{font-size:18px}
  .gdStats small{display:block;font-size:8px}
  .gdStats b{font-size:15px}
  .gdOffice{min-height:820px}
  .gdEvidenceBoard{right:5px;top:22px;transform:scale(.67) rotate(1deg);transform-origin:right top}
  .gdLamp{left:-30px;top:28px;transform:scale(.7);transform-origin:left top;opacity:.8}
  .gdDetective{top:155px;font-size:58px}
  .gdCaseFile{left:5%;right:5%;top:220px;min-height:290px;padding:29px 12px 20px}
  .gdSentence{font-size:25px;min-height:115px}
  .gdEvidenceDrawers{left:5%;right:5%;bottom:92px;gap:8px}
  .gdDrawer{min-height:133px;padding:14px 7px 31px}
  .gdDrawer b{font-size:20px}
  .gdDrawer small{font-size:8px}
  .gdMessage{left:5%;right:5%;bottom:25px;font-size:12px}
  .gdBankStatus{left:5%;right:5%;bottom:8px}
}
@media(max-width:560px){
  .gdHeader h1{font-size:30px}
  .gdKicker{font-size:9px}
  .gdSound{padding:9px 10px;font-size:11px}
  .gdOffice{min-height:920px}
  .gdEvidenceBoard{opacity:.64;transform:scale(.52) rotate(1deg)}
  .gdLamp{opacity:.46}
  .gdDetective{top:180px;font-size:48px}
  .gdCaseFile{top:238px;min-height:340px}
  .gdSentence{font-size:22px;gap:4px;padding:18px 4px}
  .gdMagnifier{width:68px;height:68px;border-width:8px}
  .gdEvidenceDrawers{grid-template-columns:1fr;bottom:88px}
  .gdDrawer{min-height:82px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;text-align:right;padding:10px 17px}
  .gdDrawerIcon{grid-row:1/3;font-size:31px}
  .gdDrawer b{font-size:19px}
  .gdDrawer small{font-size:9px}
  .gdDrawer i{display:none}
  .gdEndStats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .gdGame *{animation:none!important;transition:none!important}
}