/* Mobile styles */
@media(max-width:768px){

/* Base mobile fixes */

*{

    -webkit-tap-highlight-color:transparent;

}

html{

    font-size:16px;

    -webkit-text-size-adjust:100%;

}

body{

    overflow-x:hidden;

    overflow-y:auto !important;

    -webkit-overflow-scrolling:touch;

    cursor:auto !important;

}

/* Remove cursor:none on mobile */

body *{

    cursor:auto !important;

}

/* Typography */

.title{

font-size:55px;

}

.subtitle{

font-size:15px;

}

/* Countdown */

.countdown{

flex-wrap:wrap;

justify-content:center;

gap:12px;

}

.countdown div{

width:76px;

height:76px;

}

.celebrationText{
    font-size:13px;
    margin-bottom:16px;
}

/* Music button - ensure it's tappable and centered */

#musicBtn{

width:50px;

height:50px;

font-size:20px;

top:12px;

right:12px;

display:flex;

align-items:center;

justify-content:center;

}

/* Game page */

#gameArea{

height:55vh;

}

.heart{

font-size:28px;

}

#score{

font-size:22px;

margin-bottom:20px;

}

header{

padding:25px 15px;

}

/* PIN page */

.card{

width:90%;

max-width:400px;

padding:30px 20px;

}

.pin-dots{

gap:15px;

}

.pin-dots span{

width:18px;

height:18px;

}

.keypad button{

height:55px;

font-size:20px;

}

/* Cake page */

.cake{

width:220px;

height:220px;

}

h1{

font-size:24px;

margin-bottom:20px;

}

button{

padding:14px 28px;

font-size:16px;

}

/* Gift page */

.container{

padding:20px;

}

/* Timeline page */

.timeline{

padding:0 15px;

}

.memory{

margin-bottom:30px;

}

/* Gallery page */

.polaroid{

width:90%;

margin:0 auto 20px;

}

/* Letter page */

.paper{

padding:20px;

width:90%;

max-width:500px;

}

/* Final page */

.container{

padding:20px;

}

.buttons{

flex-direction:column;

gap:15px;

}

.buttons button{

width:100%;

max-width:300px;

}

}

/* Tablet screens */
@media(min-width:769px) and (max-width:1024px){

/* Typography */

.title{

font-size:65px;

}

.subtitle{

font-size:16px;

max-width:500px;

}

/* Countdown */

.countdown div{

width:90px;

height:90px;

}

.countdown span{

font-size:28px;

}

/* Music button */

#musicBtn{

width:52px;

height:52px;

font-size:22px;

}

/* Game page */

#gameArea{

height:60vh;

}

.heart{

font-size:32px;

}

/* PIN page */

.card{

max-width:420px;

padding:35px 25px;

}

/* Cake page */

.cake{

width:260px;

height:260px;

}

/* Letter page */

.paper{

max-width:600px;

padding:45px;

}

.paper h1{

font-size:52px;

}

.paper p{

font-size:22px;

}

/* Gallery page */

.polaroid{

width:85%;

}

/* Timeline page */

.timeline{

max-width:700px;

}

}

/* Desktop and laptop screens */
@media(min-width:1025px){

/* Ensure content is centered and fits nicely */

body{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Game page - center the game area */

#gameArea{

    max-width:1200px;

    margin:0 auto;

}

/* Letter page - ensure paper fits on screen */

.paper{

    max-height:80vh;

    max-width:700px;

}

/* PIN page - keep card centered */

.card{

    max-width:450px;

}

/* Gift page - scale gift for larger screens */

.gift{

    transform:scale(1.1);

}

/* Timeline page - limit width for readability */

.timeline{

    max-width:900px;

    margin:0 auto;

}

/* Gallery page - grid layout for desktop */

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    max-width:1200px;

    margin:0 auto;

    padding:20px;

}

.polaroid{

    width:100%;

}

/* Final page - center content */

.container{

    max-width:800px;

    margin:0 auto;

}

}