*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--red-deep: #8B0000;--red-main: #C0392B;--red-bright: #E74C3C;--red-light: #FF6B6B;--gold-deep: #B8860B;--gold-main: #DAA520;--gold-bright: #FFD700;--gold-light: #FFF0A0;--cream: #FFF8F0;--text-dark: #2C1810;--text-mid: #5D3A1A;--shadow-red: rgba(139, 0, 0, .4);--shadow-gold: rgba(218, 165, 32, .5);--font-display: "Playfair Display", serif;--font-body: "Inter", sans-serif}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font-body);background:var(--red-deep);color:var(--cream);min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;position:relative}.loading-screen{background:radial-gradient(ellipse at center,#922b21,#7b241c 40%,#4a0000);min-height:100vh;display:flex;align-items:center;justify-content:center}.loading-content{display:flex;flex-direction:column;align-items:center;gap:16px}.loading-icon{font-size:64px;animation:bounce-float 1.2s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(255,215,0,.5))}.loading-text{font-size:1rem;color:#fff0a0b3;letter-spacing:2px}.page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:20px}.landing-page{background:radial-gradient(ellipse at top,#c0392b,#8b0000 40%,#4a0000)}.envelope-page{background:radial-gradient(ellipse at center,#922b21,#7b241c 40%,#4a0000)}.result-page{background:radial-gradient(ellipse at top,#8b0000,#5d0000,#2c0000)}.result-page.tier-jackpot{background:radial-gradient(ellipse at top,#8b6914,#5d0000 30%,#2c0000);animation:jackpot-bg 2s ease-in-out infinite alternate}@keyframes jackpot-bg{0%{background:radial-gradient(ellipse at top,#8b6914,#5d0000 30%,#2c0000)}to{background:radial-gradient(ellipse at top,#c0392b,#8b6914 30%,#4a0000)}}.particles-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.particle{position:absolute;bottom:-50px;animation:float-up linear infinite;-webkit-user-select:none;user-select:none}@keyframes float-up{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:.6}to{transform:translateY(-110vh) rotate(360deg);opacity:0}}.landing-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:32px;max-width:480px;width:100%}.logo-area{position:relative;display:flex;align-items:center;justify-content:center}.main-envelope{font-size:96px;animation:bounce-float 3s ease-in-out infinite;filter:drop-shadow(0 8px 24px rgba(255,215,0,.6));line-height:1}@keyframes bounce-float{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}.sparkles{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;pointer-events:none}.sparkle{position:absolute;font-size:20px;animation:sparkle-anim 2s ease-in-out infinite}.s1{top:0;left:10%;animation-delay:0s}.s2{top:10%;right:5%;animation-delay:.4s}.s3{bottom:5%;left:5%;animation-delay:.8s}.s4{top:50%;right:-10%;animation-delay:1.2s}.s5{bottom:0;right:20%;animation-delay:1.6s}@keyframes sparkle-anim{0%,to{transform:scale(1) rotate(0);opacity:.7}50%{transform:scale(1.4) rotate(180deg);opacity:1}}.title-area{text-align:center}.main-title{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,4rem);font-weight:900;color:var(--gold-bright);text-shadow:0 0 20px rgba(255,215,0,.8),0 2px 4px rgba(0,0,0,.5);letter-spacing:2px;line-height:1.1}.subtitle{font-size:clamp(1rem,3vw,1.25rem);color:var(--gold-light);margin-top:8px;font-weight:500;letter-spacing:1px}.desc{font-size:.95rem;color:#fff0a0cc;margin-top:12px;line-height:1.5}.name-form{width:100%;display:flex;flex-direction:column;gap:16px}.input-group{display:flex;flex-direction:column;gap:8px}.input-label{font-size:.9rem;font-weight:600;color:var(--gold-light);letter-spacing:.5px}.name-input{width:100%;padding:16px 20px;border-radius:16px;border:2px solid rgba(218,165,32,.4);background:#ffffff14;color:#fff;font-size:1.1rem;font-family:var(--font-body);outline:none;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.name-input::placeholder{color:#fff0a066}.name-input:focus{border-color:var(--gold-bright);background:#ffffff1f;box-shadow:0 0 0 4px #ffd70026,0 4px 20px #0000004d}.name-input.input-error{border-color:#ff6b6b;box-shadow:0 0 0 4px #ff6b6b26}.error-msg{font-size:.85rem;color:#f99;padding-left:4px}.btn-start{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 32px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--gold-main) 0%,var(--gold-bright) 50%,var(--gold-main) 100%);color:var(--red-deep);font-size:1.15rem;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #daa52080,0 2px 8px #0000004d;letter-spacing:.5px}.btn-start:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px #daa520b3,0 4px 12px #0006}.btn-start:active{transform:translateY(0) scale(.98)}.btn-icon{font-size:1.3rem;animation:wiggle 1.5s ease-in-out infinite}@keyframes wiggle{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.rules-note{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#fff0a0b3;background:#0003;padding:10px 16px;border-radius:10px;border:1px solid rgba(218,165,32,.2)}.envelope-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px;max-width:480px;width:100%}.greeting{text-align:center}.greeting-for{font-size:.95rem;color:#fff0a099;text-transform:uppercase;letter-spacing:3px;font-weight:500;margin-bottom:4px}.greeting-name{font-family:var(--font-display);font-size:clamp(2.8rem,10vw,5rem);font-weight:900;color:var(--gold-bright);text-shadow:0 0 30px rgba(255,215,0,.9),0 0 60px rgba(255,215,0,.4),0 3px 6px rgba(0,0,0,.5);line-height:1.1;letter-spacing:2px;animation:name-glow 2.5s ease-in-out infinite alternate}@keyframes name-glow{0%{text-shadow:0 0 20px rgba(255,215,0,.7),0 3px 6px rgba(0,0,0,.5)}to{text-shadow:0 0 50px rgba(255,215,0,1),0 0 80px rgba(255,165,0,.5),0 3px 6px rgba(0,0,0,.5)}}.name-highlight{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5)}.subtitle{font-size:clamp(1rem,3vw,1.2rem);color:var(--gold-light);margin-top:6px;font-weight:500;letter-spacing:1px}.greeting-sub{margin-top:8px;color:#fff0a0b3;font-size:.95rem;min-height:1.4em;transition:all .3s}.slot-display{background:#0006;border:2px solid rgba(218,165,32,.4);border-radius:16px;padding:16px 32px;min-width:240px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s;box-shadow:0 4px 20px #0000004d}.slot-display.rolling{border-color:var(--gold-bright);box-shadow:0 0 20px #ffd70066,0 4px 20px #0000004d;animation:slot-flicker .08s linear infinite}.slot-display.stopping{border-color:#fff;box-shadow:0 0 30px #ffffff80;animation:slot-stop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes slot-flicker{0%,to{opacity:1}50%{opacity:.85}}@keyframes slot-stop{0%{transform:scale(1.05)}60%{transform:scale(.97)}to{transform:scale(1)}}.slot-placeholder{font-family:var(--font-display);font-size:2rem;font-weight:900;color:#fff0a04d;letter-spacing:6px}.slot-amount{font-family:var(--font-display);font-size:clamp(1.4rem,5vw,2rem);font-weight:900;color:var(--gold-bright);text-shadow:0 0 20px rgba(255,215,0,.8);letter-spacing:1px}.phase-rolling .envelope-wrapper{animation:shake .12s ease-in-out infinite}.envelope-area{display:flex;flex-direction:column;align-items:center;gap:20px}.envelope-btn{background:none;border:none;cursor:pointer;padding:0;outline:none;transition:transform .2s}.envelope-btn:disabled{cursor:default}.envelope-btn:not(:disabled):hover .envelope-wrapper{transform:scale(1.05)}.envelope-wrapper{position:relative;width:200px;height:200px;transition:transform .3s ease}.env-body{width:200px;height:160px;position:relative;border-radius:8px;overflow:visible}.env-front{width:200px;height:160px;background:linear-gradient(160deg,#c0392b,#922b21 60%,#7b241c);border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #00000080,0 0 0 2px #daa52066,inset 0 1px #ffffff1a;position:relative;overflow:hidden}.env-front:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,215,0,.1) 0%,transparent 50%)}.env-flap{position:absolute;top:-1px;left:0;width:200px;height:80px;background:linear-gradient(160deg,#e74c3c,#c0392b);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:8px 8px 0 0;z-index:2;box-shadow:0 4px 12px #0000004d;transform-origin:top center;transition:transform .8s cubic-bezier(.4,0,.2,1)}.env-pattern{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}.env-symbol{font-size:48px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.env-ornament{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-main),var(--gold-bright));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:var(--red-deep);box-shadow:0 2px 12px #daa52099;font-family:serif}.phase-shaking .envelope-wrapper{animation:shake .1s ease-in-out infinite}@keyframes shake{0%,to{transform:rotate(-4deg) translate(-3px)}50%{transform:rotate(4deg) translate(3px)}}.phase-opening .env-flap{transform:rotateX(180deg)}.phase-opening .envelope-wrapper,.phase-done .envelope-wrapper{animation:pop-up .5s cubic-bezier(.34,1.56,.64,1)}@keyframes pop-up{0%{transform:scale(.9)}to{transform:scale(1.1)}}.money-burst{position:absolute;top:-20px;left:50%;transform:translate(-50%);display:flex;gap:8px;font-size:28px;animation:burst-up .8s ease-out forwards}@keyframes burst-up{0%{transform:translate(-50%) translateY(0) scale(0);opacity:0}50%{opacity:1}to{transform:translate(-50%) translateY(-60px) scale(1.2);opacity:0}}.tap-hint{font-size:1rem;color:#fff0a0cc;text-align:center}.anim-pulse{animation:pulse-text .8s ease-in-out infinite alternate}@keyframes pulse-text{0%{opacity:.6;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}.lucky-note{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--gold-light);opacity:.8}.result-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:24px;max-width:480px;width:100%;animation:slide-in-up .6s cubic-bezier(.34,1.56,.64,1)}@keyframes slide-in-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.already-drawn-badge{background:#0000004d;border:1px solid rgba(218,165,32,.3);color:#fff0a0b3;padding:8px 16px;border-radius:20px;font-size:.85rem}.result-header{text-align:center}.result-envelope-icon{font-size:72px;animation:bounce-float 3s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(255,215,0,.5))}.result-name{font-family:var(--font-display);font-size:clamp(1.5rem,5vw,2rem);color:var(--gold-bright);margin-top:8px;text-shadow:0 0 20px rgba(255,215,0,.5)}.wave{display:inline-block;animation:wave-hand 1.5s ease-in-out infinite;transform-origin:70% 70%}@keyframes wave-hand{0%,to{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-10deg)}}.result-congrats{margin-top:8px;font-size:1.1rem;color:var(--gold-light)}.amount-card{width:100%;padding:32px 24px;border-radius:24px;text-align:center;position:relative;overflow:hidden}.tier-card-small{background:linear-gradient(135deg,#c0392bcc,#8b0000e6);border:2px solid rgba(218,165,32,.4);box-shadow:0 8px 32px #0006}.tier-card-medium{background:linear-gradient(135deg,#8b6914cc,#654300e6);border:2px solid rgba(255,215,0,.6);box-shadow:0 8px 32px #daa5204d}.tier-card-big{background:linear-gradient(135deg,#b8860be6,#654300f2);border:2px solid var(--gold-bright);box-shadow:0 8px 40px #daa52080}.tier-card-jackpot{background:linear-gradient(135deg,#8b6914,#daa520,#8b6914);border:3px solid var(--gold-bright);box-shadow:0 0 40px #ffd70099,0 8px 40px #00000080;animation:jackpot-card-pulse 1.5s ease-in-out infinite alternate}@keyframes jackpot-card-pulse{0%{box-shadow:0 0 40px #ffd70099,0 8px 40px #00000080}to{box-shadow:0 0 80px #ffd700e6,0 8px 60px #0009}}.amount-label{font-size:.9rem;color:#fff0a0b3;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}.amount-value{font-family:var(--font-display);font-size:clamp(2rem,8vw,3.5rem);font-weight:900;color:var(--gold-bright);text-shadow:0 0 30px rgba(255,215,0,.8),0 2px 4px rgba(0,0,0,.5);line-height:1.1}.tier-card-jackpot .amount-value{color:#fff;text-shadow:0 0 40px rgba(255,255,255,.9),0 0 80px rgba(255,215,0,.8),0 2px 4px rgba(0,0,0,.5);animation:jackpot-text-pulse .8s ease-in-out infinite alternate}@keyframes jackpot-text-pulse{0%{transform:scale(1)}to{transform:scale(1.03)}}.jackpot-badge{margin-top:12px;font-size:1.1rem;font-weight:700;color:var(--red-deep);background:linear-gradient(135deg,var(--gold-bright),#FFF0A0);display:inline-block;padding:6px 20px;border-radius:20px;letter-spacing:2px}.result-message{background:#00000040;border:1px solid rgba(218,165,32,.3);border-radius:16px;padding:16px 20px;text-align:center;width:100%}.result-message p{font-size:1rem;color:var(--gold-light);line-height:1.6}.result-meta{font-size:.8rem;color:#fff0a080}.share-section{text-align:center}.share-hint{font-size:.9rem;color:#fff0a099}.btn-reset{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#fff0a080;padding:10px 20px;border-radius:10px;font-size:.8rem;cursor:pointer;transition:all .3s ease;font-family:var(--font-body)}.btn-reset:hover{background:#ffffff26;color:#fff0a0cc}@media(max-width:480px){.main-envelope{font-size:72px}.envelope-wrapper{width:160px;height:160px}.env-body,.env-front{width:160px;height:128px}.env-flap{width:160px;height:64px}.env-symbol{font-size:36px}.env-ornament{width:36px;height:36px;font-size:18px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#daa52066;border-radius:3px}.toast-warning{position:fixed;top:24px;left:50%;transform:translate(-50%);z-index:9999;background:linear-gradient(135deg,#b8860b,#daa520);color:#2c1810;font-weight:700;font-size:1rem;padding:14px 24px;border-radius:50px;box-shadow:0 8px 32px #0006,0 0 0 2px #ffd70080;white-space:nowrap;animation:toast-in .4s cubic-bezier(.34,1.56,.64,1)}@keyframes toast-in{0%{transform:translate(-50%) translateY(-60px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}