*,:before,:after{box-sizing:border-box;margin:0;font-family:Playfair Display}.container-grid{display:grid;grid-template-rows:repeat(2,auto);min-height:100vh}.header{display:flex;flex-direction:column;padding:1rem}.header>h1{color:#f49b75;text-shadow:2px 2px 5px rgba(0,0,0,.3);text-align:center;font-size:clamp(2rem,5vw,3rem)}.header>h2{font-size:clamp(1.8rem,3vw,2.8rem);color:#9c9795}.header>p{align-items:center;font-size:clamp(.9rem,2.5vw,1.2rem);color:#878382}.header>button{width:200px;padding:.6rem;border-radius:.6rem;margin:.8rem;align-self:center}.cards-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.card{width:200px;height:200px;cursor:pointer}.card-inner{transition:1.5s;transform-style:preserve-3d}.card-front img{width:200px;height:200px}.card-back{text-align:center;transform:rotateY(180deg)}.card-back img{width:200px;height:200px}.card-inner>div{width:200px;height:200px;position:absolute;backface-visibility:hidden;display:block}.card-inner.is-flipped{transform:rotateY(-180deg)}footer{display:flex;justify-content:center;align-items:flex-end;color:#adabab;padding:1.8rem}nav{display:flex;justify-content:space-around;align-items:center;padding:1rem 8rem;gap:1rem}.lives{display:flex;gap:.5rem;align-items:center}.lives>img{width:40px;height:auto}.marco{display:flex;justify-content:center;align-items:center;flex:1}.tiempo{font-weight:700;font-size:clamp(1rem,2.5vw,1.2rem)}span{font-weight:700}.mensaje{display:flex;flex-direction:column;align-items:center;font-size:2rem;text-align:center;color:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:2rem;z-index:1000;background:#0009;border-radius:12px;box-shadow:0 0 15px #00000080}.oculto{display:none}.boton{width:50%;margin-top:1rem;padding:.5rem 1rem;background-color:#f49b75;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s;transition:transform .5s ease;font-size:clamp(.9rem,3vw,1rem)}.boton:hover{transform:scale(1.1);background-color:#f3ad8f}.puntaje{color:#baafab;font-size:clamp(1rem,3vw,1.5rem)}@media (max-width: 678px){.container-grid{padding:1rem}.header{align-items:center;text-align:center}.header>button{margin:1rem 0}.cards-container{flex-direction:row;gap:2rem}.card{width:120px;height:120px}.card-front img,.card-back img,.card-inner>div{width:120px;height:120px}nav{flex-direction:column;padding:1rem}.lives{flex-wrap:wrap;justify-content:center}.mensaje{padding:1rem}.boton{width:80%}.puntaje{text-align:center}footer{font-size:.9rem}}