.online-panel{margin:14px 0 20px;padding:18px;border:1px solid #7be8fa44;border-radius:12px;background:#11223588}
.online-entry,.online-room-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.online-entry label,.room-service label{display:flex;align-items:center;gap:10px;font-size:13px;color:#afbed0}
.online-panel input{min-width:0;max-width:100%;padding:10px 12px;background:#080e1c;border:1px solid #60748b;border-radius:7px;color:#eff7ff;font:inherit}
#room-code-input{width:155px;text-transform:uppercase;letter-spacing:2px}
#room-code-display{font-family:monospace;font-size:25px;color:#7be8fa;letter-spacing:3px;margin-left:8px}
.online-room-heading .text-button{font-size:12px}
.room-status,.room-note{font-size:13px;color:#a9c4d8;line-height:1.7;margin:12px 0 0}.room-status.error{color:#ffae8c}
.room-players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.room-player{border:1px solid #385369;border-radius:8px;padding:12px;background:#0b1929;display:grid;gap:6px}.room-player strong{color:#e6f5ff;font-size:15px}.room-player small{color:#8da5bb}.room-player.ready{border-color:#7be8fa;color:#7be8fa}
.room-service{margin-top:12px;color:#839aaf;font-size:12px}.room-service summary{cursor:pointer}.room-service label{margin:10px 0}.room-service input{flex:1;width:260px}.room-service small{display:block;line-height:1.6}
.online-battle-status{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#a5dbe6;padding:8px 12px;margin-bottom:10px;border:1px solid #254456;border-radius:7px;background:#0b1929}.online-battle-status.reconnecting{color:#ffd49a;border-color:#826738}
.online-panel[hidden],.online-battle-status[hidden]{display:none}
@media(max-width:640px){.online-panel{padding:12px}.online-entry{gap:8px}.online-entry .secondary-button{padding:10px 12px}.online-entry label{flex:1}#room-code-input{width:100%;max-width:170px}.room-service label{flex-wrap:wrap}.room-players{gap:7px}.room-player{padding:9px}.online-room-heading{gap:7px}}