*{ 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;} .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: 100;} .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;} 7. GLASS MORPHISM CARD WITH ANIMATED BORDER ============================================ */ .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;} @keyframes giftCardIn{ 0%{ transform: scale(0.55); opacity: 0; box-shadow: 0 0 0 0 rgba(253, 224, 71, 0);} 55%{ transform: scale(1.07); opacity: 1; box-shadow: 0 0 70px 24px rgba(253, 224, 71, 0.85);} 75%{ transform: scale(1); box-shadow: 0 0 40px 14px rgba(253, 224, 71, 0.55);} 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 224, 71, 0);}} .gift-pop{ animation: giftCardIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;} .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-game{ font-size: 1.4rem; font-weight: 700; text-align: center; padding: 15px; color: #ffffff; background: rgba(0, 0, 0, 0.3); border-radius: 12px; line-height: 1.8;} .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: pulse 2s 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, #16a34a 0%, #dc2626 100%); color: #ffffff; font-family: 'Vazirmatn', 'Vazir', sans-serif; font-size: 1.2rem;} .btn-start:hover{ background: linear-gradient(135deg, #15803d 0%, #b91c1c 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);} .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);} .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; 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;} .gift-code{ font-size: 1.5rem; font-weight: bold; color: #4ade80; font-family: 'Courier New', monospace; text-shadow: 0 0 10px rgba(74, 222, 128, 0.5); letter-spacing: 2px;} .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; 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 pulse{ 0%, 100%{ transform: scale(1);} 50%{ transform: scale(1.05);}} @media screen and (max-width: 768px){ .glass-card{ padding: 30px 20px; max-width: 95%;} .title{ font-size: 1.6rem;} .gift-code{ font-size: 1.2rem; letter-spacing: 1px;} .title-game{ font-size: 1.2rem;}} @media screen and (max-width: 480px){ .glass-card{ padding: 25px 15px;} .title{ font-size: 1.4rem;} .btn{ padding: 14px 20px; font-size: 1rem;} .title-game{ font-size: 1.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);} .gift-code{ background: linear-gradient(135deg, #ffeaa7, #fdcb6e); padding: 20px; border-radius: 10px; font-size: 24px; font-weight: bold; margin: 20px 0; cursor: pointer; transition: all 0.3s; direction: ltr;} .gift-code:hover{ transform: scale(1.05); box-shadow: 0 5px 20px rgba(253,203,110,0.5);} .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);}}