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


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

:root {
/* Default Palette: Sunrise */
--board-bg: linear-gradient(180deg, #FFE53B 0%, #FF2525 100%);
--bg-gradient: #f0f2f5;

/* Dynamic Shape Variables */
--shape-radius: 50%;
--shape-clip: circle(50% at 50% 50%);
--board-width: 85vmin;
--board-height: 85vmin;
--bubble-size: 11.5%;
--bubble-gap: 2.5%;
}
#bubbles-left{height:auto;background:none;}
.boholder{position:absolute;top:0;left:0;width:100%;height:100%;}
.txtslt800{position:absolute;top:0;left:0;width:100%;height:100%;}

.boholder * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
font-family: 'Nunito', sans-serif;
}

.text-slate-800 {
margin: 0;
padding: 0;
background-color: var(--bg-gradient);
background-image: 
linear-gradient(0deg, rgba(0,0,0,0.3) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 80%),
repeating-linear-gradient(0deg, transparent 0, transparent 78px, rgba(0,0,0,0.1) 78px, rgba(0,0,0,0.1) 80px);
background-size: 100% 80px, 100% 2px, 100% 100%, 100% 80px;
height: 100%;
display: block;
flex-direction: column;
overflow: hidden;
transition: background-color 0.5s ease;
}

/* Classic Casual Game UI */
.glass-panel {
background: #fff;
border: 4px solid #4a2c1d;
border-radius: 20px;
box-shadow: 
0 8px 0 rgba(0,0,0,0.2),
inset -6px -6px 0 rgba(0,0,0,0.05);
color: #4a2c1d;
}

.btn-game {
background: #ffcc00;
border: 4px solid #4a2c1d;
border-radius: 16px;
box-shadow: 0 6px 0 #bc9500;
color: #4a2c1d;
font-weight: 900;
transition: all 0.1s;
}

.btn-game:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #bc9500;
}

.classic-label {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
color: #fff;
background: #4a2c1d;
padding: 2px 8px;
border-radius: 8px;
letter-spacing: 1px;
margin-bottom: 4px;
display: inline-block;
}

.select-classic {
background: #fff;
border: 3px solid #4a2c1d;
border-radius: 12px;
padding: 4px 12px;
font-weight: 900;
color: #4a2c1d;
outline: none;
cursor: pointer;
}

/* The Board Environment */
.game-area {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
perspective: 1500px;
position: relative;
transform-origin: top center;
}

/*.textSlate_in{display:block;position:relative;top:0;left:0;transform-origin:top center;}*/
.textSlate_in{display:block;position:absolute;top:0;left:0;width:100%;height:100%;}

/* The board container handles the shadow */
.board-container {
/*width: var(--board-width);
height: var(--board-height);*/
width: 100%;
height: 100%;
aspect-ratio:1 / 1;
/*max-width: 600px;
max-height: 600px;*/
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* filter: drop-shadow is applied here so it follows the clipped shape of the child */
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));
}

/* 3D Board Surface */
.board {
position: absolute;
inset: 0;
background: var(--board-bg);
transform-style: preserve-3d;
overflow: hidden; 

display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
padding: 8% 0; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

/* Apply clip-path and radius to the board itself */
border-radius: var(--shape-radius);
clip-path: var(--shape-clip);
}

/* The Outer Inner-Rim */
.board::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow:
inset 0 0 0 8px rgba(255, 255, 255, 0.15),
inset 6px 6px 15px 8px rgba(255, 255, 255, 0.4),
inset -6px -6px 15px 8px rgba(0, 0, 0, 0.2);
z-index: 20;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

/* Ensure the rim is also clipped */
border-radius: var(--shape-radius);
clip-path: var(--shape-clip);
}

/* Row Container */
.board-row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: var(--bubble-gap);
flex: 1;
z-index: 10;
}

/* Horizontal Ridges between rows */
.horizontal-divider {
width: 100%;
height: 4px;
flex-shrink: 0;
background: transparent;
border-top: 2px solid rgba(255, 255, 255, 0.35);
border-bottom: 2px solid rgba(0, 0, 0, 0.15);
z-index: 5;
}

/* Realistic Silicone Bubbles */
.bubble {
width: var(--bubble-size);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: transparent;
position: relative;
cursor: pointer;

box-shadow: 
inset 5px 5px 10px rgba(255, 255, 255, 0.55),
inset -5px -5px 10px rgba(0, 0, 0, 0.15),
3px 5px 8px rgba(0, 0, 0, 0.2);

transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
}

/* Bright Specular Highlight (Gloss) */
.bubble::after {
content: '';
position: absolute;
top: 15%;
left: 15%;
width: 32%;
height: 32%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 65%);
border-radius: 50%;
transition: opacity 0.12s;
pointer-events: none;
}

/* Popped State */
.bubble.popped {
box-shadow: 
inset 8px 8px 16px rgba(0, 0, 0, 0.35),
inset -4px -4px 10px rgba(255, 255, 255, 0.4),
0 0 0 rgba(0,0,0,0);
transform: scale(0.92);
}

.bubble.popped::after {
opacity: 0.15;
}

/* Pattern Mode Glow */
.bubble.glow {
box-shadow: 
inset 5px 5px 10px rgba(255, 255, 255, 0.8),
inset -4px -4px 10px rgba(0, 0, 0, 0.1),
0 0 20px 8px rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}

/* Particle Canvas */
#particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 50;
}

/* Modals */
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}

.btn-game {
transition: transform 0.1s, box-shadow 0.1s;
}
.btn-game:active {
transform: scale(0.95);
}

/* Pop Hint Arrow */
.pop-hint {
position: relative;
}
.pop-hint::before {
content: '';
position: absolute;
top: -45px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 20px solid #ffcc00;
filter: drop-shadow(0 3px 0 rgba(0,0,0,0.2));
animation: bounce-arrow 0.5s infinite alternate ease-in-out;
z-index: 100;
pointer-events: none;
}
@keyframes bounce-arrow {
from { transform: translateX(-50%) translateY(0); }
to { transform: translateX(-50%) translateY(-12px); }
}
/* Mobile Performance Fixes */
.text-slate-800 {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.text-slate-800 * {
-webkit-tap-highlight-color: transparent !important;
}
canvas {
transform: translateZ(0);
}

.iframe_fs_back{top:auto;bottom:25px}