.ttt-game [hidden] {display:none !important;}
#tttProfile,.ttt-header,#tttViewers,#tttBetForm {display:flex;align-items:center;gap:10px;}
#tttAvatar {border-radius:50%;object-fit:cover;}
.ttt-invite {position:relative;display:flex;align-items:center;gap:4px;min-width:0;padding:6px;border:1px solid var(--garam-c-bbdef5,#bbdef5);border-radius:14px;background:var(--garam-c-ffffff,#fff);}
.ttt-invite input {flex:1;min-width:0;padding:6px;border:0;background:transparent;color:var(--garam-c-123c5c,#123c5c);}
.ttt-invite button {flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;}
#tttCopied {position:absolute;right:0;bottom:calc(100% + 8px);padding:5px 10px;border-radius:20px;background:var(--garam-theme-ui-accent,#087cce);color:#fff;}
#tttCopied::after {content:"";position:absolute;top:100%;right:15px;border:5px solid transparent;border-top-color:var(--garam-theme-ui-accent,#087cce);}
html[data-garam-mode="dark"] .ttt-invite {background:var(--garam-theme-surface);border-color:var(--garam-dark-muted);}
html[data-garam-mode="dark"] .ttt-invite input {color:var(--garam-dark-text);}
html[data-garam-mode="dark"] .ttt-invite button,html[data-garam-mode="dark"] #tttCopied {color:#0c0c0e;}
.ttt-header {justify-content:space-between;}
.ttt-board {min-height:470px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;}
.ttt-header {align-self:stretch;}
#tttStatus {margin:0;padding:8px 16px;border-radius:16px;background:#fff;color:#123c5c;text-align:center;}
@media(max-width:740px) {
    #tttName {display:none;}
    #tttMobileBet {padding:20px;}
}
.ttt-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,390px);gap:8px;}
.ttt-grid button {aspect-ratio:1;border:1px solid var(--garam-c-bbdef5,#bbdef5);background:var(--garam-c-bbdef5,#bbdef5);border-radius:14px;font-size:clamp(2rem,9vw,4.5rem);font-weight:800;line-height:1;}
.ttt-grid button:enabled {cursor:pointer;}
.ttt-grid button:enabled:hover {box-shadow:inset 0 0 0 2px #087cce;}
.ttt-mark {width:1em;height:1em;object-fit:contain;vertical-align:middle;}
.ttt-grid .ttt-mark {display:block;width:62%;height:62%;margin:auto;}
.ttt-blue {color:#005eb3;}
.ttt-red {color:#b3243b;}
#tttBetForm {align-items:stretch;flex-direction:column;}
#tttAgain,#tttProposal button {padding:8px 12px;border-radius:10px;border:1px solid #bbdef5;font:inherit;}
#tttAgain,#tttAccept {background:#086fb9;color:white;cursor:pointer;}
#tttProposal {position:fixed;inset:0;width:min(90%,390px);box-sizing:border-box;padding:28px;border:1px solid #bbdef5;border-radius:22px;background:#f0f9ff;color:#123c5c;}
#tttProposal::backdrop {background:#071e3299;}
#tttClose {position:absolute;right:8px;top:8px;cursor:pointer;}
.connect-four .ttt-grid {grid-template-columns:repeat(7,minmax(0,1fr));width:min(100%,520px);box-sizing:border-box;padding:clamp(5px,1.4vw,12px);gap:clamp(3px,1vw,8px);border-radius:16px;background:var(--garam-theme-ui-accent,#087cce);}
.connect-four .ttt-grid button {display:grid;place-items:center;border-radius:50%;padding:0;background:var(--garam-c-f0f9ff,#f0f9ff);}
.connect-four-piece {box-sizing:border-box;border:3px solid var(--piece-color);border-radius:50%;object-fit:cover;background:#fff;}
.connect-four-yellow {--piece-color:#f3c520;}
.connect-four-red {--piece-color:#e3394d;}
.connect-four .ttt-grid .connect-four-piece {width:92%;height:92%;border-width:clamp(2px,.55vw,5px);}
.connect-four #tttPlayers .connect-four-piece {width:26px;height:26px;}
.connect-four .ttt-grid {position:relative;}
.connect-four .connect-four-drop {position:absolute;inset:0;z-index:1;pointer-events:none;}
.connect-four .ttt-grid .connect-four-drop .connect-four-piece {position:absolute;margin:0;}