@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@500;700;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
body { overflow: hidden; font-family: 'Vazirmatn', system-ui, sans-serif; background: #8BC34A; user-select: none; -webkit-user-select: none; }
canvas { display: block; touch-action: none; }
.app { position: fixed; inset: 0; overflow: hidden; }
button { font-family: inherit; cursor: pointer; border: 0; }

.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.hud-top { position: absolute; top: max(10px, env(safe-area-inset-top)); inset-inline: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; direction: ltr; }
.moves-box { pointer-events: auto; background: #3c4a52; border: 3px solid #2a343a; border-radius: 12px; min-width: 58px; padding: 2px 8px 0; text-align: center; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); line-height: 1.5; }
.moves-box span { font-size: 11px; font-weight: 700; color: #cfe3ea; display: block; }
.moves-box b { font-family: 'Lalezar', sans-serif; font-size: 26px; line-height: 1.1; display: block; }
.moves-box b.warn { color: #ff8a65; animation: beat .6s infinite; }
.level-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 220px; }
.level-badge { background: linear-gradient(#ffc93c, #ff9f1a); border: 3px solid #fff3d0; color: #fff; font-family: 'Lalezar', sans-serif; font-size: 20px; padding: 0 22px; border-radius: 14px; text-shadow: 0 2px 0 #c46a00; box-shadow: 0 3px 0 #c46a00; line-height: 1.6; }
.prog { position: relative; width: 100%; height: 16px; margin-top: 6px; background: #3c4a52; border: 2px solid #2a343a; border-radius: 10px; overflow: visible; }
.prog-fill { position: absolute; inset-block: 0; left: 0; background: linear-gradient(#7ed957, #43a047); border-radius: 8px; transition: width .4s cubic-bezier(.3,1.5,.5,1); }
.prog-car { position: absolute; left: -14px; top: -4px; width: 22px; height: 12px; background: #e53935; border-radius: 5px 7px 3px 3px; border: 2px solid #fff; }
.prog em { position: absolute; inset: 0; text-align: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; line-height: 12px; }
.coin-pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; background: #3c4a52; border: 3px solid #2a343a; border-radius: 20px; padding: 2px 14px 2px 4px; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); animation: coinbump .3s; }
.coin-pill img { width: 30px; height: 30px; }
.coin-pill b { font-family: 'Lalezar', sans-serif; font-size: 20px; line-height: 1.4; }
.fixed-coin { position: absolute; top: 14px; right: 14px; }
.hud-btns { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 64px); left: 12px; display: flex; flex-direction: column; gap: 8px; }
.round-btn { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(40,48,54,.7); display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.round-btn img { width: 24px; height: 24px; }
.round-btn:active { transform: scale(.9); }
.hint { position: absolute; bottom: max(36px, env(safe-area-inset-bottom)); inset-inline: 10px; text-align: center; font-family: 'Lalezar', sans-serif; font-size: 25px; color: #fff; line-height: 1.7; text-shadow: 0 3px 0 #2a343a, 0 0 6px #2a343a, 2px 0 0 #2a343a, -2px 0 0 #2a343a; animation: bob 1.4s ease-in-out infinite; }

.pop-angry { position: absolute; width: 52px; height: 52px; animation: angry 1.1s forwards; }
.pop-combo { position: absolute; top: 24%; inset-inline: 0; text-align: center; font-family: 'Lalezar', sans-serif; font-size: 52px; color: #ff6fae; line-height: 1.6; text-shadow: 0 4px 0 #8c1046, 3px 0 0 #fff, -3px 0 0 #fff, 0 -3px 0 #fff, 0 7px 0 #fff, 0 10px 14px rgba(0,0,0,.25); animation: combo 1.3s forwards; }
.pop-coin { position: absolute; width: 0; height: 0; }
.pop-coin b { position: absolute; transform: translate(-50%, -100%); font-family: 'Lalezar', sans-serif; font-size: 30px; color: #ffd54f; text-shadow: 0 3px 0 #8a5a00, 2px 0 0 #8a5a00, -2px 0 0 #8a5a00; animation: rise 1s forwards; white-space: nowrap; }
.pop-coin img { position: absolute; width: 26px; height: 26px; left: -13px; top: -13px; animation: coinfly .85s cubic-bezier(.5,0,.8,.5) forwards; opacity: 0; }

.screen { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
.title-screen { background: linear-gradient(180deg, rgba(120,190,255,.55), rgba(139,195,74,.35) 60%, rgba(40,48,54,.55)); }
.logo { width: min(62vw, 260px); filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); animation: bob 2.4s ease-in-out infinite; }
h1 { font-family: 'Lalezar', sans-serif; font-size: 52px; color: #fff; line-height: 1.5; text-shadow: 0 5px 0 #c46a00, 3px 0 0 #ff9f1a, -3px 0 0 #ff9f1a, 0 -3px 0 #ff9f1a; }
.sub { font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #2a343a; margin-top: -10px; margin-bottom: 14px; }
.btn-big { min-width: 210px; font-family: 'Lalezar', sans-serif; font-size: 26px; line-height: 1.7; color: #fff; padding: 6px 30px; border-radius: 18px; background: linear-gradient(#8ee05a, #43a047); border: 3px solid #eaffd8; box-shadow: 0 5px 0 #2e7031; text-shadow: 0 2px 0 #2e7031; transition: transform .1s; }
.btn-sec { min-width: 180px; font-family: 'Lalezar', sans-serif; font-size: 20px; line-height: 1.7; color: #fff; padding: 4px 24px; border-radius: 16px; background: linear-gradient(#ffc93c, #ff9f1a); border: 3px solid #fff3d0; box-shadow: 0 4px 0 #c46a00; text-shadow: 0 2px 0 #c46a00; transition: transform .1s; }
.btn-big:active, .btn-sec:active { transform: translateY(3px) scale(.97); }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
.dim { background: rgba(30,38,44,.55); backdrop-filter: blur(3px); }
.panel { background: #fffaf0; border: 5px solid #ffc93c; border-radius: 26px; padding: 18px 20px 22px; width: min(92vw, 380px); display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 8px 0 #c46a00, 0 20px 40px rgba(0,0,0,.3); max-height: 92vh; overflow-y: auto; }
.panel h2 { font-family: 'Lalezar', sans-serif; font-size: 32px; color: #ff7a1a; line-height: 1.5; text-shadow: 0 2px 0 #ffe0b2; }
.pop-in { animation: popin .4s cubic-bezier(.3,1.6,.5,1); }
.levels-screen { background: rgba(30,38,44,.4); }
.lv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; margin-bottom: 6px; }
.lv { aspect-ratio: 1; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.lv.open { background: linear-gradient(#7fc3f7, #3d8fd8); border: 3px solid #d8eeff; box-shadow: 0 4px 0 #24609b; }
.lv.current { animation: pulse 1.2s infinite; background: linear-gradient(#8ee05a, #43a047); box-shadow: 0 4px 0 #2e7031; }
.lv.locked { background: #dfe3e8; border: 3px solid #c6ccd3; }
.lv b { font-family: 'Lalezar', sans-serif; font-size: 24px; color: #fff; line-height: 1.3; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.lv-stars { display: flex; direction: ltr; }
.lv-stars img { width: 15px; height: 15px; }
.stars { display: flex; gap: 6px; direction: ltr; align-items: flex-end; }
.stars img { width: 64px; height: 64px; }
.stars img:nth-child(2) { width: 80px; height: 80px; }
.stars img.st-on { animation: starin .5s cubic-bezier(.3,1.8,.5,1) backwards; }
.sad { width: 80px; height: 80px; animation: beat .8s infinite; }
.stats { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.stats div { display: flex; justify-content: space-between; align-items: center; background: #fff1d6; border-radius: 12px; padding: 4px 14px; }
.stats span { font-weight: 700; color: #8a5a00; }
.stats b { font-family: 'Lalezar', sans-serif; font-size: 22px; color: #3c4a52; display: flex; align-items: center; gap: 4px; line-height: 1.5; }
.stats b img { width: 22px; height: 22px; }

@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes beat { 50% { transform: scale(1.15); } }
@keyframes coinbump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes popin { from { transform: scale(.6); opacity: 0; } }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } }
@keyframes angry { 0% { transform: scale(0); } 20% { transform: scale(1.3) translateY(-8px); } 35% { transform: scale(.95); } 50% { transform: scale(1.08) rotate(-8deg); } 65% { transform: rotate(8deg); } 80% { opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes combo { 0% { transform: scale(0) rotate(-8deg); } 18% { transform: scale(1.25) rotate(3deg); } 30% { transform: scale(1) rotate(-2deg); } 80% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.1) translateY(-30px); } }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -120%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
@keyframes coinfly { 0% { opacity: 1; transform: translate(0,0) scale(.4); } 25% { opacity: 1; transform: translate(var(--dx), -40px) scale(1.1); } 95% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.8); } }

/* 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;
    }
  }
}