.online-panel{padding:20px;margin:20px 0;border:1px solid #42484b;border-radius:12px;background:var(--panel,#24292b)}.online-fields{display:flex;gap:16px;flex-wrap:wrap}.online-fields label{display:grid;gap:7px;flex:1;min-width:180px}input{font:inherit;padding:12px;background:transparent;border:1px solid #747a7d;border-radius:6px;color:inherit;min-width:0}.online-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.online-room{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:14px 0;border-bottom:1px solid #6665}.online-room small{display:block}.online-table{overflow:auto}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:10px;border-bottom:1px solid #6665}.online-grid{display:grid;gap:3px;width:min(100%,520px);margin:18px auto;aspect-ratio:1;padding:8px;background:#363d42;border-radius:10px;box-sizing:border-box}.online-cell{min-width:0;padding:0!important;aspect-ratio:1;border:0;border-radius:4px;display:grid;place-items:center;font:bold clamp(16px,6vw,46px) Arial;cursor:pointer;background:#dcc08a;color:#191b1d}.online-cell:disabled{opacity:1;cursor:default}.online-cell.dark{background:#61473c}.online-cell.selected{outline:3px solid #f1bb44;outline-offset:-3px}.online-cell.legal{outline:3px solid #76d498;outline-offset:-3px}.online-piece{width:72%;aspect-ratio:1;border-radius:50%;box-sizing:border-box;box-shadow:inset 0 3px 3px #fff6,inset 0 -4px 4px #0008,0 2px 3px #0007;border:2px solid #fff6;background:radial-gradient(circle at 35% 30%,#fc9481,#bd3e35 70%);display:grid;place-items:center;color:#f9db76;font-size:clamp(13px,3vw,25px)}.online-piece.black{background:radial-gradient(circle at 35% 30%,#7c8c95,#202930 70%)}.online-piece.yellow{background:#efc442}.online-cell.sea{background:#244153;color:#fff;font-size:16px}.online-cell.ship{background:#738c94}.online-cell.hit{background:#c35942}.online-cell.sunk{background:#902f40}.online-cell.miss{background:#263942;color:#a3cee2}.online-fleets{display:grid;grid-template-columns:1fr 1fr;gap:15px}.online-grid.connect{aspect-ratio:7/6;background:#1f4c83}.online-grid.connect .online-cell{background:#15273e;border-radius:50%}[hidden]{display:none!important}html[data-theme=light] .online-panel{background:#fff;color:#232a2d}html[data-theme=light] .online-panel p{color:#4b555b}@media(max-width:650px){.online-fleets{grid-template-columns:1fr}.online-panel{padding:12px}.online-fields{flex-direction:column}}
.online-panel{ }
.online-panel h2{margin:0 0 18px;line-height:1.2}
.online-panel>button{margin-top:0}
#refresh{margin-bottom:12px}
#room.online-panel{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}#room .room-game{order:1;min-width:0}#room .room-side{order:2;min-width:0;position:sticky;top:16px}#room .room-side>#room-name{display:block;margin:0 0 10px}#room .room-side>#players{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px}#room .room-side>#shares{margin-top:14px}#room .room-side>#leave{margin-top:4px}@media(max-width:800px){#room.online-panel{display:flex;flex-direction:column}#room .room-game{order:1;width:100%}#room .room-side{order:2;position:static;width:100%}}

[data-game="tictactoe"] .online-grid{padding:12px;background:#0f141b;border:8px solid #3d434c;border-radius:16px;box-shadow:inset 0 4px 15px #0009,0 15px 25px #0008;gap:2px}[data-game="tictactoe"] .online-cell{border:1px solid #515b69;border-radius:10px;background:linear-gradient(145deg,#2f3945,#1a2029);text-shadow:0 3px 0 #0008,0 0 18px currentColor}[data-game="tictactoe"] .online-cell{color:#61cdf5}[data-game="connect-four"] .online-grid{padding:12px;background:#0f141b;border:8px solid #3d434c;border-radius:16px;gap:2px}[data-game="connect-four"] .online-cell{background:#172431;border:1px solid #536170;border-radius:50%}[data-game="checkers"] .online-grid{padding:7px;background:#10151b;border:9px solid #3d434c;border-radius:14px;gap:2px}[data-game="checkers"] .online-cell{border-radius:4px;background:#d8b476;box-shadow:inset 0 1px 2px #fff3}[data-game="checkers"] .online-cell.dark{background:#553d35}[data-game="battleship"] .online-grid{padding:7px;background:#10151b;border:8px solid #3d434c;border-radius:14px;gap:2px}[data-game="battleship"] .online-cell{border:1px solid #536170;border-radius:3px;background:linear-gradient(145deg,#294b62,#172a39);box-shadow:inset 0 1px 2px #fff2;color:#e8eff3}[data-game="battleship"] .online-cell.ship{background:linear-gradient(145deg,#63747c,#34444d)}


[data-game="tictactoe"] .online-grid{padding:12px;background:#0f141b;border:8px solid #3d434c;border-radius:16px;box-shadow:inset 0 4px 15px #0009,0 15px 25px #0008;gap:2px}[data-game="tictactoe"] .online-cell{border:1px solid #515b69;border-radius:10px;background:linear-gradient(145deg,#2f3945,#1a2029);text-shadow:0 3px 0 #0008,0 0 18px currentColor}[data-game="tictactoe"] .online-cell{color:#61cdf5}[data-game="connect-four"] .online-grid{padding:12px;background:#0f141b;border:8px solid #3d434c;border-radius:16px;gap:2px}[data-game="connect-four"] .online-cell{background:#172431;border:1px solid #536170;border-radius:50%}[data-game="checkers"] .online-grid{padding:7px;background:#10151b;border:9px solid #3d434c;border-radius:14px;gap:2px}[data-game="checkers"] .online-cell{border-radius:4px;background:#d8b476;box-shadow:inset 0 1px 2px #fff3}[data-game="checkers"] .online-cell.dark{background:#553d35}[data-game="battleship"] .online-grid{padding:7px;background:#10151b;border:8px solid #3d434c;border-radius:14px;gap:2px}[data-game="battleship"] .online-cell{border:1px solid #536170;border-radius:3px;background:linear-gradient(145deg,#294b62,#172a39);box-shadow:inset 0 1px 2px #fff2;color:#e8eff3}[data-game="battleship"] .online-cell.ship{background:linear-gradient(145deg,#63747c,#34444d)}