:root {
--c-slate-50: #f8fafc;
--c-slate-100: #f1f5f9;
--c-slate-200: #e2e8f0;
--c-slate-300: #cbd5e1;
--c-slate-400: #94a3b8;
--c-slate-500: #64748b;
--c-slate-600: #475569;
--c-slate-700: #334155;
--c-slate-800: #1e293b;
--c-slate-900: #0f172a;
--c-blue-500: #3b82f6;
--c-blue-600: #2563eb;
--c-blue-700: #1d4ed8;
--c-blue-800: #1e40af;
--c-blue-900: #1e3a8a;
--c-red-400: #f87171;
--c-red-500: #ef4444;
--c-red-600: #dc2626;
--c-yellow-300: #fde047;
--c-yellow-400: #facc15;
--c-yellow-500: #eab308;
--c-yellow-600: #ca8a04;
--bg-main: linear-gradient(to bottom right, var(--c-slate-100), var(--c-slate-200), var(--c-slate-300));
--text-main: var(--c-slate-800);
--pattern-color: #000;
--theme-btn-bg: #fff;
--theme-btn-color: var(--c-slate-600);
--theme-btn-border: #cbd5e1;
--theme-btn-shadow: #94a3b8;
--theme-btn-hover-bg: var(--c-slate-50);
--header-title: var(--c-slate-800);
--header-desc: var(--c-slate-500);
--mode-btn-bg: #fff;
--mode-btn-text: var(--c-slate-600);
--mode-btn-border: #cbd5e1;
--mode-btn-shadow: #94a3b8;
--mode-btn-hover-bg: var(--c-slate-50);
--mode-btn-active-bg: var(--c-blue-600);
--mode-btn-active-shadow: var(--c-blue-800);
--status-bg: rgba(255, 255, 255, 0.8);
--status-border: #fff;
--status-shadow: 0 4px 6px -1px var(--c-slate-300);
--status-label: var(--c-slate-500);
--badge-p1-bg: rgba(254, 226, 226, 1);
--badge-p1-text: var(--c-red-600);
--badge-p2-bg: rgba(254, 252, 232, 1);
--badge-p2-text: var(--c-yellow-600);
--board-bg: var(--c-blue-500);
--board-border: var(--c-blue-700);
--board-shadow: 0 20px 40px rgba(29, 78, 216, 0.3);
--grid-bg: rgba(37, 99, 235, 0.5);
--cell-empty: rgba(241, 245, 249, 0.95);
--cell-hover: rgba(203, 213, 225, 0.90);
--leg-bg: var(--c-blue-800);
--win-text-p1: var(--c-red-600);
--win-text-p1-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
--win-text-p2: var(--c-yellow-600);
--win-text-p2-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
--win-text-draw: var(--c-slate-600);
}

