:root{
  --bg:#10030b; --red:#8f0918; --red2:#d81f31; --gold:#ffcf6a; --gold2:#f39a36; --soft:#ffd9a0; --white:#fff7ef; --ink:#1c0908; --shadow:0 20px 50px rgba(0,0,0,.34);
}
*{box-sizing:border-box} html,body{margin:0;font-family:Inter,sans-serif;background:#1a0809;color:var(--white);overflow-x:hidden} a{text-decoration:none;color:inherit} button,input{font:inherit} img{max-width:100%;display:block}
.lucky-app{position:relative;min-height:100vh;background:linear-gradient(180deg, rgba(27,6,8,.14), rgba(61,9,13,.45)),var(--event-bg) center/cover no-repeat fixed;overflow:hidden}
.scene-overlay{position:absolute;inset:0;background:radial-gradient(circle at center, rgba(255,232,160,.08) 0%, rgba(117,0,0,.18) 35%, rgba(25,3,8,.55) 100%)}
.scene-vignette{position:absolute;inset:-10%;background:radial-gradient(circle at top, rgba(255,255,255,.08), transparent 28%),radial-gradient(circle at bottom left, rgba(255,118,63,.22), transparent 25%),radial-gradient(circle at bottom right, rgba(255,160,90,.18), transparent 20%);pointer-events:none}
.event-stage{position:relative;z-index:3;min-height:100vh;display:grid;grid-template-rows:auto 1fr;align-items:start;padding:10px 18px 18px}
.brand-zone{text-align:center;position:relative;padding-top:8px;z-index:8}.brand-logo-word{font-size:clamp(3.7rem,9vw,8rem);font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#d41111;-webkit-text-stroke:2px #fff2eb;text-shadow:0 0 0 #fff,0 6px 0 rgba(0,0,0,.18),0 0 22px rgba(255,90,90,.5),0 12px 30px rgba(0,0,0,.42);font-style:italic}.brand-crown{position:absolute;top:-8px;left:50%;transform:translateX(140px);font-size:clamp(2rem,4vw,3.2rem);color:#e11212;text-shadow:0 0 12px rgba(255,255,255,.4)}.brand-logo-image{max-width:min(760px,88vw);max-height:180px;margin:0 auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}
.pack-grid-zone{display:grid;place-items:center;margin-top:-14px}.pack-grid{width:min(1000px,100%);display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:22px 44px;justify-items:center;align-items:center;padding:0 8px}
.pack-card{position:relative;width:min(170px,15vw);min-width:110px;aspect-ratio:.68/1.08;background:none;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 14px 26px rgba(0,0,0,.34));animation:float-pack 5s ease-in-out infinite}
.pack-card:nth-child(2n){animation-delay:.35s}.pack-card:nth-child(3n){animation-delay:.75s}
.pack-layer,.reward-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.pack-back{z-index:1}.reward-plate{z-index:2;display:grid;place-items:center;opacity:0;transform:scale(.86);transition:transform .45s ease, opacity .45s ease;padding:32% 14% 20%}.reward-frame{position:absolute;inset:22% 12% auto 12%;width:76%;height:40%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.22))}.reward-copy{position:relative;z-index:2;text-align:center;max-width:78%;margin-top:8%}.reward-copy-name{font-size:clamp(.7rem,1.4vw,.98rem);font-weight:900;line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.4)}.pack-front{z-index:4;transition:opacity .35s ease}.pack-top{z-index:5;transform-origin:left center;transition:transform 1.12s cubic-bezier(.18,.85,.25,1),opacity .55s ease}.tear-sweep{z-index:6;top:11%;left:11%;height:8px;width:0;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,247,220,.95) 18%, rgba(255,170,77,.95) 50%, rgba(255,255,255,0) 86%);border-radius:999px;box-shadow:0 0 14px rgba(255,180,84,.75);opacity:0}
.pack-card.revealed .reward-plate,.pack-card.opened .reward-plate{opacity:1;transform:scale(1)}.pack-card.revealed .pack-top,.pack-card.opened .pack-top{transform:translateY(-26px) translateX(14px) rotate(14deg);opacity:.16}.pack-card.revealed .pack-front,.pack-card.opened .pack-front{opacity:.56}.pack-card.tearing .tear-sweep,.pack-card.opening .tear-sweep{opacity:1;animation:tearSweep 1s ease forwards}
.center-panel{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));text-align:center;z-index:9;display:flex;flex-direction:column;align-items:center;gap:12px}.center-panel.is-hidden{display:none}.welcome-text{font-size:clamp(1.1rem,2vw,1.7rem);font-weight:900;text-shadow:0 4px 12px rgba(0,0,0,.38)}.cta-stack{display:grid;gap:10px;width:min(420px,100%);margin:0 auto}.cta-btn{min-height:56px;border-radius:10px;border:0;font-size:clamp(1rem,1.5vw,1.1rem);font-weight:900;display:grid;place-items:center;box-shadow:0 16px 24px rgba(0,0,0,.2);transition:transform .22s ease,filter .22s ease;padding:0 16px}.cta-btn:hover{transform:translateY(-2px)}.cta-primary{background:linear-gradient(180deg,#ef983c,#e98a2b);color:#fff5e8}.cta-secondary{background:linear-gradient(180deg,#f56f6d,#ef5e67);color:#fff}.cta-green{background:linear-gradient(180deg,#35cc5b,#27b64a);color:#fff}.corner-help{position:absolute;left:18px;top:18px;z-index:10;border:0;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-size:1.3rem;backdrop-filter:blur(6px)}
.modal-shell{position:fixed;inset:0;display:none;place-items:center;padding:18px;background:rgba(13,3,7,.68);backdrop-filter:blur(8px);z-index:30}.modal-shell.show{display:grid}.modal-card{position:relative;width:min(920px,100%);padding:28px;border-radius:26px;background:linear-gradient(180deg,rgba(55,9,14,.96),rgba(26,6,10,.98));border:1px solid rgba(255,218,169,.18);box-shadow:0 20px 70px rgba(0,0,0,.45)}.compact-modal{width:min(500px,100%)}.claim-modal{width:min(760px,100%);text-align:center}.event-modal h3,.claim-modal h3,.reward-modal h3,.guide-modal h3{margin:0 0 10px;font-size:clamp(1.7rem,3vw,2.4rem)}.modal-close{position:absolute;right:16px;top:10px;background:none;border:0;color:#fff5ea;font-size:2rem;cursor:pointer}.modal-title{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(255,214,128,.12);color:#ffd585;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;margin-bottom:12px}.modal-card p{margin:0 0 18px;color:#ffead0;line-height:1.65}.form-field{margin-bottom:14px}.form-field input{width:100%;padding:15px 18px;border-radius:14px;border:1px solid rgba(255,225,165,.18);background:rgba(255,255,255,.08);color:#fff;font-size:1rem;outline:none;text-align:center;letter-spacing:.2em;font-weight:900}.btn-full{width:100%}.form-message{margin-top:12px;min-height:22px;font-weight:700;color:#ffd477;text-align:center}.form-message.error{color:#ff8898}.reward-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.reward-showcase-item{padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,221,168,.12)}.reward-badge{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(255,203,106,.12);color:#ffd890;font-size:.72rem;font-weight:800;margin-bottom:10px}.reward-showcase-name{font-weight:900;margin-bottom:8px;font-size:1rem}.reward-showcase-desc{font-size:.9rem;color:#ffe8ca;line-height:1.5}.guide-list{display:grid;gap:10px;margin:6px 0 20px}.guide-item{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.claim-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
@keyframes tearSweep{from{width:0}to{width:78%}} @keyframes float-pack{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:860px){.brand-logo-word{font-size:clamp(2.8rem,12vw,4.8rem)}.brand-crown{transform:translateX(72px);top:-3px}.pack-grid{grid-template-columns:repeat(4,minmax(82px,1fr));gap:18px 14px;padding:0}.pack-card{width:min(128px,20vw);min-width:82px}.reward-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.event-stage{padding:8px 12px 18px}.brand-zone{padding-top:10px}.pack-grid-zone{margin-top:8px}.pack-grid{grid-template-columns:repeat(4,minmax(68px,1fr));gap:16px 10px}.pack-card{width:min(94px,22vw);min-width:68px}.center-panel{top:55%;width:calc(100% - 26px)}.welcome-text{font-size:1rem}.cta-stack{gap:8px}.cta-btn{min-height:46px;font-size:.98rem}.reward-showcase{grid-template-columns:1fr}.claim-actions{grid-template-columns:1fr}.corner-help{top:12px;left:12px;width:40px;height:40px}}