.state-lobby-panel #lobbyControls {
  position:fixed; inset:12px; left:12px; top:12px; transform:none; zoom:1; margin:auto; z-index:80; box-sizing:border-box;
  width: calc(100vw - 24px); max-width: 1400px; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px);
  padding: var(--prep-gap,16px); gap: var(--prep-gap,16px); color: var(--prep-text,#fff1d3);
  background: var(--prep-background,#18232b); border-color: var(--prep-border,#82958a); font-size: var(--prep-fontSize,16px);
}
.state-lobby-panel #gameScreen:has(#menuOverlay:not([hidden])) #lobbyControls { visibility:hidden; pointer-events:none; }
#prepHeader { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#prepHeader h2,#prepHeader p { margin:0; } #prepHeader>div { text-align:right; }
#prepStatus { font-size:1em; }
#prepClock { font-size:1.6em; color:var(--prep-accent,#6ad9cc); font-variant-numeric:tabular-nums; }
#prepBody { min-height:0; display:grid; position:relative; grid-template-columns:minmax(100px,160px) minmax(0,1fr); gap:var(--prep-gap,16px); flex:1; }
#prepBody section,#prepSelected { background:var(--prep-panel,#293941); padding:12px; min-width:0; }
#prepBody h3 { margin:0 0 10px; font-size:1em; }
#prepCatalog { position:absolute; top:0; left:0; z-index:2; width:min(var(--prep-sidebarWidth,240px),100%); max-height:100%; border:2px solid var(--prep-border); box-shadow:0 8px 24px #0008; overflow:auto; display:flex; flex-direction:column; gap:var(--prep-gap,16px); }
.prep-options,.prep-roster { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
#lobbyControls .prep-options button { flex:0 1 calc(50% - 4px); display:flex; flex-direction:column; align-items:center; gap:5px; border:2px solid var(--prep-border); background:var(--prep-panel); color:var(--prep-text); }
#lobbyControls button[aria-pressed=true] { border-color:var(--prep-accent); outline:2px solid var(--prep-accent); }
#lobbyControls canvas { width:var(--prep-cardSize,88px); height:var(--prep-cardSize,88px); max-width:100%; object-fit:contain; image-rendering:pixelated; }
.prep-player { display:flex; flex-direction:column; align-items:center; width:var(--prep-cardSize,88px); min-height:110px; border:2px solid var(--prep-border); padding:6px; text-align:center; overflow-wrap:anywhere; }
.prep-options small { overflow-wrap:normal; }
.prep-player > b,.prep-player > small { display:block; width:100%; min-width:0; max-width:100%; text-align:center; writing-mode:horizontal-tb; overflow-wrap:anywhere; }
.prep-player > canvas { flex-shrink:0; }
.prep-player small { font-size:.85em; }
.prep-player.unknown { justify-content:center; font-size:2em; }
#prepSelected { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; overflow:auto; }
#prepEnemiesTitle { margin-top:24px!important; }
#prepTeams { overflow:auto; display:flex; flex-direction:column; justify-content:safe center; align-items:center; text-align:center; }
.prep-roster { justify-content:center; width:100%; }
#prepSelected button { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; color:inherit; overflow-wrap:anywhere; }
#prepCatalog[hidden],#prepCatalog section[hidden] { display:none!important; }
#prepActions { display:flex; flex-wrap:wrap; gap:8px; }
.state-lobby-panel #eventNoticeSidebar,.state-lobby-panel #dockRetractToggle { display:none!important; }
#prepSocial { display:flex; flex-wrap:wrap; gap:8px; }
#prepInviteList { width:100%; display:flex; flex-wrap:wrap; gap:8px; }
#prepInviteList:empty { display:none; }
#prepError { margin:0; color:var(--prep-accent); }
#lobbyControls #lobbyParticipants,#lobbyControls #readyCount { display:none; }
@media(max-width:700px) { #prepBody { grid-template-columns:1fr; min-height:auto; } #prepCatalog { overflow:visible; } #prepCatalog { flex-direction:column; } #prepCatalog>section { flex:1; } #prepSelected { flex-direction:row; } #prepSelected button { flex:1; min-width:0; } #prepHeader { align-items:flex-start; } #prepHeader h2 { font-size:1.2em; } }
@media(max-height:500px) and (min-width:701px) { #prepBody { flex:none; min-height:360px; height:360px; } }