.tGameMH.dark-mode {
--bg-main: linear-gradient(to bottom right, var(--c-slate-900), var(--c-slate-800), #000);
--text-main: var(--c-slate-100);
--pattern-color: #fff;
--theme-btn-bg: var(--c-slate-700);
--theme-btn-color: var(--c-yellow-400);
--theme-btn-border: var(--c-slate-600);
--theme-btn-shadow: var(--c-slate-900);
--theme-btn-hover-bg: var(--c-slate-600);
--header-title: #fff;
--header-desc: var(--c-slate-400);
--mode-btn-bg: var(--c-slate-700);
--mode-btn-text: var(--c-slate-300);
--mode-btn-border: var(--c-slate-600);
--mode-btn-shadow: var(--c-slate-900);
--mode-btn-hover-bg: var(--c-slate-600);
--mode-btn-active-bg: var(--c-blue-600);
--mode-btn-active-shadow: var(--c-blue-900);
--status-bg: rgba(30, 41, 59, 0.8);
--status-border: var(--c-slate-700);
--status-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--status-label: var(--c-slate-300);
--badge-p1-bg: rgba(239, 68, 68, 0.2);
--badge-p1-text: var(--c-red-400);
--badge-p2-bg: rgba(250, 204, 21, 0.2);
--badge-p2-text: var(--c-yellow-400);
--board-bg: var(--c-blue-700);
--board-border: var(--c-blue-900);
--board-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
--grid-bg: rgba(30, 64, 175, 0.5);
--cell-empty: rgba(15, 23, 42, 0.95);
--cell-hover: rgba(30, 41, 59, 0.90);
--leg-bg: var(--c-blue-900);
--win-text-p1: var(--c-red-400);
--win-text-p1-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
--win-text-p2: var(--c-yellow-400);
--win-text-p2-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
--win-text-draw: var(--c-slate-300);
}

.tGameMH * {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.tGameMH {
font-family: 'Inter', sans-serif;
background-image: var(--bg-main);
color: var(--text-main);
display: flex;
flex-direction: column;
align-items: center;
transition: background-image 0.5s ease, color 0.5s ease;
position: relative;
overflow-x: hidden;
width:100%;
height:100%;
}
.bg-pattern {
position: absolute;
inset: 0;
opacity: 0.04;
pointer-events: none;
transition: background-color 0.5s ease;
background-color: var(--pattern-color);
background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0);
background-size: 32px 32px;
}
.theme-toggle {
position: absolute;
top:40px;
right: 1rem;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: var(--theme-btn-bg);
color: var(--theme-btn-color);
border: 2px solid var(--theme-btn-border);
box-shadow: 0 4px 0 var(--theme-btn-shadow);
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
background-color: var(--theme-btn-hover-bg);
}

.theme-toggle:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--theme-btn-shadow);
}

.hidden {
display: none !important;
}

.tGameContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
/*justify-content: center;*/
margin: 0 auto;
position: relative;
z-index: 10;
padding: 5px;
}


/* Mode Selection */
.mode-selection {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3px;
margin-bottom:10px;
}

.mode-btn {
padding:5px 7px;
font-size:12px;
}
}

.mode-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
background-color: var(--mode-btn-bg);
color: var(--mode-btn-text);
border: 2px solid var(--mode-btn-border);
box-shadow: 0 4px 0 var(--mode-btn-shadow);
transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

.mode-btn:hover:not(.active) {
background-color: var(--mode-btn-hover-bg);
}

.mode-btn:active:not(.active) {
transform: translateY(4px);
box-shadow: 0 0 0 var(--mode-btn-shadow);
}

.mode-btn.active {
background-color: var(--mode-btn-active-bg);
color: #fff;
border-color: var(--mode-btn-active-bg);
box-shadow: 0 0 0 var(--mode-btn-active-shadow);
/*transform: translateY(4px);*/
}

.game-status-card {
/*border-radius: 0.5rem;*/
padding:0;
width: 100%;
/*max-width: 22rem;*/
/*margin-bottom: 0.5vh;*/
/*backdrop-filter: blur(4px);*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*background-color: var(--status-bg);
border: 1px solid var(--status-border);
box-shadow: var(--status-shadow);*/
position:absolute;
left:0;
top:50px;
z-index:2;
}

.turn-indicator {
display: none;
align-items: center;
gap:15px;
font-size:15px;
font-weight:700;
white-space:nowrap;
}

.turn-indicator.active {
display: flex;
}

.turn-indicator .label {
color: var(--status-label);
}

.badge {
display: flex;
align-items: center;
gap: 0.5rem;
padding:1px 0;
border-radius: 0.75rem;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
flex-shrink: 0;
justify-content: center;
min-width: 120px;
margin:4px 0 0;
}

.badge.pt-p1 {
background-color:#b83535;
color:#fff;
text-shadow: 1px 1px 0px BLACK;
}

.badge.pt-p2 {
background-color:#b9961b;
color:#fff;
text-shadow: 1px 1px 0px BLACK;
}



.winner-display {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}

.winner-display.active {
display: flex;
}

.winner-text {
font-size:20px;
font-weight: 900;
letter-spacing: 0.025em;
filter: drop-shadow(var(--win-text-p1-shadow));
margin:3px 0 0;
}

