.bodyTag {
overscroll-behavior-y: none;
touch-action: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #55b2e8;
background-image: 
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6zM36 4V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
cursor: auto;
position: relative;
}
.bodyTag_in{position:relative;width:100%;height:100%;}

#app {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
}

.tGameHeader {
flex-shrink: 0;
padding:10px 0px 0px 10px;
display: flex;
justify-content: left;
align-items: center;
/*z-index: 100;*/
}

.bodyTag button, .game-tile {
cursor: pointer;
}

#board-viewport {
flex: 1;
position: absolute;
/*overflow: hidden;*/
display: flex;
align-items: center;
justify-content: center;
top: 60px;
left: 0px;
width: 100%;
height:calc(100% - 145px);
z-index: 100000;
padding:0;
}
#level-indicator,.hint-btn-group,#tray{z-index:100001}
#levels-modal,#win-modal,#lose-modal{z-index:1000003}
img,svg{display:unset;}

#board {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform-origin: center center;
pointer-events: auto;
}

.tGameFooter {
flex-shrink: 0;
padding:0;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
/*z-index: 50;*/
position: absolute;
bottom: 10px;
}

.game-tile {
position: absolute;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center center;
will-change: transform, left, top, width, height;
}

.tile-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
border-radius: 22%; 
border: 2px solid #fff;
box-shadow: 
inset 0 2px 0 rgba(255,255,255,0.8),
inset 0 -2px 5px rgba(0,0,0,0.05),
0 12px 0 #bebebe, 
0 13px 0 1px #999,
0 18px 24px rgba(0,0,0,0.3);
transition: transform 0.1s;
}

.game-tile.clickable:active .tile-content {
transform: translateY(10px);
box-shadow: 
inset 0 1px 0 rgba(255,255,255,0.8),
0 2px 0 #bebebe, 
0 2px 0 1px #999, 
0 4px 8px rgba(0,0,0,0.15);
}

.game-tile.obscured .tile-content {
background: #d4d4d8;
border-color: #cbd5e1;
box-shadow: 
0 8px 0 #94a3b8,
0 8px 0 1px #64748b,
0 10px 12px rgba(0,0,0,0.2);
transform: translateY(4px);
filter: grayscale(0.6) brightness(0.8);
}

.tray-slot {
background: rgba(0,0,0,0.2);
border-radius: 12px;
box-shadow: 
inset 0 4px 10px rgba(0,0,0,0.3),
inset 0 -2px 0 rgba(255,255,255,0.05);
}

.game-tile.matched {
transform: scale(0) rotate(45deg) !important;
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* Particle System */
#particle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20000;
overflow: hidden;
}

.particle {
position: absolute;
pointer-events: none;
will-change: transform, opacity;
z-index: 20001;
}

.hint-btn-group {
display: flex;
gap: 10px;
width: 85%;
max-width: 240px;
margin-right:0;
padding:0 15px 0;
}

.tactile-btn {
flex: 1;
border-radius: 16px;
font-weight: 900;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.1s;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
padding: 4px 0 1px 0;
}

.tactile-btn:active {
transform: translateY(6px);
box-shadow: none !important;
}

.modal-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 32px;
border: 6px solid #f1f5f9;
box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 10px 0 #e2e8f0;
}

.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(0,0,0,0.05);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}

/* Glossy reflection on tiles */
.tile-content::after {
content: '';
position: absolute;
top: 5%;
left: 10%;
width: 80%;
height: 40%;
background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
border-radius: 40% 40% 50% 50%;
pointer-events: none;
}

/* Mobile Performance Fixes */
.bodyTag {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.bodyTag * {
-webkit-tap-highlight-color: transparent !important;
}
.iframe_fs_back{z-index:1999999;top:80px;}
.iframeoverlay{z-index:2000000;}
.contentLoader{z-index:2000001;}
.gameStrip_in{z-index:2000002;}
.selLvl b{font-weight:normal;}

@media(max-width:500px){
	.selLvl{display:none;}
	#level-indicator{padding:7px 20px;}
}