.online-dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #c8d5de;border-radius:12px;background:#f7f9fb;color:#263e50;box-shadow:0 20px 70px #152c4a45}.online-dialog::backdrop{background:#102b4699}.online-shell{padding:22px}.online-shell>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.online-shell h2{font-size:23px;margin:3px 0}.online-intro{font-size:13px;color:#627888;line-height:1.7}.online-shell label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;min-width:0}.online-shell input,.online-shell select{width:100%;box-sizing:border-box;min-height:39px;padding:8px 10px;border:1px solid #c8d5de;border-radius:5px;background:white;color:#263e50;font:inherit;font-size:13px}.online-player-fields{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;margin:18px 0}.online-create,.online-join{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:14px;border-radius:8px;background:#eaf0f5}.online-create button,.online-join button{min-height:39px}.online-list-heading{display:flex;justify-content:space-between;align-items:center;margin:15px 0 8px}.online-list-heading h3{font-size:14px;margin:0}.online-rooms{max-height:220px;overflow:auto;margin-bottom:14px}.online-room-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid #dae3ea}.online-room-row strong{font-size:14px;overflow-wrap:anywhere}.online-room-row small{display:block;font-size:11px;margin-top:5px;color:#637e91}.online-empty{font-size:13px;color:#6d8190;padding:12px;line-height:1.7}.online-note{font-size:11px;color:#6d8190;line-height:1.8;margin:14px 0 0}.online-error{font-size:13px;padding:10px;border:1px solid #e3a9a2;border-radius:6px;background:#fff0ee;color:#9d382b;line-height:1.6}.online-signin{display:block;padding:10px;margin-bottom:12px;border-radius:6px;background:#234b69;color:white;text-align:center}.online-room-card{padding:20px;border:1px solid #c8d5de;background:white;border-radius:10px;margin:20px 0}.online-room-card>span{display:block;font-size:14px}.online-room-card>strong{display:block;font-size:24px;letter-spacing:.15em;margin:10px 0}.online-room-card>p{font-size:13px;margin:0}.online-room-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.online-notice{font-size:11px;line-height:1.5;padding:3px 8px;color:#2b627e;background:#e4f1f8;border-radius:4px;flex-shrink:0}.compact-play .online-notice{order:1}.online-button{white-space:nowrap}@media(max-width:600px){.online-shell{padding:14px}.online-player-fields{grid-template-columns:1fr;gap:10px}.online-create,.online-join{padding:10px}.online-create button,.online-join button{font-size:12px;padding:7px 9px}.topbar #online-button{font-size:10px;padding:6px}.online-room-card>strong{font-size:20px}.online-intro{font-size:12px}.online-notice{font-size:10px}}

.online-random{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid #b7d4e6;border-radius:9px;background:#e5f1fa;margin-bottom:14px}.online-random h3{font-size:16px;margin:0 0 5px}.online-random p{font-size:12px;line-height:1.7;color:#55758c;margin:0}.online-random button{flex-shrink:0;min-height:40px}.is-searching .online-room-card{padding:30px 20px;text-align:center}.is-searching #online-room-title{font-size:19px;font-weight:700;margin-bottom:16px}.is-searching #online-room-status::before{content:"";display:block;width:24px;height:24px;margin:0 auto 16px;border:3px solid #c0d9e9;border-top-color:#3a7ba5;border-radius:50%;animation:online-search-spin 1s linear infinite}@keyframes online-search-spin{to{transform:rotate(360deg)}}@media(max-width:600px){.online-random{flex-direction:column;align-items:stretch;padding:13px;gap:10px}.online-random button{width:100%}}@media(prefers-reduced-motion:reduce){.is-searching #online-room-status::before{animation:none}}