.winner-text.p1 {
color: var(--win-text-p1);
filter: drop-shadow(var(--win-text-p1-shadow));
}

.winner-text.p2 {
color: var(--win-text-p2);
filter: drop-shadow(var(--win-text-p2-shadow));
}

.winner-text.draw {
color: var(--win-text-draw);
filter: none;
}

.reset-btn {
margin-top:-10px;
padding: 0.75rem 2rem;
background-color:#c212ff;
color: #fff;
font-family: inherit;
font-weight: 700;
font-size: 1rem;
border-radius: 0.5rem;
border: 2px solid #de7fff;
box-shadow: 0 4px 0 #7b00a5;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

.reset-btn:hover {
background-color: var(--c-blue-500);
}

.reset-btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--c-blue-800);
}

/* The Board */
.board-wrapper {
padding:8px;
border-radius:16px;
border-bottom: 8px solid var(--board-border);
display: inline-block;
position: relative;
background-color: var(--board-bg);
box-shadow: var(--board-shadow);
transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;

    position: absolute;
    top: 100px;
    height: calc(100% - 110px);
    max-height: fit-content;
    aspect-ratio: 1.15 / 1;

    max-width:95%;
    /*width:auto;
    max-width: 90%;
    max-height: fit-content;*/
}

.hover-indicators {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0 0.25rem;
}

.indicator-col {
width: var(--cell-size);
height: 1.5vh;
border-radius: 9999px 9999px 0 0;
display: flex;
justify-content: center;
align-items: flex-end;
transition: opacity 0.2s;
}

.indicator-inner {
width: 75%;
height: 75%;
border-radius: 9999px;
opacity: 0.7;
}

.indicator-inner.p1 {
background-color: var(--c-red-500);
}

.indicator-inner.p2 {
background-color: var(--c-yellow-400);
}

.grid-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
border-radius: 1rem;
background-color: var(--grid-bg);

    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    aspect-ratio: 1 / 1;
}

.board {
display: flex;
flex-direction: column;
gap: 10px;

    position: absolute;
    width:calc(100% - 15px);
    height:calc(100% - 30px);
    aspect-ratio: 1 / 1;
}

.board-row {
display: flex;
gap: 0.75rem;

        height: 16.66%;
        width: 100%;
}

.cell-container {
--cell-size: min(10vw, 9vh, 3.5rem);
width: var(--cell-size);
height: var(--cell-size);
border-radius: 9999px;
position: relative;
overflow: hidden;
transition: all 0.2s;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(255, 255, 255, 0.1);
background-color: var(--cell-empty);

    width: 14.28%;
    height: 100%;
}

.cell-container.interactive {
cursor: pointer;
}

.cell-container.interactive:hover {
transform: scale(1.05);
}

.cell-container.hovered {
background-color: var(--cell-hover);
}

.piece {
position: absolute;
inset: 2px;
border-radius: 9999px;
box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.3), inset 0 4px 8px rgba(255, 255, 255, 0.3), 0 4px 6px rgba(0, 0, 0, 0.5);
animation: bounce-short 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.piece.p1 {
background-image: linear-gradient(to bottom right, var(--c-red-400), var(--c-red-600));
}

.piece.p2 {
background-image: linear-gradient(to bottom right, var(--c-yellow-300), var(--c-yellow-500));
}

.piece.winning {
border: 4px solid white;
z-index: 10;
}

.piece.dimmed {
opacity: 0.4;
filter: grayscale(30%);
}


@keyframes bounce-short {
0% {
transform: translateY(-200%);
}

60% {
transform: translateY(10%);
}

80% {
transform: translateY(-5%);
}

100% {
transform: translateY(0);
}
}
/* Mobile Performance Fixes */
.tGameMH {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.tGameMH * {
-webkit-tap-highlight-color: transparent !important;
}
canvas, .game-container {
transform: translateZ(0);
}
@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: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZg.ttf) format('truetype');
}
.iframe_fs_back{z-index:1999;top:40px;}
.iframeoverlay{z-index:2000;}
.contentLoader{z-index:2001;}
.gameStrip_in{z-index:2002;}