*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Vazirmatn,Tahoma,sans-serif;background:#4a4d55}button{font:inherit;cursor:pointer}.game{position:relative;width:100%;height:100%;overflow:hidden;background:#4a4d55;touch-action:none}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;color:white;text-shadow:0 2px 2px #27323b;max-width:540px;margin:auto}.top{position:absolute;top:max(8px,env(safe-area-inset-top));inset-inline:10px;display:flex;direction:ltr;justify-content:space-between;align-items:flex-start;gap:8px}.moves,.coins{background:rgba(27,45,44,.63);border:2px solid rgba(255,255,255,.16);border-radius:15px;min-width:55px;height:53px;display:flex;align-items:center;justify-content:center}.moves{flex-direction:column;line-height:1.1}.moves span{font-size:11px;font-weight:800}.moves strong{font-size:19px}.coins{height:35px;min-width:73px;gap:7px;direction:ltr}.coins strong{font-size:16px}.coin{width:21px;height:21px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff287,#ffc900 50%,#cc8400 75%);border:2px solid #f9db4b;box-shadow:0 1px 4px #483600}.level{width:min(48%,190px);display:flex;flex-direction:column;align-items:center}.level-label{background:linear-gradient(#ffbc39,#ff8700);border:2px solid #ffe28a;border-radius:11px;padding:2px 17px;font-weight:1000;font-size:16px;line-height:1.35;box-shadow:0 2px 3px #353535;white-space:nowrap}.progress{position:relative;width:100%;height:13px;background:#34414b;border:1px solid #eaf3ef;border-radius:8px;margin-top:2px;overflow:visible;text-align:center;direction:ltr}.progress-fill{height:100%;background:linear-gradient(#8bea44,#36bd19);border-radius:7px;transition:width .3s}.progress span{position:absolute;inset:0;font-size:9px;line-height:11px;font-weight:bold}.progress i{position:absolute;inset-inline-start:-4px;top:-7px;font-size:12px;font-style:normal}.sound{pointer-events:auto;position:absolute;top:max(65px,calc(env(safe-area-inset-top) + 60px));left:10px;border:0;border-radius:50%;width:40px;height:40px;color:white;background:#344c39a8;font-size:15px;font-weight:bold}.hint{position:absolute;bottom:max(8%,calc(env(safe-area-inset-bottom) + 36px));inset-inline:12px;text-align:center;font-size:clamp(15px,4vw,21px);font-weight:1000;color:#fff;text-shadow:-2px -2px 0 #263548,2px -2px 0 #263548,-2px 2px 0 #263548,2px 2px 0 #263548,0 3px 4px #222;line-height:1.7}.keyboard{position:absolute;bottom:2%;inset-inline:0;text-align:center;font-size:11px;opacity:.8}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#1c283b8c;padding:20px}.result{width:min(100%,330px);background:#fdf7e9;border:5px solid #fff;border-radius:24px;box-shadow:0 8px 0 #bd8a36,0 16px 45px #16233188;text-align:center;padding:20px;color:#354658}.result-icon{margin:-53px auto 5px;border-radius:50%;background:#ffc933;border:5px solid #fff;box-shadow:0 4px 0 #d9901c;color:#fff;font-size:40px;font-weight:900;width:76px;height:76px;line-height:66px}.result h1{font-size:24px;font-weight:1000;line-height:1.7;margin:0}.result p{font-size:14px;line-height:1.8;margin:2px 0 12px}.stats{display:flex;justify-content:center;gap:28px;margin:8px 0 16px}.stats span{display:flex;flex-direction:column;font-size:13px}.stats b{font-size:22px;color:#f49718}.result button{border:2px solid #ffdc71;border-radius:14px;background:linear-gradient(#ffbb38,#f48713);box-shadow:0 4px 0 #c76d10;color:white;text-shadow:0 2px 1px #b45809;font-weight:900;font-size:18px;padding:10px 30px;min-height:48px;width:100%}@media(max-width:500px){.keyboard{display:none}}
/* SAZITO_PLATFORM_CONTAINER_FIX_SCRUM_4531 */
/* No author .container rule found; Tailwind's built-in .container
   utility never had a phone gutter in EITHER preview or a real build
   (width:100% + breakpoint max-width, no padding/margin, ever) — see
   platformContainerFix.ts for the full mechanism, verified both ways.
   Scoped to @layer components (not unlayered) so a REAL utility class the
   author DID apply — e.g. class="container px-8" — still wins: Tailwind's
   own @layer utilities (publish) and its unlayered runtime injection
   (preview) both outrank @layer components; this default only applies
   when nothing else sets padding/margin at all. */
@layer components {
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }
}