.ltGame{
  --ink:#453240;
  --purple:#7c3aed;
  --gold:#f7c948;
  --green:#2db36f;
  --red:#d84c59;
  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,.96),transparent 18%),
    linear-gradient(180deg,#dff6ff 0 31%,#f5e3bd 31% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(48,75,96,.24);
  isolation:isolate
}
.ltGame *{box-sizing:border-box}
.ltGame button{font:inherit}
.ltSky{position:absolute;inset:0;pointer-events:none}
.ltCloud{position:absolute;width:125px;height:39px;border-radius:999px;background:rgba(255,255,255,.86);filter:drop-shadow(0 7px 8px rgba(50,115,142,.12));animation:ltCloudMove 24s linear infinite}
.ltCloud:before,.ltCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.ltCloud:before{width:58px;height:58px;right:20px;bottom:7px}
.ltCloud:after{width:43px;height:43px;left:20px;bottom:8px}
.ltCloudOne{top:70px;right:-150px}
.ltCloudTwo{top:150px;left:-140px;animation-duration:30s;animation-delay:-13s;transform:scale(.78)}
.ltBird{position:absolute;color:#194e68;font-size:35px;font-weight:900;animation:ltBirdMove 13s linear infinite}
.ltBirdOne{top:55px;right:12%}
.ltBirdTwo{top:90px;right:25%;animation-delay:-6s}

.ltHeader{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:2px 3px 16px}
.ltKicker{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.88);font-size:12px;font-weight:900;box-shadow:0 7px 17px rgba(38,95,120,.1)}
.ltHeader h1{margin:8px 0 3px;font-size:clamp(31px,5vw,52px);line-height:1;color:#713c88;text-shadow:0 3px 0 rgba(255,255,255,.76)}
.ltHeader h1 span{display:inline-block;animation:ltTitle 2.4s ease-in-out infinite}
.ltHeader p{margin:0;font-weight:800;color:#477481}
.ltSound{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)}

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

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

.ltWorld{position:relative;z-index:3;min-height:760px;overflow:hidden;border-radius:30px;background:linear-gradient(180deg,#aee9ff 0 55%,#81cf70 55% 72%,#d9b174 72% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.4),0 18px 40px rgba(43,91,102,.18)}
.ltLandscape{position:absolute;inset:0;pointer-events:none}
.ltMountain{position:absolute;bottom:210px;width:350px;height:250px;background:#87b9c8;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.75}
.ltMountain:after{content:"";position:absolute;left:35%;top:0;width:30%;height:30%;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ltMountainOne{left:-90px}
.ltMountainTwo{right:-120px;transform:scale(.8);opacity:.55}
.ltTrees{position:absolute;left:0;right:0;bottom:170px;text-align:center;font-size:60px;word-spacing:45px;filter:drop-shadow(0 8px 5px rgba(50,70,40,.17))}
.ltStationBuilding{position:absolute;right:40px;bottom:145px;font-size:95px;filter:drop-shadow(0 10px 8px rgba(55,56,40,.18))}

.ltStation{position:absolute;z-index:9;top:18px;left:20px;padding:10px 16px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#69442d,#3d2518);border:5px solid #d0a45d;box-shadow:0 8px 0 rgba(54,31,19,.28);text-align:center}
.ltStation span,.ltStation strong{display:block}
.ltStation span{font-size:10px}.ltStation strong{font-size:14px}

.ltQuestion{position:relative;z-index:8;display:flex;align-items:center;justify-content:center;gap:18px;width:min(720px,90%);min-height:200px;margin:55px auto 15px;padding:18px;border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 16px 30px rgba(58,75,77,.16)}
.ltPicture{width:145px;height:145px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:25px;background:#fff;box-shadow:0 12px 25px rgba(0,0,0,.1)}
.ltPicture img{width:100%;height:100%;display:none;object-fit:contain}
.ltPicture span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:48px;color:#846c8b}
.ltPicture.is-hidden{display:none}
.ltPromptBox{flex:1;text-align:right}
.ltPromptBox small{display:inline-block;color:#2563eb;font-weight:900}
.ltPromptBox h2{margin:6px 0;color:#4b2c2c;font-size:clamp(22px,4vw,34px)}
.ltWordReveal{min-height:44px;display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap}
.ltWordReveal span{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:#fff5ce;color:#7d3f1f;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:27px;font-weight:900;box-shadow:0 5px 0 rgba(139,91,47,.12)}
.ltReplay{border:0;border-radius:999px;padding:8px 13px;background:#7c3aed;color:#fff;cursor:pointer;font-size:12px;font-weight:900}
.ltAudioFallback{display:block;min-height:24px;margin-top:7px;color:#8f3f68;font-size:17px}

.ltAnswer{position:relative;z-index:8;min-height:72px;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;width:min(850px,92%);margin:12px auto;padding:10px;border-radius:20px;border:2px dashed rgba(92,55,37,.28);background:rgba(255,255,255,.84)}
.ltAnswer span{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;color:#7b2626;background:#fff;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:32px;font-weight:900;box-shadow:0 5px 0 rgba(85,51,41,.13)}
.ltQuestionTimer{position:relative;z-index:8;width:min(850px,92%);height:10px;margin:0 auto;border-radius:999px;background:rgba(255,255,255,.75);overflow:hidden}
.ltQuestionTimer span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#31bd73,#ffcf58,#e84e5c);transition:width .08s linear}

.ltTrack{position:absolute;z-index:8;left:0;right:0;bottom:95px;min-height:205px;overflow:hidden}
.ltRail{position:absolute;left:0;right:0;bottom:50px;height:9px;background:#6d4938;box-shadow:0 17px 0 #6d4938}
.ltRail:after{content:"";position:absolute;inset:-9px 0;background:repeating-linear-gradient(90deg,transparent 0 30px,#704835 30px 39px,transparent 39px 63px)}
.ltTrain{position:absolute;bottom:65px;right:2%;display:flex;align-items:flex-end;gap:7px;transition:transform 1.2s cubic-bezier(.22,.8,.3,1)}
.ltTrain.is-moving{transform:translateX(-78%)}
.ltEngine{font-size:75px;filter:drop-shadow(0 8px 5px rgba(0,0,0,.21))}
.ltCars{display:flex;gap:7px;direction:rtl}
.ltCar{position:relative;border:0;width:68px;height:64px;border-radius:17px 17px 10px 10px;cursor:pointer;color:#fff;background:linear-gradient(145deg,#ef7d22,#d9482d);font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:36px;font-weight:900;box-shadow:0 8px 0 #a43124;transition:.18s}
.ltCar:before,.ltCar:after{content:"";position:absolute;bottom:-10px;width:14px;height:14px;border-radius:50%;background:#3d2a24}
.ltCar:before{right:10px}.ltCar:after{left:10px}
.ltCar:hover{transform:translateY(-5px)}
.ltCar.is-used{opacity:.28;pointer-events:none}
.ltCar.is-wrong{animation:ltShake .38s}
.ltCar.is-hint{animation:ltHintPulse .75s ease 2;box-shadow:0 0 0 8px rgba(250,204,21,.22),0 8px 0 #a43124}
.ltCar[disabled]{cursor:default}

.ltMessage{position:absolute;z-index:12;left:14%;right:14%;bottom:38px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.95);color:#465d68;font-weight:900;box-shadow:0 8px 19px rgba(45,43,35,.14)}
.ltBankStatus{position:absolute;z-index:12;left:15%;right:15%;bottom:12px;text-align:center;color:#fff8df;font-size:10px;font-weight:900;text-shadow:0 2px 4px rgba(71,48,29,.62)}
.ltComboBurst{position:absolute;z-index:25;left:50%;top:52%;transform:translate(-50%,-50%);font-size:clamp(34px,8vw,70px);font-weight:1000;color:#fff56d;text-shadow:0 5px 0 #d14a67,0 12px 25px rgba(0,0,0,.25);pointer-events:none}

.ltProgress{height:14px;margin:13px 4px;border-radius:999px;background:#d8c69e;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.ltProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7655c5,#3d83cf,#ffca5c,#32b878);transition:.35s}
.ltSummary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:11px 0}
.ltSummary>div{padding:10px;border-radius:16px;background:rgba(255,255,255,.88);text-align:center;box-shadow:0 7px 18px rgba(0,0,0,.055)}
.ltSummary small,.ltSummary b{display:block}.ltSummary small{font-size:10px;color:#6b7280}.ltSummary b{font-size:19px}
.ltActions,.ltShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.ltActions button,.ltShare button,.ltEnd button{border:0;border-radius:17px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.ltPrimary{background:linear-gradient(145deg,#7c3aed,#5530a2);color:#fff}
.ltSecondary{background:#fff;color:#405c6b}
.ltGold{background:linear-gradient(145deg,#ffd66c,#eeb545);color:#5b3b0b}
.ltShare{margin-top:11px}.ltShare button{padding:8px 14px;background:rgba(255,255,255,.84);font-size:12px;color:#3f5d67}

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

.ltPaused .ltSky *{animation-play-state:paused!important}
.ltPaused .ltCars{pointer-events:none;filter:grayscale(.25)}

@keyframes ltCloudMove{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes ltBirdMove{50%{transform:translate(80px,-12px) rotate(-4deg)}}
@keyframes ltTitle{50%{transform:scale(1.08) rotate(6deg)}}
@keyframes ltShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes ltHintPulse{50%{transform:translateY(-7px) scale(1.06)}}
@keyframes ltEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:980px){
  .ltGame{padding:13px;border-radius:20px}
  .ltHeader p{font-size:12px}
  .ltLevels{gap:6px}.ltLevels button{padding:8px 4px}.ltLevels button small{display:none}
  .ltStats{grid-template-columns:repeat(3,1fr);gap:4px}
  .ltStats>div{display:block;text-align:center;padding:6px 2px}
  .ltStats>div>span{font-size:18px}.ltStats small{display:block;font-size:8px}.ltStats b{font-size:15px}
  .ltWorld{min-height:860px}
  .ltQuestion{margin-top:90px}
  .ltTrack{bottom:120px}
  .ltCar{width:54px;height:55px;font-size:31px}
  .ltEngine{font-size:58px}
}
@media(max-width:620px){
  .ltHeader h1{font-size:29px}.ltKicker{font-size:9px}.ltSound{padding:9px 10px;font-size:11px}
  .ltLevels{grid-template-columns:1fr}
  .ltLevels button{display:grid;grid-template-columns:auto 1fr;column-gap:9px;text-align:right}
  .ltLevels button span{grid-row:1/3}
  .ltWorld{min-height:1040px}
  .ltStation{position:relative;top:auto;left:auto;width:max-content;margin:17px auto 0}
  .ltQuestion{flex-direction:column;width:92%;margin-top:18px;text-align:center}
  .ltPromptBox{text-align:center}
  .ltPicture{width:110px;height:110px}
  .ltWordReveal{justify-content:center}
  .ltAnswer span{width:43px;height:43px;font-size:28px}
  .ltTrack{bottom:150px;min-height:250px}
  .ltTrain{flex-direction:column;align-items:flex-start;right:4%}
  .ltCars{max-width:90vw;flex-wrap:wrap}
  .ltTrain.is-moving{transform:translateX(-62%)}
  .ltMessage{left:5%;right:5%;bottom:48px;font-size:12px}
  .ltBankStatus{left:5%;right:5%;bottom:15px}
  .ltSummary,.ltEndStats{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.ltGame *{animation:none!important;transition:none!important}}