.friend-button { flex:0 0 40px; align-self:center; border:1px solid var(--control-border); border-radius:10px; background:var(--accent-soft); color:var(--btn); padding:6px 3px; cursor:pointer; display:grid; gap:1px; font:inherit; font-size:18px; font-weight:600; }
.friend-button small { font:700 9px system-ui; letter-spacing:1px; }
.friend-button:focus-visible, .mp-lobby button:focus-visible, .mp-match button:focus-visible { outline:2px solid var(--btn); outline-offset:3px; }
.mp-lobby { width:100%; max-width:380px; padding:0 20px 24px; margin:auto; color:var(--text); }
.mp-eyebrow { color:var(--btn); font-size:10px; font-weight:750; letter-spacing:2px; margin:0 0 18px; }
.mp-lobby h2 { font-size:32px; line-height:1.06; letter-spacing:-1.2px; max-width:280px; margin-bottom:12px; }
.mp-intro { color:var(--hint); font-size:14px; line-height:1.6; margin-bottom:28px; }
.mp-seats { display:grid; gap:8px; margin-bottom:28px; }
.mp-seat { display:flex; align-items:center; gap:14px; border:1px dashed var(--control-border); border-radius:14px; padding:16px; min-height:80px; }
.mp-seat.occupied { background:var(--accent-soft); border:1px solid var(--control-border); }
.mp-slot { font-size:28px; color:var(--btn); font-weight:300; width:24px; }
.mp-seat strong { font-size:14px; display:block; max-width:200px; overflow-wrap:anywhere; }
.mp-seat small { display:block; font-size:11px; color:var(--hint); margin-top:5px; }
.mp-presence { width:7px; height:7px; border-radius:50%; background:var(--control-border); margin-left:auto; flex-shrink:0; }
.mp-presence.online { background:var(--btn); box-shadow:0 0 0 4px var(--focus-ring); }
.mp-label { font-size:9px; letter-spacing:1.5px; color:var(--hint); font-weight:700; display:block; margin-bottom:8px; }
#mp-invite { width:100%; min-height:44px; border:1px solid var(--control-border); border-radius:8px; background:var(--card); color:var(--text); padding:10px; font-size:11px; }
.mp-share { display:flex; gap:8px; margin:8px 0 20px; }
.mp-share button { flex:1; background:var(--bg); color:var(--text); border:1px solid var(--control-border); border-radius:8px; padding:11px 5px; font-size:11px; cursor:pointer; }
.mp-primary { width:100%; border:0; border-radius:11px; background:var(--btn); color:var(--btn-text); min-height:50px; font-weight:750; font-size:15px; cursor:pointer; }
.mp-primary:disabled, .mp-share button:disabled { opacity:.45; cursor:default; }
#game-container.mp-lobby-view { height:100%; overflow-y:auto; padding-bottom:24px; }
.mp-skins { border:0; padding:0; margin:0 0 16px; min-width:0; }
.mp-skins:disabled { opacity:.6; }
.mp-connection { text-align:center; color:var(--hint); font-size:10px; margin:12px 0 24px; }
.mp-error { color:var(--danger); font-size:12px; line-height:1.5; min-height:18px; margin:12px 0; overflow-wrap:anywhere; }
.mp-match { padding:0 4px; }
.mp-opponent { color:var(--hint); font-size:12px; margin-bottom:16px; overflow-wrap:anywhere; }
.mp-match .ttt-status { min-height:44px; font-size:17px; }
.mp-match .ttt-cell { font-size:42px; }
.mp-clock { color:var(--hint); font:600 10px ui-monospace,monospace; letter-spacing:1px; min-height:16px; }
@media (prefers-reduced-motion: reduce) { .mp-match .ttt-cell { animation:none; transition:none; } }