[hidden]{display:none!important}
.social-panel{position:fixed;z-index:25;background:rgba(14,19,30,.92);border:1px solid #66718466;border-radius:14px;color:#e2e8f0;box-shadow:0 12px 40px #0007;backdrop-filter:blur(14px);overflow:hidden;font:12px Roboto,system-ui,sans-serif}
.chat-panel{left:12px;bottom:12px;width:min(320px,calc(100vw - 24px))}
.players-panel{right:12px;top:var(--social-top,128px);width:260px;max-height:calc(100vh - var(--social-top,128px) - 24px);overflow:auto}
body.network-online header{left:max(12px,calc((100vw - 1576px)/2));transform:none;width:min(1280px,calc(100vw - 296px));max-width:none}
body.network-online .players-panel{right:max(12px,calc((100vw - 1576px)/2));top:12px;max-height:calc(100vh - 24px)}
.social-title{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #66718444;color:#efd397;font-weight:700;position:sticky;top:0;background:#121825}
.collapse-button{border:1px solid #71809666;border-radius:6px;background:#242e40;color:#efd397;width:27px;height:24px;cursor:pointer;font-size:17px;line-height:20px}
#chat-messages{height:180px;overflow:auto;padding:10px;user-select:text;overflow-wrap:anywhere}
.chat-message{margin-bottom:10px;line-height:1.4}.chat-meta{font-size:10px;color:#d7b96f;margin-bottom:2px}.chat-time{color:#8190a7;margin-left:6px}.chat-own{color:#a6c7eb}
#chat-form{display:flex;padding:8px;gap:6px;border-top:1px solid #66718444}
#chat-input,#lan-address{min-width:0;flex:1;border:1px solid #66718466;border-radius:7px;background:#0b101b;color:#e2e8f0;padding:8px;user-select:text}
#chat-send,#btn-lan-host,.social-action{background:#66501d;border:1px solid #b38c3f77;color:#ffe6ad;border-radius:7px;padding:6px 9px;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
.social-muted{padding:8px 10px;color:#98a5bc;font-size:11px}.social-error{color:#fda4af;padding:0 10px 6px;font-size:11px}
#players-body{padding-bottom:6px}.player-row,.invite-row{padding:9px 10px;border-bottom:1px solid #66718433;overflow-wrap:anywhere}.player-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-state{color:#96a4bb;font-size:10px;margin-top:3px}.online-dot{color:#69d4a7}.invite-actions{display:flex;gap:6px;margin-top:7px}.social-action.secondary{background:#263147;color:#d3dcea}.participant-row{font-size:11px;padding:5px 10px;color:#b4c1d5}
#lan-options{display:flex;flex-wrap:wrap;gap:6px;align-items:center}#lan-addresses{font-size:10px;color:#9bd3bf;max-width:260px;overflow-wrap:anywhere}
@media(max-width:1100px){.players-panel{width:220px}.chat-panel{width:280px}#chat-messages{height:145px}}
/* Stable nickname columns and centered vector controls. */
.collapse-button{display:inline-grid;place-items:center;padding:0;width:28px;height:28px;flex:0 0 28px;line-height:1}
.collapse-button svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.collapse-button[data-collapsed="true"] svg{transform:rotate(180deg)}
.panel-actions{display:flex;align-items:center;gap:6px}
#marble-pill,#obsidian-pill{width:148px;min-width:0;flex-shrink:0}
#label-team-1,#label-team-2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
#marble-pill>span:not([id^="label"]),#obsidian-pill>span:not([id^="label"]){flex-shrink:0}
#turn-label{display:block;width:174px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lan-bar{display:grid;grid-template-columns:180px 225px minmax(0,1fr);justify-content:stretch;box-sizing:border-box}
#lan-bar.hidden{display:none}
#input-nickname{width:145px;flex:0 0 145px;min-width:0}
#network-players{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
#lan-options{grid-column:1/-1;grid-row:2}
#lan-bar>div:not(#lan-options){grid-column:1/-1}
#room-controls{width:100%;min-width:0}
#btn-disconnect{margin-left:auto;flex-shrink:0}
#lan-status-text{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.participant-row{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){#lan-bar{grid-template-columns:1fr 1fr}#network-players{grid-column:1/-1;text-align:left}#turn-label{width:135px}#marble-pill,#obsidian-pill{width:110px}}
/* Explicit tracks prevent intrinsic text widths and flex justification from moving labels. */
#scoreboard{display:grid;grid-template-columns:148px 174px 148px;width:518px;min-width:518px;gap:10px;justify-content:initial}
#scoreboard>div{min-width:0;width:100%;box-sizing:border-box}
#scoreboard #turn-label,#scoreboard #sub-status{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scoreboard #label-team-1,#scoreboard #label-team-2{text-align:left}
#score-marble,#score-obsidian{width:22px;text-align:center;padding-left:0;padding-right:0}
#lan-bar #transport-field{grid-column:1;grid-row:1;min-width:0}
#lan-bar #nickname-field{grid-column:2;grid-row:1;justify-content:flex-start;min-width:0}
#network-players{grid-column:3;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;text-align:left;width:100%}
#network-players>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){#scoreboard{width:410px;min-width:410px;grid-template-columns:120px 130px 120px;gap:8px}#network-players{grid-column:1/-1;grid-row:2}#lan-options{grid-row:3}}