.c4-status{font-size:1.25rem;font-weight:600}.c4-status[data-player=R]{color:#ef4444;text-shadow:0 0 10px #ef444466}.c4-status[data-player=Y]{color:#f5c542;text-shadow:0 0 10px #f5c54266}.c4-online-panel{border:1px solid var(--surface-border);background:#0f172a6b;border-radius:8px;gap:12px;width:min(100%,560px);padding:16px;display:grid}.c4-online-actions{grid-template-columns:auto 1fr;align-items:center;gap:12px;display:grid}.c4-join-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.c4-friend-actions{grid-template-columns:1fr;gap:8px;display:grid}.c4-invite-form,.c4-add-friend-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.c4-room-input{border:1px solid var(--surface-border);min-width:0;height:46px;color:var(--text-main);background:var(--surface-soft);text-transform:uppercase;border-radius:8px;padding:0 12px}.c4-room-input:focus{border-color:var(--accent-color);outline:0}.c4-room-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;display:grid}.c4-room-summary div{background:#ffffff0f;border-radius:6px;gap:2px;padding:10px 12px;display:grid}.c4-room-summary dt{color:var(--text-muted);text-transform:uppercase;font-size:.8rem;font-weight:700}.c4-room-summary dd{letter-spacing:.08em;margin:0;font-size:1.2rem;font-weight:800}.c4-online-status{color:#cbd5e1;min-height:1.5em;margin:0}.c4-board{background:var(--accent-strong);border-radius:12px;grid-template-rows:repeat(6,64px);grid-template-columns:repeat(7,64px);gap:8px;width:fit-content;margin:0 auto;padding:12px;display:grid;box-shadow:inset 0 2px 6px #00000059}.c4-cell{cursor:pointer;touch-action:manipulation;background:0 0;border:0;justify-content:center;align-items:center;width:100%;height:100%;padding:6px;transition:transform .1s;display:flex}.c4-cell:focus-visible{outline:2px solid var(--text-main);outline-offset:-2px;border-radius:999px}.c4-cell:disabled{cursor:default}.c4-disc{background:var(--bg-color);border-radius:999px;width:100%;height:100%;transition:transform .12s;display:block;box-shadow:inset 0 3px 6px #0000008c}.c4-cell:hover:not(:disabled) .c4-disc{transform:scale(1.06)}.c4-cell:active:not(:disabled) .c4-disc{transform:scale(.94)}.c4-disc.red{background:radial-gradient(circle at 35% 30%,#ff6b6b,#dc2626 70%);box-shadow:inset 0 3px 6px #00000059,0 0 8px #ef444459}.c4-disc.yellow{background:radial-gradient(circle at 35% 30%,#ffe27a,#eab308 70%);box-shadow:inset 0 3px 6px #00000059,0 0 8px #f5c54259}.c4-disc.winning{animation:.9s ease-in-out infinite c4-pulse}@keyframes c4-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@media (width<=640px){.c4-status{font-size:1.1rem}.c4-online-actions,.c4-join-form,.c4-friend-actions,.c4-invite-form,.c4-add-friend-form{grid-template-columns:1fr}.c4-board{grid-template-rows:repeat(6,42px);grid-template-columns:repeat(7,42px);gap:5px;padding:8px}.c4-cell{padding:4px}}