.top-actions:has(#onlineButton){gap:4px}#onlineButton{font-size:11px;min-width:36px;padding:6px;color:#265c4a}
#onlineButton{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}#onlineButton svg{width:20px;height:20px}
#onlineDialog{width:min(540px,calc(100vw - 20px));max-height:88dvh;overflow:auto;color:#284f40;padding:16px;box-sizing:border-box}
#onlineDialog h2{font-size:20px}#onlineDialog h3{font-size:15px;margin:16px 0 8px}#onlineDialog p{font-size:12px;line-height:1.6}
.online-form{display:grid;gap:10px}.online-form label{display:grid;gap:5px;font-size:12px}.online-form input,.online-form select,#onlineDialog select{min-width:0;min-height:40px;width:100%;box-sizing:border-box;border:1px solid #b5cdbd;background:#fff;color:#284f40;border-radius:6px;padding:8px}
.online-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.online-actions button{min-height:40px;flex:1;font-size:12px}.online-primary{background:#337e5a!important;color:#fff!important}.online-muted{color:#678574}
#onlineNotice{min-height:18px;color:#99522e}#onlineNotice:empty{display:none}#onlineRoomCode{font-size:22px;letter-spacing:0;font-variant-numeric:tabular-nums}
.online-player{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #d5e1d8;font-size:12px}.online-player span{overflow-wrap:anywhere}
.online-player{align-items:center}.online-player .crew-portrait{width:44px;height:44px;flex-basis:44px}.online-player span:first-of-type{flex:1}
#onlineCharacterChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.online-character{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:12px 6px;border:2px solid transparent;border-radius:8px;background:#fff;cursor:pointer}
.online-character input{position:absolute;top:6px;left:6px;width:18px;height:18px;accent-color:#337e5a}
.online-character:has(:checked){border-color:#337e5a;background:#e5f3e7}.online-character:has(:disabled){opacity:.5;cursor:not-allowed}
.online-character strong{font-size:14px}.online-character small{font-size:11px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.online-nameplate{position:fixed;z-index:2;pointer-events:none;transform:translate(-50%,-100%);max-width:94px;padding:4px 7px;border-radius:6px;background:#193d32e8;color:white;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px #0003}
.online-nameplate[data-self=true]{background:#fbf2c9;color:#37523e}.online-nameplate[hidden]{display:none}
#onlineDialog button:disabled{opacity:.5;cursor:not-allowed}#onlineCrew{width:100%;min-height:44px}
@media(max-width:360px){#onlineCharacterChoices{grid-template-columns:repeat(2,minmax(0,1fr))}.crew-choice{gap:7px}.crew-choice .crew-portrait{width:56px;height:56px;flex-basis:56px}}
#onlineEvents{font-size:12px;line-height:1.8;padding-left:20px;max-height:110px;overflow:auto}#onlineEvents li{overflow-wrap:anywhere}
#onlineShopCanvas{width:100%;height:110px;object-fit:contain}#onlineEquipment{border-block:1px solid #c5d9ce;padding:12px 0}
#onlineHud{position:absolute;right:max(12px,env(safe-area-inset-right));top:170px;z-index:7;max-width:145px;font-size:11px;padding:8px;color:#fff;background:#204f43d9;border-radius:6px;white-space:pre-line;text-align:left;line-height:1.6;pointer-events:auto;border:0}
body[data-online=true] #releaseCatch{display:none}body[data-online=true] .top-actions .tab,body[data-online=true] #shopButton{opacity:.55}
@media(orientation:landscape) and (max-height:520px){#onlineHud{top:105px;max-width:155px}#onlineDialog{max-height:94dvh;padding:12px}#onlineShopCanvas{height:80px}}
@media(max-width:420px) and (orientation:portrait){.top-actions:has(#onlineButton){display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.top-actions:has(#onlineButton) button{min-width:0;padding:5px;font-size:10px}}