*{ margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation;} input, textarea{ -webkit-user-select: text; user-select: text;} button, input, select, textarea{ font-family: inherit;} html{ font-size: 16px; scroll-behavior: smooth; background-color: #050f0d;} body{ font-family: 'Vazirmatn', 'Vazir', sans-serif; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; color: #ffffff; line-height: 1.6;} .game-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: -1; background-image: url('../assets/background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; visibility: visible; transition: opacity 0.6s ease, visibility 0s linear 0s;} body.entry-phase .game-bg{ opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s;} @media (prefers-reduced-motion: reduce){ .game-bg{ transition: none;}} [data-lang="fa"] body{ font-family: 'Vazirmatn', 'Vazir', sans-serif;} [data-lang="en"] body{ font-family: 'Vazirmatn', 'Vazir', sans-serif;} [data-lang="fa"] [data-lang="en"], [data-lang="en"] [data-lang="fa"]{ display: none !important;} [data-lang="rtl"]{ direction: rtl;} [data-lang="ltr"]{ direction: ltr;} #fruits-container{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; overflow: hidden;} body.entry-phase #fruits-container{ display: none;} .fruit{ position: absolute; width: 60px; height: 60px; pointer-events: auto !important; cursor: pointer; transition: transform 0.2s ease; animation: fall linear infinite; opacity: 0.9; font-size: 50px; text-align: center; line-height: 60px; z-index: 1000; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none;} @keyframes fall{ 0%{ top: -100px; transform: rotate(0deg) scale(1); opacity: 0.9;} 10%{ opacity: 1;} 90%{ opacity: 1;} 100%{ top: 100vh; transform: rotate(360deg) scale(0.8); opacity: 0;}} @keyframes fruit-explode{ 0%{ transform: scale(1) rotate(0deg); opacity: 1;} 25%{ transform: scale(1.3) rotate(90deg); opacity: 0.9;} 50%{ transform: scale(1.6) rotate(180deg); opacity: 0.7;} 75%{ transform: scale(1.8) rotate(270deg); opacity: 0.4;} 100%{ transform: scale(2.2) rotate(360deg); opacity: 0;}} @keyframes particle-explosion{ 0%{ transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1;} 50%{ opacity: 0.8;} 100%{ transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(720deg); opacity: 0;}} .seed-watermelon, .seed-watermelon.demo-particle{ background: #4ade80; color: white; box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);} .seed-pomegranate, .seed-pomegranate.demo-particle{ background: #dc2626; color: white; box-shadow: 0 0 6px rgba(220, 38, 38, 0.8);} .seed-snow, .seed-snow.demo-particle{ background: #ffffff; color: #3b82f6; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);} .demo-particle{ animation: seedBurst 1.2s ease-out forwards !important; font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 16px !important;} .seed-sparkle{ background: radial-gradient(circle, #ffd700 50%, #ffed4e 100%); box-shadow: 0 0 12px rgba(255, 215, 0, 0.9); animation: sparkleParticle 1.5s ease-out forwards;} @keyframes snowParticle{ 0%{ transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1;} 30%{ opacity: 0.9;} 100%{ transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(360deg); opacity: 0; filter: blur(2px);}} @keyframes sparkleParticle{ 0%{ transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1;} 50%{ opacity: 0.8; transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(180deg);} 100%{ transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(360deg); opacity: 0;}} .shatter-pomegranate{ animation: pomegranate-shatter 0.8s ease-out forwards;} .shatter-watermelon{ animation: watermelon-shatter 0.8s ease-out forwards;} .shatter-snow{ animation: snow-shatter 1s ease-out forwards;} .shatter-sparkles{ animation: sparkle-shatter 0.8s ease-out forwards;} @keyframes sparkle-shatter{ 0%{ transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1.5);} 100%{ transform: scale(0.2) rotate(180deg); opacity: 0; filter: brightness(2);}} @keyframes pomegranate-shatter{ 0%{ transform: scale(1) rotate(0deg); opacity: 1; filter: hue-rotate(0deg);} 30%{ transform: scale(1.4) rotate(120deg); opacity: 0.8; filter: hue-rotate(45deg);} 100%{ transform: scale(0.1) rotate(360deg); opacity: 0; filter: hue-rotate(180deg);}} @keyframes watermelon-shatter{ 0%{ transform: scale(1) rotate(0deg); opacity: 1;} 20%{ transform: scale(1.2) rotate(72deg); opacity: 0.9;} 40%{ transform: scale(1.5) rotate(144deg); opacity: 0.7;} 60%{ transform: scale(1.3) rotate(216deg); opacity: 0.5;} 80%{ transform: scale(1.1) rotate(288deg); opacity: 0.3;} 100%{ transform: scale(0.05) rotate(360deg); opacity: 0;}} @keyframes snow-shatter{ 0%{ transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1);} 50%{ transform: scale(1.8) rotate(180deg); opacity: 0.6; filter: brightness(1.5) blur(1px);} 100%{ transform: scale(3) rotate(360deg); opacity: 0; filter: brightness(2) blur(3px);}} #seeds-container{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10000; overflow: hidden;} .seed-particle{ position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: seedBurst 1.2s ease-out forwards; display: flex; align-items: center; justify-content: center; font-weight: bold; z-index: 10000;} .seed-watermelon{ background: radial-gradient(circle, #2d2d2d 40%, #1a1a1a 100%); box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);} .seed-pomegranate{ background: radial-gradient(circle, #dc2626 50%, #991b1b 100%); box-shadow: 0 0 5px rgba(220, 38, 38, 0.7);} @keyframes seedBurst{ 0%{ transform: translate(0, 0) scale(1); opacity: 1;} 100%{ transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0;}} .main-container{ position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;} .glass-card{ background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; padding: 40px 30px; max-width: 500px; width: 100%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInUp 1s ease-out; position: relative; overflow: hidden; pointer-events: none; z-index: 10;} .glass-card *{ pointer-events: auto;} #glass-card.win-arrive{ animation: winCardArrive 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;} #glass-card.win-still{ animation: winCardStill 0.26s ease-out both;} #glass-card.win-arrive #gift-section > *{ animation: winLine 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.3s + var(--win-step, 0) * 0.08s);} #gift-section > .title-success{ --win-step: 0;} #gift-section > .gift-message{ --win-step: 1;} #gift-section > .gift-code-box, #gift-section > .gift-amount-box{ --win-step: 2;} #gift-section > #gift-description{ --win-step: 3;} #gift-section > .telegram-notice{ --win-step: 4;} #gift-section > .btn, #gift-section > .gift-bot-btn, #gift-section > .plays-remaining-line{ --win-step: 5;} @keyframes winCardArrive{ 0%{ opacity: 0; transform: translateY(30px) scale(0.9) rotateX(8deg);} 62%{ opacity: 1; transform: translateY(0) scale(1.015) rotateX(0deg);} 80%{ transform: translateY(0) scale(0.998);} 100%{ opacity: 1; transform: none;}} @keyframes winCardStill{ from{ opacity: 0;} to{ opacity: 1;}} @keyframes winLine{ from{ opacity: 0; transform: translateY(14px);} to{ opacity: 1; transform: none;}} .win-crown{ display: block; width: 76px; height: auto; margin: 0 auto 6px; overflow: visible;} .win-crown-band, .win-crown-peaks{ fill: none; stroke: #fde047; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round;} .win-crown-jewel{ fill: #fde047; opacity: 0.92;} #glass-card.win-arrive .win-crown-band{ animation: winDraw 0.5s ease-out both;} #glass-card.win-arrive .win-crown-peaks{ animation: winDraw 0.62s 0.22s ease-out both;} #glass-card.win-arrive .win-crown-jewel{ transform-box: fill-box; transform-origin: 50% 50%; animation: winJewel 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;} #glass-card.win-arrive .win-crown-jewel:nth-of-type(2){ animation-delay: 0.58s;} #glass-card.win-arrive .win-crown-jewel:nth-of-type(3){ animation-delay: 0.64s;} @keyframes winDraw{ from{ stroke-dasharray: 1; stroke-dashoffset: 1;} to{ stroke-dasharray: 1; stroke-dashoffset: 0;}} @keyframes winJewel{ from{ opacity: 0; transform: scale(0.2);} to{ opacity: 0.92; transform: scale(1);}} #glass-card.win-arrive .gift-amount-box::after, #glass-card.win-arrive .gift-code-box::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 66%); transform: translateX(-130%); animation: winShine 1.05s 0.62s ease-out both; pointer-events: none;} #glass-card.win-arrive .gift-amount{ animation: winAmountGlow 1.6s ease-in-out 0.9s 2;} @keyframes winShine{ from{ transform: translateX(-130%);} to{ transform: translateX(130%);}} @keyframes winAmountGlow{ 0%, 100%{ text-shadow: 0 0 14px rgba(253, 224, 71, 0.45);} 50%{ text-shadow: 0 0 28px rgba(253, 224, 71, 0.85), 0 0 48px rgba(253, 224, 71, 0.35);}} .card-section{ display: none; animation: fadeIn 0.6s ease-out;} .card-section.active{ display: block;} .title{ font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 10px; color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);} .title-small{ font-size: 1.6rem; font-weight: 700; text-align: center; margin-bottom: 20px; color: #ffffff;} .title-success{ font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 15px; color: #4ade80; text-shadow: 0 0 20px rgba(74, 222, 128, 0.5); animation: winTitleGlow 3.4s ease-in-out infinite;} .instruction-box{ background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.2);} .game-instruction{ text-align: center; font-size: 1.1rem; font-weight: 500; color: #ffffff; margin: 0; line-height: 1.8;} .btn{ width: 100%; padding: 18px 24px; font-size: 1.1rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; display: block; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);} .btn-primary{ background: linear-gradient(135deg, #dc2626 0%, #16a34a 100%); color: #ffffff;} .btn-primary:hover:not(:disabled){ background: linear-gradient(135deg, #b91c1c 0%, #15803d 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);} .btn-primary:disabled{ background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.5); cursor: not-allowed; opacity: 0.6;} .btn-start{ background: linear-gradient(135deg, #00b391, #00d4aa); color: #041714; font-family: 'Vazirmatn', 'Vazir', sans-serif; font-size: 1.2rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 212, 170, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.32em;} .btn-icon{ width: 1.2em; height: 1.2em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;} .btn-icon--sm{ width: 16px; height: 16px;} .btn-start:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 24px rgba(0, 212, 170, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);} .btn-start:active:not(:disabled){ transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.32);} .btn-start:disabled{ opacity: 0.55; filter: saturate(0.35); cursor: not-allowed;} .loading-indicator{ text-align: center; padding: 30px 20px;} .spinner{ width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: #16a34a; border-right-color: #dc2626; border-radius: 50%; margin: 0 auto 20px; animation: spin 1s linear infinite;} @keyframes spin{ to{ transform: rotate(360deg);}} .loading-text{ font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.9);} .btn-start.gift-bot-btn{ background: linear-gradient(135deg, #1d8ec4, #29a9e0); color: #ffffff; box-shadow: 0 6px 18px rgba(41, 169, 224, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35); margin-top: 10px;} .btn-start.gift-bot-btn:hover:not(:disabled){ filter: brightness(1.06); box-shadow: 0 10px 24px rgba(41, 169, 224, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);} .btn-start.gift-bot-btn:active:not(:disabled){ box-shadow: 0 4px 12px rgba(41, 169, 224, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);} .gift-bot-btn[hidden]{ display: none;} .gift-message{ text-align: center; font-size: 1.1rem; font-weight: 500; margin-bottom: 20px; color: rgba(255, 255, 255, 0.95);} .gift-code-box{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid rgba(74, 222, 128, 0.4); border-radius: 12px; padding: 20px; margin-bottom: 20px; position: relative; overflow: hidden;} .btn[hidden]{ display: none;} .gift-code-box[hidden]{ display: none;} .gift-code{ display: block; box-sizing: border-box; width: 100%; padding: 15px 14px; font-family: 'Courier New', monospace; font-size: clamp(1.1rem, 5vw, 1.5rem); font-weight: 700; letter-spacing: clamp(1px, 0.9vw, 3px); color: #ffffff; direction: ltr; unicode-bidi: isolate; text-align: center; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(74, 222, 128, 0.45); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.35); text-shadow: 0 0 14px rgba(74, 222, 128, 0.4), 0 1px 2px rgba(0, 0, 0, 0.7); overflow-wrap: anywhere; word-break: break-word;} .gift-code-wrap{ position: relative; display: block; flex: 1 1 210px; min-width: 0; border-radius: 12px;} .gift-code-scratch{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 12px; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;} .gift-code-scratch[hidden]{ display: none;} .gift-code-scratch.is-gone{ opacity: 0; transition: opacity 0.42s ease; pointer-events: none;} .gift-code-scratch-hint{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0 10px; font-size: 0.95rem; font-weight: 700; color: #10312a; text-align: center; pointer-events: none;} .gift-code-scratch-hint *{ pointer-events: none;} .gift-code-scratch-hint[hidden]{ display: none;} .coin-mark{ width: 1.4em; height: 1.4em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;} .gift-code-wrap.is-scratched .gift-code{ animation: codeReveal 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);} @keyframes codeReveal{ 0%{ transform: scale(0.97); filter: brightness(1.9);} 60%{ transform: scale(1.01); filter: brightness(1.2);} 100%{ transform: scale(1); filter: none;}} @media (prefers-reduced-motion: reduce){ .gift-code-wrap.is-scratched .gift-code{ animation: none;} .gift-code-scratch.is-gone{ transition: none;}} .gift-amount-box{ display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid rgba(253, 224, 71, 0.45); border-radius: 12px; padding: 20px; margin-bottom: 20px; position: relative; overflow: hidden;} .gift-amount-box[hidden]{ display: none;} .gift-amount-label{ font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);} .gift-amount{ display: inline-flex; align-items: baseline; gap: 0.35em; font-size: 1.6rem; font-weight: 700; color: #fde047; text-shadow: 0 0 14px rgba(253, 224, 71, 0.45);} .gift-amount-unit{ font-size: 0.95rem; font-weight: 600; color: rgba(253, 224, 71, 0.85);} .btn-copy{ background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 10px 15px; font-size: 0.9rem; font-weight: 600; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; gap: 0.29em; cursor: pointer; transition: all 0.2s ease;} .btn-copy:hover{ background: rgba(255, 255, 255, 0.3); transform: scale(1.05);} .btn-copy:active{ transform: scale(0.95);} .gift-description{ text-align: center; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-bottom: 15px; line-height: 1.6;} .telegram-notice{ text-align: center; font-size: 0.9rem; font-weight: 500; color: #86efac; background: rgba(74, 222, 128, 0.1); padding: 12px; border-radius: 8px; border: 1px solid rgba(74, 222, 128, 0.3); margin-bottom: 10px;} @keyframes fadeIn{ from{ opacity: 0;} to{ opacity: 1;}} @keyframes fadeInUp{ from{ opacity: 0; transform: translateY(30px);} to{ opacity: 1; transform: translateY(0);}} @keyframes fadeInDown{ from{ opacity: 0; transform: translateY(-30px);} to{ opacity: 1; transform: translateY(0);}} @keyframes winTitleGlow{ 0%, 100%{ text-shadow: 0 0 16px rgba(74, 222, 128, 0.42), 0 0 34px rgba(253, 224, 71, 0.18);} 50%{ text-shadow: 0 0 26px rgba(74, 222, 128, 0.62), 0 0 52px rgba(253, 224, 71, 0.32);}} @media screen and (max-width: 768px){ .glass-card{ padding: 30px 20px; max-width: 95%;} .title{ font-size: 1.6rem;} .gift-amount{ font-size: 1.3rem;}} @media screen and (max-width: 480px){ .glass-card{ padding: 25px 15px;} .title{ font-size: 1.4rem;} .btn{ padding: 14px 20px; font-size: 1rem;}} .fruit{ position: absolute; cursor: pointer; transition: transform 0.2s; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none; font-size: 50px;} .fruit:hover{ transform: scale(1.15);} .fruit:focus, .fruit:active{ outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent;} .particle{ position: absolute; pointer-events: none; font-size: 20px; animation: particleFly 1s ease-out forwards;} @keyframes particleFly{ to{ transform: translate(var(--x), var(--y)) rotate(720deg); opacity: 0;}} .btn-primary{ background: linear-gradient(135deg, #d32f2f, #e91e63); color: white; border: none; padding: 15px 40px; font-size: 18px; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3);} .btn-primary:hover{ transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.4);} .loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 99999;} .loading.hidden{ display: none;} .spinner{ width: 60px; height: 60px; border: 5px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite;} @keyframes spin{ to{ transform: rotate(360deg);}}