.tGameBody * {
margin: 0;
padding: 0;
box-sizing: border-box
}

.tGameBody{
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #f0f4f8;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
touch-action: none;
user-select: none;
-webkit-user-select: none
}

canvas {
display: block;
width: 100%;
height: 100%
}

#ui {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center
}

#score {
font-size: clamp(2rem, 8vw, 4.5rem);
font-weight: 800;
color: #2d3436;
text-shadow: 0 4px 15px rgba(255, 255, 255, .8);
margin-top: clamp(20px, 5vh, 50px);
letter-spacing: -2px;
transition: transform .15s ease
}

#score.pop {
transform: scale(1.3)
}

#perfect {
font-size: clamp(1.2rem, 5vw, 2.5rem);
font-weight: 700;
color: #ffd700;
text-shadow: 0 0 30px rgba(255, 215, 0, .7), 0 0 60px rgba(255, 215, 0, .3);
opacity: 0;
transition: opacity .2s, transform .3s;
transform: scale(.5) translateY(10px);
margin-top: 10px;
letter-spacing: 2px
}

#perfect.show {
opacity: 1;
transform: scale(1) translateY(0)
}

#combo {
font-size: clamp(.9rem, 3.5vw, 1.6rem);
font-weight: 600;
color: #6c5ce7;
text-shadow: 0 0 15px rgba(108, 92, 231, .3);
opacity: 0;
transition: opacity .2s;
margin-top: 5px
}

#combo.show {
opacity: 1
}

#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: auto;
background: rgba(255, 255, 255, .7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity .4s
}

#overlay.hidden {
opacity: 0;
pointer-events: none
}

#overlay tGame_h1 {
font-size: clamp(2rem, 8vw, 4rem);
font-weight: 900;
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
margin-bottom: 8px
}

#overlay .sub {
font-size: clamp(.9rem, 3.5vw, 1.4rem);
color: rgba(255, 255, 255, .7);
margin-bottom: clamp(20px, 5vh, 50px);
font-weight: 400
}

#overlay .final-score {
font-size: clamp(3rem, 12vw, 6rem);
font-weight: 900;
color: #2d3436;
text-shadow: 0 0 40px rgba(108, 92, 231, .2);
margin-bottom: 5px;
display: none
}

#overlay .best {
font-size:20px;
color: #000;
font-weight: bold;
margin-bottom: clamp(15px, 4vh, 40px);
display: none
}

#tap-hint {
font-size: clamp(1rem, 4vw, 1.5rem);
color: rgba(0, 0, 0, .7);
animation: pulse 1.8s ease-in-out infinite;
font-weight: 500
}

@keyframes pulse {

0%,
100% {
opacity: .6;
transform: scale(1)
}

50% {
opacity: 1;
transform: scale(1.05)
}
}
/* Mobile Performance Fixes */
.tGameBody {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.tGameBody * {
-webkit-tap-highlight-color: transparent !important;
}
canvas {
transform: translateZ(0);
}