.iframe_fs_back{z-index:1999;}
.iframeoverlay{z-index:2000;}
.contentLoader{z-index:2001;}
.gameStrip_in{z-index:2002;}
.bot_game{position:relative;top:0;left:0;width:100%;height:100%;}
@font-face {
font-family: 'Fredoka';
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/fredoka/v17/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3O8SLMFg.ttf) format('truetype');
}
@font-face {
font-family: 'Fredoka';
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/fredoka/v17/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3OwyLMFg.ttf) format('truetype');
}
@font-face {
font-family: 'Fredoka';
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/fredoka/v17/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3OLyXMFg.ttf) format('truetype');
}
@font-face {
font-family: 'Fredoka';
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/fredoka/v17/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3OFiXMFg.ttf) format('truetype');
}


.bot_game {
font-family: 'Fredoka', sans-serif;
background: linear-gradient(180deg, #2b2d5c 0%, #e0528e 45%, #f17b7a 75%, #ffb68f 100%);
overflow-x: hidden;
position: relative;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;  
scrollbar-width: none;  
}

/* Aesthetic Grain Overlay */
.bot_game::after {
content: "";
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
z-index: 0;
}

/* 3D Board Styling */
.gameplay_page .board-container {
background-color: #b0652d; /* Warm brown border */
border-radius: 20px;
padding: 12px;
box-shadow: 0 8px 15px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.2);
}

.gameplay_page .cell-tile {
background-color: #f7ca7a; /* Golden/Tan tile */
border-radius: 14px;
box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 6px 0 #cc9142;
transition: all 0.1s ease;
position: relative;
}

/* The 'pressed' effect when clicking an empty cell */
.gameplay_page .cell-tile.empty-hover:active {
transform: translateY(6px);
box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 0px 0 #cc9142;
}

.gameplay_page .cell-tile.win-highlight {
background-color: #ffe6a0;
box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), 0 6px 0 #e0aa53, 0 0 15px rgba(255,255,255,0.5);
}

/* Thick, rounded SVG Pieces matching the image */
.gameplay_page .piece {
width: 55%;
height: 55%;
color: #583115; /* Dark brown */
stroke-width: 18;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 3px 2px rgba(88, 49, 21, 0.3));
animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popIn {
0% { transform: scale(0.3); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Subtle pulsing for the oldest piece */
.gameplay_page .fading-warning {
animation: fadeWarning 1.5s infinite ease-in-out;
}

@keyframes fadeWarning {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.9); }
}

/* Pill Buttons matching the "Tee Off" UI */
.gameplay_page .pill-btn {
background-color: #fff6f0;
color: #1a2e35;
border-radius: 9999px;
padding: 10px 24px;
font-weight: 600;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: transform 0.1s, box-shadow 0.1s;
}

.gameplay_page .pill-btn:active {
transform: translateY(2px);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Improved Falling Petals Background Effect */
.gameplay_page .petal {
position: absolute;
border-radius: 50% 15% 50% 15%;
animation: fall linear infinite;
z-index: -1;
pointer-events: none;
transform-origin: center;
box-shadow: inset 0 0 10px rgba(255,255,255,0.3);
}

@keyframes fall {
0% { transform: translateY(-10vh) translateX(0) rotate(0deg) scale(var(--s)); opacity: 0; }
10% { opacity: var(--max-opacity); }
90% { opacity: var(--max-opacity); }
100% { transform: translateY(110vh) translateX(var(--drift)) rotate(var(--rot)) scale(var(--s)); opacity: 0; }
}
/* Mobile Performance Fixes */
.gameplay_page .bot_game {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.gameplay_page .bot_game * {
-webkit-tap-highlight-color: transparent !important;
}
canvas {
transform: translateZ(0);
}

.bodyclass{padding:10px;}
.thss_gameboard{transform-origin:top center;}