.wfGame{
  --ink:#203040;
  --orange:#ff9d2e;
  --gold:#ffd166;
  --green:#38b87c;
  --red:#ef5b4c;
  --blue:#3b8bd8;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 6%,rgba(255,255,255,.96),transparent 18%),
    linear-gradient(180deg,#dff4ff 0 29%,#f6e5c1 29% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(31,64,89,.2);
  isolation:isolate
}
.wfGame *{box-sizing:border-box}
.wfGame button{font:inherit}
.wfSky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wfCloud{position:absolute;width:125px;height:38px;border-radius:999px;background:rgba(255,255,255,.82);filter:drop-shadow(0 7px 8px rgba(50,115,142,.12));animation:wfCloudMove 25s linear infinite}
.wfCloud:before,.wfCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.wfCloud:before{width:58px;height:58px;right:20px;bottom:7px}
.wfCloud:after{width:43px;height:43px;left:20px;bottom:8px}
.wfCloudOne{top:72px;right:-150px}
.wfCloudTwo{top:145px;left:-140px;animation-duration:31s;animation-delay:-14s;transform:scale(.78)}
.wfSteam{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.6);filter:blur(1px);animation:wfSteam 5s linear infinite}
.wfSteamOne{top:105px;left:13%}
.wfSteamTwo{top:90px;right:14%;animation-delay:-2.4s}

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

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

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

