/* Lobby compartilhado · CSS único pros jogos (acaba a duplicação). Tokenizado: usa as
   cores comuns (--paper/--ink/--gray/--line/--orange) + tokens de lobby com FALLBACK, pra
   cada jogo manter sua cara. O beer sobrescreve (caixa escura + dourado); o bravo usa o
   padrão (claro + laranja). Ligar com: <link rel="stylesheet" href="../_shell/lobby.css">.
   Os jogos precisam definir as fontes (Space Grotesk / Inter / JetBrains Mono). */

/* ── compartilhar sala ── */
.room { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 5px; color: var(--lobby-accent, var(--orange, #d84f1b)); }
.room-qr { display: none; width: 180px; height: 180px; margin: 4px 0 12px; background: #fff; border: 1px solid var(--line, #d8d3ca); border-radius: 4px; padding: 8px; }
.room-qr.show { display: block; }
.room-share { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1.5px solid transparent; border-radius: 4px; background: transparent; color: var(--gray, #6b6b6b); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.icon-btn:hover, .icon-btn.on { background: transparent; border-color: var(--lobby-accent, var(--orange, #d84f1b)); color: var(--lobby-accent, var(--orange, #d84f1b)); }
.icon-btn svg { width: 18px; height: 18px; }

/* ── cabeçalho + colunas (slots + config) ── */
.lobby-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.lobby-head h1 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -0.01em; color: var(--ink, #1a1a1a); margin: 0; }
.lobby-cols { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.lobby-main { flex: 1 1 280px; min-width: 0; }
#slotList { border-top: 1px solid var(--line, #d8d3ca); }
.section-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink, #1a1a1a); margin: 28px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line, #d8d3ca); }

/* ── caixa de config (variáveis) ── */
.cfg-box { flex: 0 0 250px; max-width: 100%; background: var(--lobby-cfg-bg, #2c2b27); border-radius: 4px; padding: 18px 20px; }
.cfg-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lobby-cfg-fg, #f2efe6); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--lobby-cfg-line, rgba(242, 239, 230, 0.16)); }
.cfg-cap { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--lobby-cfg-cap, rgba(242, 239, 230, 0.55)); margin: 14px 0 8px; }
.cfg-cap:first-of-type { margin-top: 0; }
.sizesel { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
/* botões do mapa (fundo claro) · texto escuro por padrão */
.sizesel button { font-family: "Space Grotesk", sans-serif; padding: 9px 16px; border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: transparent; color: var(--ink, #1a1a1a); cursor: pointer; font-size: 14px; transition: border-color 0.18s ease, color 0.18s ease; }
.sizesel button:hover:not(.active) { border-color: var(--lobby-accent, var(--orange, #d84f1b)); }
.sizesel button.active { background: var(--lobby-accent, var(--orange, #d84f1b)); border-color: var(--lobby-accent, var(--orange, #d84f1b)); color: var(--paper, #f2efe6); }
.sizesel button:disabled { opacity: 0.5; cursor: default; }
/* botões DENTRO da caixa escura · texto claro */
.cfg-box .sizesel button:not(.active) { color: var(--lobby-cfg-fg, #f2efe6); border-color: var(--lobby-cfg-line, rgba(242, 239, 230, 0.28)); }

/* ── lista de slots (jogadores / IA) ── */
.slotrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid var(--line, #d8d3ca); }
.slotrow .ctrlsel.aiprof { margin-left: auto; } /* 2º dropdown (perfil de IA) encosta à direita */
.slotrow .av { width: 32px; height: 32px; font-size: 13px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--paper, #f2efe6); flex: none; }
.slotrow .av.ai { border-radius: 4px; }
.slotrow .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slotrow .av svg { width: 64%; height: 64%; }
.slotrow .role { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink, #1a1a1a); width: 150px; }
.slotrow .role .who, .slotrow .role small { display: block; font-size: 10px; letter-spacing: 0.4px; text-transform: none; color: var(--gray, #6b6b6b); margin-top: 2px; }
.ctrlbtn { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: #fff; padding: 8px 14px; cursor: pointer; color: var(--gray, #6b6b6b); }
.ctrlbtn.you { border-color: var(--lobby-accent, var(--orange, #d84f1b)); color: var(--lobby-accent, var(--orange, #d84f1b)); }
.ctrlbtn.human { border-color: var(--ink, #1a1a1a); color: var(--ink, #1a1a1a); }
.ctrlsel { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: #fff; padding: 7px 10px; color: var(--ink, #1a1a1a); cursor: pointer; }
.ctrlsel:hover { border-color: var(--lobby-accent, var(--orange, #d84f1b)); }
.ctrlsel:focus { outline: none; border-color: var(--lobby-accent, var(--orange, #d84f1b)); }

/* ── poça de jogadores + arrastar (modo drag) ── */
.players { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.players.on { min-height: 48px; align-items: center; padding: 12px 14px; border: 1.5px dashed var(--line, #d8d3ca); border-radius: 4px; transition: border-color 0.18s ease, background 0.18s ease; } /* poça em destaque · zona de drop */
.players.on.drop { border-style: solid; border-color: var(--lobby-accent, var(--orange, #d84f1b)); background: rgba(216, 79, 27, 0.07); }
.players .p { display: flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gray, #6b6b6b); }
.p.draggable { cursor: grab; border: 1.5px solid var(--line, #d8d3ca); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--ink, #1a1a1a); touch-action: none; user-select: none; transition: border-color 0.2s ease; }
.p.draggable:hover { border-color: var(--lobby-accent, var(--orange, #d84f1b)); }
.p.draggable:active { cursor: grabbing; }
.pool-empty { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gray, #6b6b6b); }
.slotrow.draggable { cursor: grab; touch-action: none; }
.slotrow.drop { background: rgba(216, 79, 27, 0.08); outline: 1.5px solid var(--orange, #d84f1b); outline-offset: -1px; border-radius: 4px; }
.drag-ghost { position: fixed; z-index: 999; transform: translate(-50%, -50%); pointer-events: none; display: flex; align-items: center; gap: 8px; background: var(--paper, #f2efe6); border: 1.5px solid var(--orange, #d84f1b); border-radius: 6px; padding: 6px 12px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink, #1a1a1a); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }

/* ── tela de entrada · título + descrição + cards de modo (Desafio/Montar) · padrão entre os jogos ── */
.game-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -0.01em; color: var(--ink, #1a1a1a); margin: 6px 0 0; }
.lead { font-size: 16px; line-height: 1.6; max-width: 600px; color: var(--ink, #1a1a1a); }
.muted { color: var(--gray, #6b6b6b); font-size: 12.5px; line-height: 1.5; }
.modes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.modes button { display: block; flex: 1 1 230px; min-width: 230px; text-align: left; text-transform: none; letter-spacing: 0; padding: 16px 20px; font-size: 15px; line-height: 1.4; }
.modes button small { display: block; font-weight: 400; font-size: 12.5px; opacity: 0.75; margin-top: 4px; text-transform: none; letter-spacing: 0; }

/* ── galeria de presets (Modo desafio) · padrão entre os jogos ── */
.preset-list { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; }
.preset-card { display: block; width: 100%; text-align: left; border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: #fff; padding: 16px 18px; cursor: pointer; transition: border-color 0.18s ease; }
.preset-card:hover { border-color: var(--lobby-accent, var(--orange, #d84f1b)); }
.preset-card h3 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink, #1a1a1a); margin: 0; }
.preset-card .preset-meta { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lobby-accent, var(--orange, #d84f1b)); margin: 5px 0 0; }
.preset-card p { font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.45; color: var(--gray, #6b6b6b); margin: 7px 0 0; }

/* ── aviso passageiro (toast) · Lobby.notify · ex "Fulano saiu · IA assumiu" ── */
#lago-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.lago-toast { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--paper, #f2efe6); background: rgba(26, 26, 26, 0.92); border: 1px solid rgba(242, 239, 230, 0.18); border-radius: 4px; padding: 9px 16px; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.lago-toast.on { opacity: 1; transform: translateY(0); }

/* ── apelido + entrar com código ── */
.nick-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.nick-row span, .nick-row .nick-lb { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray, #6b6b6b); }
.nick-row input { font-family: "Inter", sans-serif; font-size: 14px; border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: #fff; padding: 7px 10px; color: var(--ink, #1a1a1a); }
/* apelido editável DENTRO da própria vaga (edit-in-place · sem campo separado no topo) */
.nick-slot { margin-left: auto; width: 132px; max-width: 42vw; font-family: "Inter", sans-serif; font-size: 13px; border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: #fff; padding: 7px 10px; color: var(--ink, #1a1a1a); }
.nick-slot:focus { outline: none; border-color: var(--lobby-accent, var(--orange, #d84f1b)); }
.codein { border: 1.5px solid var(--line, #d8d3ca); border-radius: 4px; background: #fff; padding: 12px 16px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 6px; text-align: center; text-transform: uppercase; width: 180px; color: var(--ink, #1a1a1a); outline: none; display: block; }
.codein:focus { border-color: var(--lobby-accent, var(--orange, #d84f1b)); }