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

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
}

:root {
/* Bold & Solid Color Palette (Dark Default) */
--bg-main: #0f172a;
--bg-surface: #1e293b;
--bg-item: #334155;
--text-main: #ffffff;
--text-muted: #94a3b8;
--p1-base: #3b82f6;
--p1-dark: #1d4ed8;
--p2-base: #ef4444;
--p2-dark: #b91c1c;
--line-idle: #334155;
--line-middle: #475569;

--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 9999px;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

.mothergameholder.light-mode {
--bg-main: #f1f5f9;
/* Slate 100 */
--bg-surface: #ffffff;
--bg-item: #e2e8f0;
/* Slate 200 */
--text-main: #0f172a;
--text-muted: #64748b;
--line-idle: #cbd5e1;
/* Slate 300 */
--line-middle: #94a3b8;
/* Slate 400 */
}

.mothergameholder * {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
user-select: none;
}

.mothergameholder{
font-family: var(--font-sans);
background-color: var(--bg-main);
color: var(--text-main);
display: flex;
justify-content: center;
}

.app-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

/* --- Clean Compact Header --- */
.game-header {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--bg-item);
padding: 0.5rem 1rem;
z-index: 100;
}

.top-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}



/* Tactile Score Pills */
.scores-compact {
display: flex;
align-items: center;
gap: 0.5rem;
}

.score-pill {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
background-color: var(--bg-item);
border-radius: var(--radius-md);
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
transition: all 0.1s;
}

.score-pill.active-0 {
background-color: var(--p1-base);
border-bottom-color: var(--p1-dark);
transform: translateY(-2px);
}

.score-pill.active-1 {
background-color: var(--p2-base);
border-bottom-color: var(--p2-dark);
transform: translateY(-2px);
}

.p-name {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
}

.p-score {
font-size: 1.1rem;
font-weight: 900;
}

.turn-mini {
font-size: 0.65rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
min-width: 50px;
text-align: center;
}

.header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}

.btn-theme-mini,
.btn-restart-mini {
background-color: var(--bg-item);
border: none;
color: var(--text-main);
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
transition: all 0.1s;
}

.btn-theme-mini:active,
.btn-restart-mini:active {
transform: translateY(2px);
border-bottom-width: 0;
}

.hidden {
display: none !important;
}

/* --- Clean Controls Row --- */
.controls-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}

.ctrl-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
}

.s-btn {
background-color: var(--bg-item);
border: none;
color: var(--text-main);
width: 24px;
height: 24px;
border-radius: 4px;
font-weight: 900;
cursor: pointer;
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.s-btn:active {
transform: translateY(1px);
border-bottom-width: 0;
}

.mini-select {
background-color: var(--bg-item);
color: var(--text-main);
border: none;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
}

/* --- Board Area --- */
.board-area {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--bg-main);

position: absolute;
top: 60px;
left: 0;
width: 100%;
height: calc(100% - 60px);
}

.board-wrapper{position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;}

/* --- Victory Modal --- */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.85);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}

.modal-overlay.hidden {
display: none;
}

.modal-content {
background-color: var(--bg-surface);
padding: 2.5rem;
border-radius: var(--radius-lg);
text-align: center;
max-width: 320px;
width: 100%;
border-bottom: 6px solid var(--bg-item);
}

.modal-title {
font-size: 2rem;
font-weight: 900;
margin-bottom: 0.5rem;
}

.modal-desc {
font-size: 1rem;
color: var(--text-muted);
margin-bottom: 2rem;
}

.btn-large {
width: 100%;
padding: 1rem;
background-color: var(--p1-base);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 900;
cursor: pointer;
border-bottom: 4px solid var(--p1-dark);
}

.btn-large:active {
transform: translateY(2px);
border-bottom-width: 0;
}

/* --- Screen Management --- */
.screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
transition: opacity 0.3s ease, transform 0.3s ease;
background-color: var(--bg-main);
}

.screen.hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.98);
}

/* --- Home / Main Menu --- */
.main-menu {
justify-content: center;
align-items: center;
padding: 2rem;
z-index: 200;
}

.menu-content {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 3rem;
padding: 1rem;
}



/* --- Settings UI --- */
.settings-group {
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
}

.setting-item.full-width {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}

.setting-item label {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-muted);
}

.ctrl-row {
display: flex;
align-items: center;
gap: 1rem;
}

.btn-square {
width: 32px;
height: 32px;
font-size: 1rem;
}

.val-display {
font-size: 1.25rem;
font-weight: 900;
min-width: 2ch;
text-align: center;
}

.big-select {
width: 100%;
background-color: var(--bg-item);
color: var(--text-main);
padding: 0.8rem;
border-radius: var(--radius-md);
border: none;
font-family: inherit;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
}

/* --- Menu Actions --- */
.menu-actions {
display: flex;
gap: 1rem;
align-items: center;
}

.btn-primary-large {
flex: 1;
padding: 1.25rem;
background-color: var(--p1-base);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 900;
font-size: 1.1rem;
cursor: pointer;
border-bottom: 5px solid var(--p1-dark);
transition: all 0.1s;
}

.btn-primary-large:active {
transform: translateY(2px);
border-bottom-width: 0;
}

/* --- Game Scene Tweaks --- */
.btn-icon {
background: none;
border: none;
color: var(--text-main);
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s;
}

.btn-icon:hover {
background: rgba(255, 255, 255, 0.05);
}

.mothergameholder.light-mode .btn-icon:hover {
background: rgba(0, 0, 0, 0.05);
}

/* Modal Shake Update */
@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}

10% {
transform: translate(-1px, -2px) rotate(-1deg);
}

20% {
transform: translate(-3px, 0px) rotate(1deg);
}

30% {
transform: translate(3px, 2px) rotate(0deg);
}

40% {
transform: translate(1px, -1px) rotate(1deg);
}

50% {
transform: translate(-1px, 2px) rotate(-1deg);
}

60% {
transform: translate(-3px, 1px) rotate(0deg);
}

70% {
transform: translate(3px, 1px) rotate(-1deg);
}

80% {
transform: translate(-1px, -1px) rotate(1deg);
}

90% {
transform: translate(1px, 2px) rotate(0deg);
}

100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}

.shake-fx {
animation: shake 0.3s cubic-bezier(.36, .07, .19, .97) both;
}
/* Mobile Performance Fixes */
.mothergameholder{
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.mothergameholder * {
-webkit-tap-highlight-color: transparent !important;
}
canvas, .game-container {
transform: translateZ(0);
}
#gameCanvas{position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
.iframe_fs_back{top:80px;}
.turn-text{font-size:14px;}