.wfFactory{position:relative;z-index:3;min-height:690px;overflow:hidden;border-radius:30px;padding:20px 18px;background:linear-gradient(180deg,#7d8c99 0 12%,#5c6b78 12% 62%,#3d4c58 62% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.18),inset 0 -20px 40px rgba(0,0,0,.2),0 18px 40px rgba(43,91,102,.18)}
.wfFactoryBack{position:absolute;inset:0;pointer-events:none}
.wfFactoryBack:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 68px,rgba(255,255,255,.035) 69px 72px),repeating-linear-gradient(0deg,transparent 0 68px,rgba(0,0,0,.05) 69px 72px)}
.wfPipe{position:absolute;width:160px;height:42px;border:12px solid #3a4650;border-radius:20px}
.wfPipeOne{top:100px;right:-35px;border-left:0}
.wfPipeTwo{top:160px;left:-40px;border-right:0}
.wfWindow{position:absolute;top:22px;right:30px;display:flex;gap:7px;padding:9px;border:7px solid #35424d;background:#27343d}
.wfWindow i{display:block;width:34px;height:42px;background:linear-gradient(#a7e6ff,#e2f7ff)}
.wfWarning{position:absolute;right:34px;bottom:185px;font-size:46px;color:#ffd34e;opacity:.8}

.wfMachine{position:absolute;z-index:3;top:20px;left:20px;width:205px;height:155px;border-radius:20px;background:linear-gradient(145deg,#f6b84a,#d67b23);border:7px solid #35434e;box-shadow:0 12px 0 #293640,0 16px 25px rgba(0,0,0,.25)}
.wfChimney{position:absolute;left:22px;top:-65px;width:46px;height:73px;background:#46545f;border:6px solid #303c45;border-radius:8px 8px 0 0}
.wfChimney i{position:absolute;width:30px;height:30px;background:#dce6eb;border-radius:50%;top:-20px;left:2px;opacity:0;animation:wfPuff 2.4s infinite}
.wfChimney i+i{animation-delay:1.2s}
.wfGauge{position:absolute;right:18px;top:18px;width:68px;height:40px;border-radius:68px 68px 8px 8px;background:#fff;border:5px solid #384650;overflow:hidden}
.wfGauge span{position:absolute;left:30px;bottom:0;width:4px;height:28px;background:#ef5b4c;transform-origin:50% 100%;transform:rotate(-42deg);transition:.35s}
.wfGear{position:absolute;color:#53636f;text-shadow:0 2px #fff4;font-family:Arial;animation:wfGear 3s linear infinite}
.wfGearBig{font-size:66px;right:18px;bottom:0}
.wfGearSmall{font-size:43px;right:77px;bottom:7px;animation-direction:reverse}
.wfLamp{position:absolute;left:23px;bottom:18px;width:25px;height:25px;border-radius:50%;background:#7b8790;border:4px solid #34414a}
.wfLamp.is-on{background:#8cff8c;box-shadow:0 0 18px #8cff8c}
.wfLamp.is-error{background:#ff6767;box-shadow:0 0 18px #ff6767}

.wfInstruction{position:relative;z-index:4;width:min(590px,calc(100% - 235px));margin-right:auto;margin-left:0;text-align:center;color:#fff}
.wfInstruction>span{display:block;font-size:12px;font-weight:900;opacity:.85}
.wfInstruction>strong{display:block;margin:4px 0;font-size:clamp(25px,4.5vw,43px);color:#ffe87d;text-shadow:0 4px 0 rgba(0,0,0,.24)}
.wfInstructionActions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.wfInstructionActions button{border:0;border-radius:999px;padding:8px 13px;background:#fff;color:#5b3b20;cursor:pointer;font-size:11px;font-weight:900;box-shadow:0 6px 14px rgba(0,0,0,.16)}
.wfAudioFallback{display:block;min-height:23px;margin-top:5px;color:#fff5ac;font-size:16px;font-weight:900}

.wfBeltArea{position:absolute;z-index:4;top:190px;left:0;right:0;height:205px}
.wfBelt{position:absolute;left:4%;right:4%;bottom:26px;height:78px;border:9px solid #2d3942;border-radius:18px;background:linear-gradient(#616d75,#4d5962);box-shadow:0 12px 0 #212c33}
.wfRollers{position:absolute;inset:7px 5px;display:flex;justify-content:space-around;align-items:center;overflow:hidden}
.wfRollers i{width:43px;height:43px;border-radius:50%;border:7px dashed #acb6bc;background:#3e4951;animation:wfRoll 1.1s linear infinite}
.wfPackage{
  --send-x:0px;
  --send-y:0px;
  --send-r:0deg;
  position:absolute;
  z-index:7;
  left:50%;
  bottom:40px;
  width:170px;
  height:145px;
  transform:translateX(-50%);
  border-radius:16px;
  background:linear-gradient(135deg,#dca24f,#b8742c);
  border:6px solid #7d4c22;
  box-shadow:0 14px 20px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transition:transform .72s cubic-bezier(.25,.8,.25,1),opacity .55s;
  will-change:transform,opacity
}
.wfPackage:before,.wfPackage:after{content:"";position:absolute;background:#f1cf83}
.wfPackage:before{top:0;bottom:0;width:20px;left:50%;transform:translateX(-50%)}
.wfPackage:after{left:0;right:0;height:18px;top:20px}
.wfTape{position:absolute;z-index:1;top:5px;width:70px;height:20px;background:#f6df9d;transform:rotate(-3deg)}
.wfPackage img,.wfFallback{z-index:2;width:68px;height:68px;object-fit:contain;border-radius:14px;background:#fff;padding:5px}
.wfFallback{display:flex;align-items:center;justify-content:center;font-size:41px;text-align:center}
.wfPackage b,.wfPackage small,.wfWordAudio{z-index:2}
.wfPackage b{margin-top:4px;font-size:20px;background:rgba(255,255,255,.92);padding:2px 10px;border-radius:9px}
.wfPackage small{font-size:9px;font-weight:900;color:#4f321b}
.wfWordAudio{position:absolute;left:5px;bottom:5px;width:34px;height:34px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.wfPackage.is-hidden-word b{visibility:hidden}
.wfPackage.is-hidden-media img,.wfPackage.is-hidden-media .wfFallback{display:none!important}
.wfPackage.is-sent{transform:translate(calc(-50% + var(--send-x)),var(--send-y)) rotate(var(--send-r)) scale(.58);opacity:.05}
.wfPackage.is-wrong{animation:wfShake .45s}
.wfScanner{position:absolute;z-index:5;top:0;left:50%;transform:translateX(-50%);width:220px;height:124px;border:18px solid #293641;border-bottom:0;border-radius:24px 24px 0 0}
.wfScanner span{position:absolute;left:10px;right:10px;top:12px;height:4px;background:#ff5252;box-shadow:0 0 14px #ff5252;animation:wfScan 1.2s ease-in-out infinite}
.wfScanner b{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#293641;color:#d8f8ff;padding:4px 13px;border-radius:999px;font-size:11px;white-space:nowrap}

.wfQuestionTimer{position:absolute;z-index:5;top:397px;left:8%;right:8%;height:10px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden}
.wfQuestionTimer span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#39c878,#ffd64d,#ef5b4c);transition:width .08s linear}
.wfMessage{position:absolute;z-index:6;top:414px;left:8%;right:8%;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(30,43,52,.83);color:#fff;font-weight:900;backdrop-filter:blur(4px)}
.wfBankStatus{position:absolute;z-index:6;top:462px;left:8%;right:8%;text-align:center;color:#dceaf3;font-size:10px;font-weight:900}
.wfComboBurst{position:absolute;z-index:20;top:45%;left:50%;transform:translate(-50%,-50%);font-size:clamp(34px,7vw,68px);font-weight:1000;color:#fff477;text-shadow:0 5px 0 #9a4d00,0 12px 24px rgba(0,0,0,.25);pointer-events:none}

.wfBins{--wf-cols:2;position:absolute;z-index:7;left:12px;right:12px;bottom:18px;display:grid;grid-template-columns:repeat(var(--wf-cols),1fr);gap:12px}
.wfBin{position:relative;border:0;border-radius:20px 20px 12px 12px;padding:12px 7px 10px;min-height:118px;color:#fff;cursor:pointer;box-shadow:inset 0 -13px rgba(0,0,0,.12),0 8px 0 rgba(0,0,0,.24);transition:.2s}
.wfBin:hover{transform:translateY(-5px)}
.wfBin:nth-child(4n+1){background:#3b8bd8}
.wfBin:nth-child(4n+2){background:#ef7f42}
.wfBin:nth-child(4n+3){background:#42aa70}
.wfBin:nth-child(4n){background:#8b5cf6}
.wfBin:before{content:"";position:absolute;top:-9px;left:8px;right:8px;height:15px;border-radius:10px;background:rgba(20,30,38,.75)}
.wfBin span,.wfBin b,.wfBin small{display:block}
.wfBin span{font-size:36px}.wfBin b{font-size:17px}.wfBin small{font-size:10px;opacity:.9}
.wfBin.is-correct{animation:wfCorrect .7s;box-shadow:0 0 0 6px rgba(80,255,150,.24),inset 0 -13px rgba(0,0,0,.12),0 8px 0 rgba(0,0,0,.24)}
.wfBin.is-wrong{animation:wfWrong .6s}
.wfBin.is-removed{opacity:.28;filter:grayscale(1);pointer-events:none}
.wfBin[disabled]{cursor:default}

.wfProgress{height:14px;margin:13px 4px;border-radius:999px;background:#d5c49e;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.wfProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9d2e,#ffd64d,#38b87c);transition:.35s}
.wfSummary{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:11px 0}
.wfSummary>div{padding:10px;border-radius:16px;background:rgba(255,255,255,.9);text-align:center;box-shadow:0 7px 18px rgba(0,0,0,.055)}
.wfSummary small,.wfSummary b{display:block}.wfSummary small{font-size:10px;color:#6b7280}.wfSummary b{font-size:19px}
.wfControls,.wfShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.wfControls button,.wfShare button,.wfEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.wfPrimary{background:linear-gradient(145deg,#ffad3d,#e8791b);color:#40260d}
.wfSecondary{background:#fff;color:#405c6b}
.wfShare{margin-top:11px}.wfShare button{padding:8px 14px;background:rgba(255,255,255,.84);font-size:12px;color:#3f5d67}

.wfEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(22,37,49,.8);backdrop-filter:blur(6px)}
.wfEnd.is-visible{display:flex}
.wfEndCard{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:wfEndIn .38s}
.wfEndBadge{font-size:27px}.wfCup{font-size:72px}.wfStars{font-size:37px}
.wfEndCard h2{margin:6px;font-size:30px;color:#a24f15}
.wfEndStats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0}
.wfEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.wfEndStats b,.wfEndStats small{display:block}.wfEndStats b{font-size:19px}.wfEndStats small{font-size:9px;color:#77766b}
.wfBest{font-weight:900;color:#9b671a}.wfEndCard button{background:linear-gradient(145deg,#ffad3d,#e8791b);color:#40260d}

.wfPaused .wfSky *,.wfPaused .wfRollers i,.wfPaused .wfGear,.wfPaused .wfScanner span,.wfPaused .wfChimney i{animation-play-state:paused!important}
.wfPaused .wfBins{pointer-events:none;filter:grayscale(.35)}

@keyframes wfCloudMove{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes wfSteam{0%{transform:translateY(0) scale(.65);opacity:0}20%{opacity:.7}100%{transform:translateY(-110px) translateX(28px) scale(1.7);opacity:0}}
@keyframes wfPuff{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.7}100%{opacity:0;transform:translateY(-60px) translateX(18px) scale(1.6)}}
@keyframes wfGear{to{transform:rotate(360deg)}}
@keyframes wfRoll{to{transform:rotate(-360deg)}}
@keyframes wfScan{0%,100%{transform:translateY(4px)}50%{transform:translateY(72px)}}
@keyframes wfTitle{50%{transform:scale(1.08) rotate(5deg)}}
@keyframes wfShake{20%,60%{transform:translateX(calc(-50% - 10px))}40%,80%{transform:translateX(calc(-50% + 10px))}}
@keyframes wfCorrect{50%{transform:translateY(-8px) scale(1.05);filter:brightness(1.28)}}
@keyframes wfWrong{25%,75%{transform:translateX(-7px)}50%{transform:translateX(7px);filter:brightness(.82)}}
@keyframes wfEndIn{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

@media(max-width:900px){
  .wfGame{padding:13px;border-radius:20px}
  .wfHeader p{font-size:12px}
  .wfLevels{gap:6px}.wfLevels button{padding:8px 4px}.wfLevels button small{display:none}
  .wfStats{grid-template-columns:repeat(3,1fr);gap:4px}
  .wfStats>div{display:block;text-align:center;padding:6px 2px}
  .wfStats>div>span{font-size:18px}.wfStats small{display:block;font-size:8px}.wfStats b{font-size:15px}
  .wfFactory{min-height:760px}
  .wfMachine{transform:scale(.68);transform-origin:left top;left:8px}
  .wfInstruction{width:70%;margin-right:auto;margin-left:0}
  .wfBins{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:620px){
  .wfHeader{display:block}.wfHeader h1{font-size:29px}.wfKicker{font-size:9px}.wfSound{margin-top:9px;padding:9px 10px;font-size:11px}
  .wfLevels{grid-template-columns:1fr}
  .wfLevels button{display:grid;grid-template-columns:auto 1fr;column-gap:9px;text-align:right}
  .wfLevels button span{grid-row:1/3}
  .wfFactory{min-height:980px;padding:14px 8px}
  .wfMachine{transform:scale(.58)}
  .wfInstruction{width:72%;min-height:130px}
  .wfInstruction>strong{font-size:25px}
  .wfBeltArea{top:230px}
  .wfPackage{width:138px;height:128px}
  .wfPackage img,.wfFallback{width:58px;height:58px}
  .wfQuestionTimer{top:440px;left:5%;right:5%}
  .wfMessage{top:457px;left:5%;right:5%;font-size:12px}
  .wfBankStatus{top:510px;left:5%;right:5%;font-size:9px}
  .wfBins{bottom:18px;grid-template-columns:1fr!important;gap:9px}
  .wfBin{min-height:66px;padding:7px;display:grid;grid-template-columns:52px 1fr;align-items:center;text-align:right}
  .wfBin span{grid-row:1/3;font-size:31px}.wfBin b{font-size:15px}.wfBin small{font-size:9px}
  .wfSummary{grid-template-columns:repeat(2,1fr)}
  .wfEndStats{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.wfGame *{animation:none!important;transition:none!important}}