*{box-sizing:border-box;margin:0;padding:0} body{ width:100%;height:100vh;background:#111;color:#fff; display:flex;align-items:center;justify-content:center;overflow:hidden; background-position:center;background-size:cover;background-repeat:no-repeat; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif } .banner{position:fixed;background-size:contain;background-repeat:no-repeat;z-index:10} .banner-1{top:1rem;left:1rem;width:140px;height:140px} .banner-2{top:1rem;right:1rem;width:260px;height:260px} .banner-3{bottom:1rem;left:1rem;width:180px;height:90px} .banner-4{bottom:1rem;right:1rem;width:320px;height:90px} #container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center} #card{width:420px;height:520px;position:relative;user-select:none;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35)} #card:active{transform:scale(1.02)} #premio{position:absolute;top:calc(50% + 290px);left:50%;transform:translate(-50%,-50%); background:rgba(0,0,0,.55);padding:.6rem 1rem;border-radius:10px;font-weight:600;min-width:260px;text-align:center} canvas,img{border-radius:12px} #fullscreen-btn{position:fixed;top:10px;right:10px;background:none;border:none;cursor:pointer;z-index:20} #fullscreen-btn img{width:42px;height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} @media (max-width:768px){ #card{width:320px;height:420px} .banner-2{width:180px;height:180px} .banner-4{width:240px} }