*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#5b1b9e 0,#ea00d9 50%,#ffd700 100%);font-family:'Bangers',system-ui,sans-serif;color:#fff;perspective:1000px}body::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:40px 40px;z-index:-1;pointer-events:none}.container{display:flex;flex-direction:column;height:100%;width:100%;position:relative;z-index:1}header{padding:clamp(1rem,3vw,2rem);text-align:center}header img{max-height:clamp(40px,8vw,80px);width:auto;animation:popIn .6s cubic-bezier(.175,.885,.32,1.275) both;filter:drop-shadow(2px 2px 0 #000)}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.5rem}h1{font-size:clamp(2.5rem,7vw,6rem);transform:rotate(-3deg);text-transform:uppercase;color:#ffd700;-webkit-text-stroke:3px #000;text-shadow:5px 5px 0 #000;animation:chestOpen .8s cubic-bezier(.175,.885,.32,1.275) both;line-height:1.1;margin-bottom:1.5rem}main p{font-size:clamp(1.1rem,3vw,1.6rem);max-width:800px;margin:0 auto 2.5rem;font-family:system-ui,sans-serif;font-weight:700;line-height:1.4;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;animation:fadeIn 1s ease-out .5s both}a.cta{display:inline-flex;align-items:center;justify-content:center;padding:clamp(.8rem,2vw,1.5rem) clamp(2rem,5vw,4rem);background:#ffea00;color:#000;font-size:clamp(1.8rem,4vw,3rem);text-decoration:none;border-radius:12px;border:5px solid #000;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2),6px 6px 0 #000;transform:rotate(2deg);transition:transform .2s,filter .2s,box-shadow .2s;text-transform:uppercase;animation:chestPop .8s cubic-bezier(.175,.885,.32,1.275) .6s both;position:relative;overflow:hidden;outline:none;letter-spacing:1px}a.cta:hover,a.cta:focus{transform:rotate(0deg) scale(1.05);filter:brightness(1.1);box-shadow:inset -4px -4px 0 rgba(0,0,0,.2),8px 8px 0 #000}a.cta::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-20deg);animation:shimmer 3s infinite}footer{padding:1.2rem;text-align:center;font-family:system-ui,sans-serif;font-size:clamp(.75rem,1.5vw,.9rem);color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);border-top:2px solid rgba(255,255,255,.1)}footer p{margin:0;text-shadow:none}.card{position:absolute;width:clamp(70px,12vw,140px);height:clamp(105px,18vw,210px);border:5px solid #000;border-radius:12px;box-shadow:inset -5px -5px 0 rgba(0,0,0,.3),8px 8px 0 rgba(0,0,0,.6);z-index:0;animation:float 3s ease-in-out infinite alternate}.c1{--rx:20deg;--ry:-30deg;--rz:-15deg;top:12%;left:8%;background:linear-gradient(135deg,#00f0ff,#0057ff);transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}.c2{--rx:-20deg;--ry:30deg;--rz:15deg;bottom:18%;right:8%;background:linear-gradient(135deg,#ff00ea,#ff8a00);transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));animation-delay:-1.5s}.c3{--rx:10deg;--ry:20deg;--rz:25deg;top:15%;right:12%;width:clamp(50px,8vw,100px);height:clamp(75px,12vw,150px);background:linear-gradient(135deg,#39ff14,#00a800);transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));animation-delay:-.7s;animation-duration:2.5s}@keyframes chestOpen{0%{transform:scale(.1) translateY(100px) rotate(15deg);opacity:0;filter:brightness(3)}60%{transform:scale(1.1) translateY(-10px) rotate(-5deg);opacity:1;filter:brightness(1.5)}100%{transform:scale(1) translateY(0) rotate(-3deg);filter:brightness(1)}}@keyframes chestPop{0%{transform:scale(0) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(2deg);opacity:1}}@keyframes popIn{0%{transform:translateY(-50px) scale(.5);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}100%{transform:translateY(-20px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}}@keyframes shimmer{0%{left:-100%}20%{left:200%}100%{left:200%}}@media(max-width:768px){.c1,.c2,.c3{opacity:.4;filter:blur(1px)}}