#friends-room { display: none; position: fixed; z-index: 6; left: calc(22px + env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom)); min-height: 44px; padding: 10px 16px; background: var(--fe-panel); color: var(--fe-ink); border: 1px solid var(--fe-accent); font: 600 16px var(--fe-font); cursor: pointer; }
body.in-game.paused #friends-room { display: block; }
#room-panel { box-sizing: border-box; width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: var(--fe-ink); background: #071822; border: 1px solid var(--fe-line); font: 16px/1.5 var(--fe-font); overflow: auto; scrollbar-color: #7f9fb3 #071822; }
#room-panel::backdrop { background: rgb(0 0 0 / 75%); }
#room-panel h1 { margin: 0 72px 12px 0; font-size: 28px; line-height: 1.15; }
#room-panel h2 { margin: 24px 0 8px; font-size: 20px; }
#room-panel p { max-width: 65ch; margin: 12px 0; }
#room-panel button, #room-panel input, #room-text { box-sizing: border-box; min-height: 44px; padding: 10px 12px; font: inherit; border: 1px solid #769bb0; color: #f2f8fc; background: #123b51; }
#room-panel input { width: 100%; background: #031018; caret-color: var(--fe-accent); }
#room-panel input::placeholder { color: #a6c0d0; }
#room-panel input::selection { background: #096da8; }
#room-panel button { cursor: pointer; }
#room-panel button:hover { background: #096da8; }
#room-panel button:disabled { opacity: .55; cursor: wait; }
#room-panel :focus-visible, #friends-room:focus-visible { outline: 2px solid #3fc1ff; outline-offset: 3px; }
#room-panel label { display: block; margin: 18px 0 6px; }
#room-panel .room-close { float: right; margin: -10px -10px 8px 12px; }
#room-status { color: #bce7ff; min-height: 24px; }
.room-join-row, .room-actions { display: flex; gap: 10px; }
.room-join-row input { min-width: 0; flex: 1; }
.room-join-row button { flex: 0 0 auto; }
.room-actions { margin-top: 12px; flex-wrap: wrap; }
#room-leave { margin-top: 12px; }
@media (max-width: 600px) { #room-panel { padding: 18px; } #room-panel h1 { font-size: 24px; } .room-join-row { flex-wrap: wrap; } .room-join-row input { flex-basis: 100%; } }
@media (max-height: 480px) { #friends-room { left: calc(50% - 170px); bottom: calc(70px + env(safe-area-inset-bottom)); } #room-panel { max-height: calc(100dvh - 16px); } }
#room-joining {position:fixed;inset:0;z-index:10000;background:#071322;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;color:white;text-align:center;font:20px Futura,system-ui,sans-serif}
#room-joining[hidden],#room-joining button[hidden]{display:none}
#room-joining button{min-height:44px;padding:10px 24px;font:inherit;color:white;background:#164966;border:1px solid #65c4ed;border-radius:6px}

#room-text { display: inline-flex; align-items: center; text-decoration: none; background: #096da8; font-weight: 600; }
#room-text:hover { background: #075b8d; }

#voice-quick { position: fixed; z-index: 8; top: calc(4px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); min-height: 44px; padding: 8px 12px; font: 600 14px var(--fe-font); color: #f2f8fc; background: #123b51; border: 1px solid #769bb0; }
#voice-quick[hidden] { display: none; }
#voice-quick[aria-pressed="true"] { background: #096da8; }
#voice-quick:focus-visible { outline: 2px solid #3fc1ff; outline-offset: 3px; }

body:not(.in-game) #voice-quick { display: none; }