.iframe_fs_back{z-index:1999;}
.iframeoverlay{z-index:2000;}
.contentLoader{z-index:2001;}
.gameStrip_in{z-index:2002;}


@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap');

.botgame * {
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

.botgame {
position: relative;
top:0;
left:0;
width:100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #f8f9fa; /* Clean light background */
font-family: 'Nunito', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden; 
}

.thisgameheader {
text-align: center;
padding: 15px 0 5px 0;
z-index: 10;
background: rgb(255 255 255 / 60%);
border: solid 2px white;
}

#level-title {
color: #a056f3;
font-size: 1.2rem;
margin-top: -5px;
margin-bottom: 15px;
font-weight: 900;
}

#hearts-container {
display: flex;
gap: 8px;
margin-bottom: 10px;
font-size: 1.5rem;
justify-content: center;
}

.heart {
width: 32px;
height: 32px;
transition: transform 0.3s, opacity 0.3s;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.2));
}

.heart-svg {
width: 100%;
height: 100%;
fill: #ff4db8;
}

.heart.lost {
opacity: 0.2;
transform: scale(0.6);
filter: grayscale(1);
}



#game-area {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
touch-action: none;
}

#board {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
}

.tile {
position: absolute;
width: 46px;
height: 46px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
/* Vivid 2.5D Block styling matching the uploaded image */
box-shadow: 
inset 0px 0px 0px 3px var(--inner-border),
0px 6px 0px var(--shadow-color),
0px 8px 6px rgba(0,0,0,0.3);
background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
transition: transform 0.1s, box-shadow 0.1s;
z-index: 2;
}

.tile:active {
transform: translateY(6px) !important; 
box-shadow: 
inset 0px 0px 0px 3px var(--inner-border),
0px 0px 0px var(--shadow-color),
0px 2px 2px rgba(0,0,0,0.3);
}

/* Vivid colors matched to the image directions */
.dir-up { 
--bg-top: #ff75c8; --bg-bottom: #ff4db8; 
--inner-border: #ff9ee0; --shadow-color: #d61f89; 
--arrow-base: #d61f89; 
}
.dir-down { 
--bg-top: #b67af5; --bg-bottom: #a056f3; 
--inner-border: #d4aef8; --shadow-color: #7b2cbf; 
--arrow-base: #7b2cbf; 
}
.dir-left { 
--bg-top: #ffeb5c; --bg-bottom: #ffce00; 
--inner-border: #fff4a3; --shadow-color: #d4a000; 
--arrow-base: #d4a000; 
}
.dir-right { 
--bg-top: #ffb44d; --bg-bottom: #ff9100; 
--inner-border: #ffd699; --shadow-color: #cc7000; 
--arrow-base: #cc7000; 
}
.tile.eye { 
--bg-top: #5a636e; --bg-bottom: #3b4149; 
--inner-border: #828c98; --shadow-color: #1e2226; 
--arrow-base: #1e2226; 
}

.arrow-svg {
width: 30px;
height: 30px;
transition: transform 0.3s;
pointer-events: none; 
overflow: visible;
}

/* The 3D Bevel/Shadow of the arrow */
.arrow-base {
fill: var(--arrow-base);
}

/* The White Face of the arrow */
.arrow-face {
fill: #ffffff; 
}

.tile.eye .arrow-face {
fill: #ffce00; /* Yellow eyes */
}

/* Directional rotations */
.dir-up .arrow-svg { transform: rotate(0deg); }
.dir-right .arrow-svg { transform: rotate(90deg); }
.dir-down .arrow-svg { transform: rotate(180deg); }
.dir-left .arrow-svg { transform: rotate(270deg); }

@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px) rotate(-2deg); }
40% { transform: translateX(4px) rotate(2deg); }
60% { transform: translateX(-4px) rotate(-2deg); }
80% { transform: translateX(4px) rotate(2deg); }
}

.shake {
animation: shake 0.3s ease-in-out;
}

.overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(248, 249, 250, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 20;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}

.overlay.show {
opacity: 1;
pointer-events: all;
}

#win-overlay h2 {
font-size: 3rem;
color: #ff4db8;
margin-bottom: 20px;
text-shadow: 2px 2px 0px #ffce00;
}

