@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

.mothergameholder{
font-family:'Poppins', sans-serif;
background-color:#90B4DA;
/* Match Checkers dark blue/grey aesthetic */
touch-action:none;
overflow:hidden;
user-select:none;
}

#game-container-wrapper {
position:relative;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

#game-container {
position:relative;
width:auto;
height:calc(100% - 60px);
/* Make it perfectly square up to a max dimension to be responsive */
aspect-ratio:1 / 1;
max-width:100%;
max-height:fit-content;
box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.3);
border-radius:20px;
background:#A392D6;
top:10px;
/* Checkers dark purple cell color */
}

canvas {
display:block;
width:100%;
height:100%;
border-radius:20px;
}

.wooden-border {
border:2vmin solid #8fa4bf;
/* Checkers secondary border color */
box-sizing:border-box;
background:#F4F1FA;
}

.btn {
transition:all 0.2s;
}

.btn:hover {
transform:translateY(-2px);
box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn:active {
transform:translateY(0);
}

/* Modal Overlay like Checkers */
.modal-overlay {
backdrop-filter:blur(4px);
}

/* Settings Modal Styles from Checkers */
.settings-content {
background:white;
color:#292524;
/* text-stone-800 */
}
/* Mobile Performance Fixes */
.mothergameholder {
touch-action:none !important;
user-select:none !important;
-webkit-user-select:none !important;
overscroll-behavior:none !important;
}
* {
-webkit-tap-highlight-color:transparent !important;
}
canvas {
transform:translateZ(0);
}

#topPlayerSection{padding:10px 65px 0 10px;}
.carromHolder{position:relative;width:100%;height:100%;padding:0;margin:0;display:block;}
#topPlayerCard{float:left;}
#bottomPlayerCard{float:right;}
.turnIndicatorMn{position:absolute;top:10px;left:50%;transform:translateX(-50%);}
.carromMidCont{height:100%;object-fit:contain;width:100%;}
.manualnone{display:none;}
.topPlayerCard_class{display:block;padding:10px;width:130px;}
.topUserBlock{}
.topUB_name{display:block;text-align:center;margin:0 0 0 10px;}
.topUB_color{float:left;margin:-18px 0 0 5px;}
.topUB_score{float:right;margin:-20px 0 0 5px;}
.topU_bot .topUB_name{color:white;}
#gameCanvas{width:100%;height:100%;position:relative;object-fit:contain;}
#menu-btn{top:10px;right:10px;border:solid 1px #000000;}
#statusBanner{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%, -50%);min-width:200px;}
.closeMMenu{position:absolute;top:14px;right:20px;font-family:cursive;width:30px;height:30px;border:solid 1px white;text-align:center;border-radius:50%;line-height:28px;cursor:pointer;}
.mothergameholder .btn_carrom{background-color:#6c8ab0;}
.mothergameholder .btn_discpool{background-color:#8fa4bf;}
.mothergameholder .btn_freestyle{background-color:#99badd;}
.mothergameholder .btn_OL{padding:5px 0;color:white;font-weight:bold;}
.hndl_ol_menu{height:100%;max-height: fit-content;overflow: auto;}
#main-menu{z-index: 10000;}

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

@media(max-width: 500px){
	.turnIndicatorMn{display:none;}
	.fullscreen_on .turnIndicatorMn{display:block;position:fixed;bottom:70px;top:auto;}
}