.connect4-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:100%;gap:4px;padding:4px;box-sizing:border-box}.symbol.red strong{color:#ef4444}.symbol.yellow strong{color:#f59e0b}.board-container{position:relative;padding:4px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:10px;box-shadow:0 4px 16px rgba(37,99,235,.25);flex-shrink:1;min-height:0}.column-zones{position:absolute;top:0;left:4px;right:4px;display:flex;height:100%;z-index:10}.zone{flex:1;background:transparent;border:none;cursor:pointer}.zone:disabled{cursor:not-allowed}.zone.hovered{background:rgba(255,255,255,.1)}.board,.row{gap:2px}.cell{width:28px;height:28px}.hole{width:23px;height:23px;background:var(--background);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}.hole,.piece{border-radius:50%}.piece{width:18px;height:18px;animation:drop .25s ease-out}.piece.red{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 6px rgba(239,68,68,.4)}.piece.yellow{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 2px 6px rgba(251,191,36,.4)}@keyframes drop{0%{transform:translateY(-40px);opacity:0}60%{transform:translateY(3px)}80%{transform:translateY(-2px)}to{transform:translateY(0);opacity:1}}.tictactoe-wrapper{flex-direction:column;justify-content:center;height:100%;width:100%}.game-header,.tictactoe-wrapper{display:flex;align-items:center;gap:8px}.game-header{padding:6px 14px;border-radius:8px;background:var(--background-alt);border:1px solid var(--border);font-size:13px}.game-header.my-turn{border-color:var(--flash-green)}.status{font-weight:600;color:var(--text)}.divider{opacity:.5}.divider,.symbol{color:var(--text-muted)}.symbol{font-size:12px}.symbol strong{color:var(--flash-cyan)}.board{flex-direction:column;padding:10px;background:var(--background-alt);border-radius:10px;border:1px solid var(--border)}.board,.row{display:flex;gap:4px}.cell{width:clamp(40px,12vh,70px);height:clamp(40px,12vh,70px);border-radius:8px;border:2px solid var(--border);background:var(--background);display:flex;align-items:center;justify-content:center;cursor:default;transition:all .15s ease}.cell.clickable{cursor:pointer}.cell.clickable:hover{border-color:var(--flash-cyan);transform:scale(1.02)}.cell .symbol{font-size:clamp(22px,8vh,38px);font-weight:700;animation:pop .15s ease-out}.cell .symbol.o,.cell .symbol.x{color:var(--flash-blue)}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.1)}to{transform:scale(1)}}