.tGameHolder * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
user-select: none;
-webkit-user-select: none;
}

.tGameHolder{
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(180deg, #49b1ed 0%, #76d4f9 100%);
background-image: url('data:image/svg+xml;utf8,<svg width="100" height="173.2" xmlns="http://www.w3.org/2000/svg"><path d="M50 0 L100 28.86 L100 86.6 L50 115.47 L0 86.6 L0 28.86 Z" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="2"/><path d="M100 86.6 L150 115.47 L150 173.2 L100 202.06 L50 173.2 L50 115.47 Z" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="2"/><path d="M0 86.6 L50 115.47 L50 173.2 L0 202.06 L-50 173.2 L-50 115.47 Z" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="2"/></svg>'), linear-gradient(180deg, #49b1ed 0%, #76d4f9 100%);
background-size: 100px 173.2px, 100% 100%;
touch-action: none;
}

#game-ui {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
}

/* Header / HUD */
.header {
pointer-events: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 20px 30px;
margin-top: calc(env(safe-area-inset-top, 20px) + 20px);
}

.level-container {
display: flex;
align-items: center;
height: 34px;
border-radius: 17px;
position: relative;
padding-left: 28px;
padding-right: 18px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
min-width: 150px;
justify-content: center;
background-color: #0b0726;
color: white;
font-weight: 900;
font-size: 1.1rem;
margin-left: 15px;
}

.progress-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 17px;
overflow: hidden;
}

.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #00f0ff;
border-radius: 17px;
transition: width 0.3s ease-out;
opacity: 0.6;
}

.level-text {
font-weight: 900;
font-size: 1.2rem;
letter-spacing: 1px;
z-index: 2;
}

.level-icon-wrapper {
position: absolute;
left: -24px;
top: -7px;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}

.level-hex {
width: 100%;
height: 100%;
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
background: linear-gradient(135deg, #d52bff 0%, #00f0ff 30%, #ffcc00 60%, #ff2a2a 80%, #39e639 100%);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: 900;
font-size: 1.2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Levels Button in HUD */
.levels-btn {
background: linear-gradient(180deg, #ffaa00 0%, #e67300 100%);
border: 2px solid #663300;
border-radius: 18px;
padding: 6px 16px;
color: white;
font-weight: 900;
font-size: 0.95rem;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.15s, background 0.15s;
pointer-events: auto;
letter-spacing: 0.5px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.levels-btn:active {
transform: scale(0.95);
}

/* Modal Overlay Styling */
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(11, 7, 38, 0.75);
backdrop-filter: blur(4px);
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 0.3s ease;
pointer-events: auto;
}

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

.modal-card {
background: #ffffff;
border: 4px solid #302b63;
border-radius: 25px;
width: 320px;
max-width: 90%;
max-height: 80vh;
padding: 25px 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.modal-card h2 {
color: #3b82f6;
font-size: 1.8rem;
font-weight: 900;
margin-bottom: 15px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.close-btn {
position: absolute;
top: 12px;
right: 15px;
background: none;
border: none;
font-size: 1.5rem;
font-weight: 900;
color: #888;
cursor: pointer;
line-height: 1;
}

.levels-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
overflow-y: auto;
padding: 10px 5px;
max-height: 300px;
}

.level-item {
aspect-ratio: 1;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.level-item.unlocked {
background: linear-gradient(135deg, #00f0ff 0%, #0088ff 100%);
color: white;
border: 2px solid #0055aa;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.level-item.unlocked:active {
transform: scale(0.92);
}

.level-item.active-level {
border: 3px solid #39e639;
box-shadow: 0 0 10px #39e639;
}

.level-item.locked {
background: #e0e0e0;
color: #999;
border: 2px solid #cccccc;
cursor: not-allowed;
font-size: 0.9rem;
}

/* Game Over Screens */
#game-over,
#game-lose {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
pointer-events: auto;
z-index: 100;
opacity: 1;
transition: opacity 0.5s, transform 0.5s;
display: flex;
flex-direction: column;
align-items: center;
}

#game-over.hidden,
#game-lose.hidden {
opacity: 0;
transform: translate(-50%, -40%) scale(0.9);
pointer-events: none;
}

.win-card-header {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
margin-bottom: -20px;
}

.win-title-pill {
background: linear-gradient(180deg, #2db6fa 0%, #1a88e8 100%);
border: 3px solid #0b4594;
border-radius: 25px;
padding: 10px 30px;
color: white;
font-weight: 900;
font-size: 1.2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

.lose-title-pill {
background: linear-gradient(180deg, #fa4c2d 0%, #e81a1a 100%);
border: 3px solid #940b0b;
border-radius: 25px;
padding: 10px 30px;
color: white;
font-weight: 900;
font-size: 1.2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

.win-card-body {
background: #ffffff;
border: 4px solid #302b63;
border-radius: 30px;
padding: 50px 30px 40px;
width: 100%;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.win-card-body h2 {
color: #3b82f6;
font-size: 2rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 30px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
}

#next-level-btn, #restart-lvl-btn {
border-radius: 50px;
padding: 15px 40px;
color: white;
font-size: 1.2rem;
font-weight: 900;
cursor: pointer;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.4);
transition: transform 0.1s;
outline: none;
width: 100%;
letter-spacing: 1px;
}

#next-level-btn {
background: linear-gradient(180deg, #39e639 0%, #1f9e1f 100%);
border: 3px solid #0d5e0d;
}

#restart-lvl-btn {
background: linear-gradient(180deg, #ff6b6b 0%, #d62d2d 100%);
border: 3px solid #8c0c0c;
}

#next-level-btn:active, #restart-lvl-btn:active {
transform: translateY(4px);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.4);
}

canvas {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
touch-action: none;
background: transparent;
}

@media (max-width: 600px) {
.header {
padding: 15px;
}
.level-container {
min-width: 120px;
}
}

.tGameHolder{
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.tGameHolder * {
-webkit-tap-highlight-color: transparent !important;
}
canvas, .game-container {
transform: translateZ(0);
}
.iframeoverlay{z-index:100;}




@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4E.ttf) format('truetype');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4deyC4E.ttf) format('truetype');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4ZmyC4E.ttf) format('truetype');
}