.online-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:#e9efdf;border:1px solid #d5dfc9;border-radius:11px;margin-bottom:23px;font-size:11px;text-align:left}.online-bar>div{display:flex;align-items:center;gap:8px}.online-bar b{font-size:12px;margin-left:10px;letter-spacing:.06em}.online-bar .text-button{font-size:10px;padding:5px}.online-dot{width:7px;height:7px;background:#d49f74;border-radius:50%;display:inline-block;flex-shrink:0}.online-dot.on{background:#72a470}.online-lobby{max-width:760px;margin:auto;padding:32px 24px 55px;text-align:center}.online-lobby h1{font-size:30px;line-height:1.5;margin-top:9px}.online-lobby>p{font-size:13px;color:#8b997e;margin:12px auto 24px}.room-code{display:flex;flex-direction:column;align-items:center;border:1px dashed #b5c4a1;border-radius:15px;padding:23px;background:#f3f4e6;margin:23px 0}.room-code>small{font-size:11px;color:#98a186}.room-code>b{font:700 39px/1.6 system-ui,sans-serif;letter-spacing:.18em;margin-left:.18em;color:#417253}.room-code .secondary{font-size:12px;margin-top:9px}.online-members{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.online-member{background:#fffef6;border:1px solid #e4e7d6;border-radius:12px;display:flex;align-items:center;gap:9px;padding:13px 12px}.online-member>.cat-art{width:44px;height:44px;flex-shrink:0}.online-member>div{display:flex;flex-direction:column;overflow-wrap:anywhere}.online-member b{font-size:12px}.online-member small{font-size:10px;color:#9aa48a;margin-top:3px}.online-member>span{font-size:10px;white-space:nowrap;margin-left:auto;color:#a99a7a}.online-member>span.submitted{color:#639558}.lobby-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--line);padding-top:24px;margin:25px 0}.lobby-bottom>span{font-size:12px;color:#8e9e7a}.lobby-bottom>b{font-size:13px;font-weight:500;color:#93a17a}.lobby-bottom .primary{font-size:13px}.online-lobby>p.tiny{font-size:11px;max-width:550px;line-height:1.9}.online-waiting{padding:27px;background:#f1f4e7;border:1px solid #dbe5cf;border-radius:16px;text-align:center;margin-top:24px}.waiting-flag{background:#dce8cf;border-radius:50%;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 17px;color:#719562}.waiting-flag .icon{width:27px;height:27px}.online-waiting h2{font-size:21px}.online-waiting>p{font-size:12px;color:#8b9b7b;margin:10px 0 20px}.locked-ships{display:flex;align-items:center;justify-content:center;gap:18px;margin:25px 0}.locked-ships>div{display:flex;flex-direction:column;align-items:center;background:#fffdf2;border:1px solid #e1e5d0;padding:12px 20px;border-radius:12px}.locked-ships .boat-art{width:120px;height:80px}.locked-ships b{font-size:12px}.locked-ships small{font-size:10px;color:#9ca588}.locked-ships>span{font-size:13px;color:#9da687}.online-ack{font-size:12px;color:#7f9671;margin-top:20px;padding:11px;background:#ecf1e2;border-radius:9px;text-align:center}.return-room{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.return-room small{display:block;text-align:center;color:#9fa98e;font-size:10px;margin-top:8px}.online-forms form{display:flex;flex-direction:column;gap:12px}.online-forms h3{font-size:17px;margin-bottom:2px}.online-forms label{font-size:11px;color:#8e9b7e;display:flex;flex-direction:column;gap:7px}.online-forms input,.invite-link{padding:12px;border:1px solid #dbe1cb;border-radius:9px;background:#fffdf5;color:var(--ink);font:inherit;width:100%;min-height:42px}.online-forms input[name=code]{font-family:system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}.online-forms .setup-fields{margin:0}.online-divider{display:flex;align-items:center;gap:10px;font-size:10px;color:#a0aa8e;margin:27px 0}.online-divider:before,.online-divider:after{content:'';height:1px;background:#e2e7d5;flex:1}.online-forms+.tiny{font-size:10px;color:#99a68a;margin:20px 0 0}.online-modal{max-width:520px}.invite-link{font-size:12px}.online-waiting>p.tiny{margin:20px 0 0;font-size:10px}
@media(max-width:700px){.online-bar{padding:9px 10px;gap:8px;font-size:9px;flex-wrap:wrap}.online-bar b{font-size:10px;margin-left:3px}.online-bar .text-button{font-size:9px}.online-bar>div{gap:5px}.online-lobby{padding:24px 18px 40px}.online-lobby h1{font-size:24px}.online-lobby>p{font-size:11px}.room-code>b{font-size:35px}.online-members{grid-template-columns:1fr;gap:9px}.online-member{padding:10px 12px}.online-member b{font-size:12px}.online-member small{font-size:9px}.lobby-bottom{flex-direction:column;gap:15px}.lobby-bottom .primary{width:100%}.online-waiting{padding:22px 13px}.online-waiting h2{font-size:18px}.online-waiting>p{font-size:10px}.locked-ships{gap:8px;flex-wrap:wrap}.locked-ships>div{padding:9px 12px}.locked-ships .boat-art{width:90px;height:65px}.locked-ships b{font-size:11px}.online-ack{font-size:10px}.online-lobby>p.tiny{font-size:10px}}