.online-link{text-align:center;text-decoration:none}
#accountBar{display:flex;align-items:center;gap:8px;max-width:300px}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#304637;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#accountName{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#onlineLobby{position:fixed;inset:0;z-index:10;overflow:auto;padding:88px 20px 35px;background:radial-gradient(ellipse at top,#203a31,#0d1418 65%)}
.online-container{max-width:1060px;margin:auto}
.online-title{color:#ffd76a;font-size:32px;margin-bottom:12px}.online-intro{color:var(--dim);line-height:1.8;margin-bottom:24px}
.online-grid{display:grid;grid-template-columns:340px 1fr;gap:22px}.online-panel{border:1px solid #355046;border-radius:18px;padding:22px;background:#14231f;min-width:0}
.online-panel h2{font-size:19px;margin-bottom:18px}.online-panel label{display:block;color:#b0c2ba;margin:15px 0 7px;font-size:14px}
.online-panel input,.online-panel select,#roomLevel{width:100%;padding:11px;background:#0d1916;border:1px solid #3a574b;border-radius:8px;color:#edf0dc;font:inherit}
.online-panel button{margin-top:12px}.online-panel .sbtn{width:100%}.room-card{border:1px solid #365248;padding:16px;border-radius:12px;margin:12px 0;background:#1a3028}
.room-card h3{font-size:17px;color:#ffd76a}.room-card p{line-height:1.8;color:#b0c2ba;font-size:14px;overflow-wrap:anywhere}.room-card button{width:auto!important}
#onlineStatus,#onlineError{margin:12px 0;color:#ffd76a;min-height:22px}#onlineError{color:#ffac8c}
#roomPanel{position:fixed;top:65px;left:14px;z-index:800;background:#14231ff5;border:1px solid #49654f;border-radius:12px;width:min(365px,calc(100vw - 28px));padding:12px;max-height:calc(100vh - 90px);overflow:auto;font-size:13px}
#roomSummary{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px}#roomSummaryText{overflow:hidden;text-overflow:ellipsis;flex:1}#roomSummary button{border:0;background:#2a493c;color:#fff;border-radius:6px;padding:5px 7px}
#roomPanel.collapsed{width:auto;max-width:calc(100vw - 28px)}#roomPanel.collapsed #roomDetails{display:none}
.member{display:flex;align-items:center;gap:8px;margin:10px 0;flex-wrap:wrap}.member .member-name{overflow-wrap:anywhere;max-width:180px}.member button{font-size:12px;padding:5px;background:#294a39;border:1px solid #62835f;border-radius:6px;color:#edf0dc}
.room-actions{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.room-actions .sbtn{padding:6px 10px;font-size:12px}
#roleHint{color:#ffd76a;line-height:1.8;margin:10px 0}#roomNotice{color:#90c9bb;line-height:1.8}#roomControls{display:flex;gap:8px}#roomControls select{width:120px;padding:6px}#roomControls button{font-size:12px}
#onlineTouch{position:fixed;bottom:12px;left:0;right:0;display:flex;justify-content:space-between;padding:0 18px;z-index:850;pointer-events:none}#onlineTouch div{display:flex;gap:8px}#onlineTouch button{pointer-events:auto;touch-action:none;border:1px solid #608872;background:#18352dcf;color:#fff;border-radius:12px;padding:15px;font-size:20px}
body.in-room #gameWrap{width:min(896px,94vw)}body.in-room #game{padding-top:115px;padding-bottom:72px}body.in-room #hud{flex-wrap:wrap}body.in-room #hudRetry,body.in-room #hudPause{display:none}
@media(max-width:700px){#topBar{right:8px;top:8px;gap:5px;max-width:calc(100vw - 16px)}#topBar .tbtn{font-size:11px;padding:6px 8px}#homeBtn{display:none}#accountName{max-width:75px}.online-grid{grid-template-columns:1fr}#onlineLobby{padding:76px 12px 24px}.online-title{font-size:26px}#roomPanel{top:52px}body.in-room #game{padding-top:105px}#roomPanel:not(.collapsed){max-height:50vh}body.in-room #hud .lv-name{max-width:100%;font-size:11px}body.in-room #hud{padding:6px;gap:7px}.menu-btns{margin-top:25px;gap:12px}.menu-tip{margin-top:20px}}
[hidden]{display:none!important}
.level-preview{margin:12px 0;border:1px solid #355046;border-radius:10px;overflow:hidden;background:#0d1916}
.level-preview canvas{display:block;width:100%;height:auto;aspect-ratio:7/4}.level-preview p{margin:8px 10px;color:#b0c2ba;font-size:12px;line-height:1.6}
#levelPreviewModal .modal{width:min(820px,94vw);max-height:90vh;overflow:auto}#roomPreview p{font-size:11px}
#roomPanel{max-height:calc(100vh - 160px)}
@media(max-width:700px){#roomPanel{max-height:calc(100vh - 160px)}#roomPanel:not(.collapsed){max-height:50vh}}