#game-over-overlay h2 {
font-size: 3rem;
color: #3b4149;
margin-bottom: 20px;
text-shadow: 2px 2px 0px #ff4db8;
}

.overlay button {
background-color: #fff;
color: #3b4149;
border: 2px solid #ccc;
border-radius: 12px;
padding: 15px 5px;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 4px 0 #ccc;
transition: all 0.1s;
font-family: inherit;
}
.overlay button:active { 
transform: translateY(4px);
box-shadow: 0 0 0 #ccc; 
}

.powerups {
position: absolute;
top: 15px;
right: 15px;
display: flex;
flex-direction: column;
gap: 15px;
z-index: 10;
}

.powerup-btn {
background-color: #fff;
color: #3b4149;
border: 2px solid #ccc;
border-radius: 12px;
padding: 10px 15px;
font-size: 1.5rem;
cursor: pointer;
position: relative;
box-shadow: 0 4px 0 #ccc;
transition: all 0.1s;
}

.powerup-btn:active, .powerup-btn.active {
transform: translateY(4px);
box-shadow: 0 0 0 #ccc;
border-color: #a056f3;
background-color: #f3e5f5;
}

.powerup-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.powerup-btn .badge {
position: absolute;
top: -8px;
right: -8px;
background-color: #ff4db8;
color: white;
font-size: 0.8rem;
width: 22px; height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}

.tile.highlight { animation: pulse-glow 1s infinite alternate; z-index: 5; }

@keyframes pulse-glow {
from { box-shadow: 0 0 5px #fff; }
to { box-shadow: 0 0 20px #ffce00; }
}

.tile.destroyed {
transform: scale(0) rotate(45deg) !important;
opacity: 0;
transition: transform 0.3s ease-in, opacity 0.3s ease-in !important;
}

.dot {
position: absolute;
width: 14px;
height: 14px;
background-color: #dee2e6;
border-radius: 50%;
z-index: 1; 
transform: translateY(0) scale(1);
}

.dot.wave { animation: dot-wave 0.8s ease-in-out forwards; }

@keyframes dot-wave {
0% { transform: translateY(0) scale(1); background-color: #dee2e6; }
50% { transform: translateY(-15px) scale(1.6); background-color: #ff4db8; }
100% { transform: translateY(0) scale(1); background-color: #ffce00; }
}

#particle-container {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 15;
overflow: hidden;
}

.particle {
position: absolute;
pointer-events: none;
border-radius: 50%;
}
/* Mobile Performance Fixes */
.botgame {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.botgame * {
-webkit-tap-highlight-color: transparent !important;
}
canvas {
transform: translateZ(0);
}



/* Clickable level header */
#level-title {
color: #a056f3;
font-size: 1.2rem;
margin-top: -5px;
margin-bottom: 15px;
font-weight: 900;
cursor: pointer;
user-select: none;
transition: transform 0.1s ease;
background: rgba(213, 157, 219, 0.15);
padding: 2px 15px;
border-radius: 10px;
border: solid 1px;
}

#level-title:hover {
transform: scale(1.05);
}

/* Level Grid Modal Styling */
#level-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:0;
max-height: 60vh;
overflow-y: auto;
padding: 10px;
width: 90%;
max-width: 360px;
border: solid 1px #757575;
}

.level-btn {
background-color: #ffffff;
color: #3b4149;
border: 2px solid #a056f3;
border-radius: 12px;
padding: 12px 0;
font-size: 1.2rem;
font-weight: 900;
cursor: pointer;
box-shadow: 0 4px 0 #a056f3;
transition: all 0.1s;
text-align: center;
font-family: inherit;
}

.level-btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #a056f3;
}

.level-btn.current {
background-color: #a056f3;
color: #ffffff;
border-color: #7b2cbf;
box-shadow: 0 4px 0 #7b2cbf;
}

.level-btn:disabled, .level-btn.locked {
opacity: 0.4;
cursor: not-allowed;
border-color: #ccc;
box-shadow: 0 4px 0 #ccc;
background-color: #e9ecef;
color: #6c757d;
}