/* A porta: criar/entrar e a lista de salas recentes. */

/* ---------- entrada ---------- */
.porta{max-width:480px;margin:12vh auto;background:var(--surface);border-radius:var(--rlg);padding:32px;
       box-shadow:var(--anel),var(--sombraPop)}
.porta h1{font-size:26px;font-weight:500;letter-spacing:-.01em;margin:0 0 8px;text-align:center}
.porta p{color:var(--tx2);font-size:14px;margin:0 0 24px;text-align:center;text-wrap:pretty}
.duas{display:grid;gap:10px}
.duas button{display:block;padding:14px 16px;text-align:left;background:var(--sup1);color:var(--tx);
             border:1px solid var(--linha);border-radius:var(--r)}
.duas button:hover{background:hsl(var(--acRaw)/.10);border-color:var(--ac7)}
.duas b{display:block;font-size:15px;font-weight:500;margin-bottom:2px}
.duas span{font-weight:400;color:var(--tx3);font-size:12.5px}

/* salas recentes no lobby */
#recList{display:grid;gap:6px}
.rec{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);
     background:var(--sup1);border:1px solid var(--linha);cursor:pointer}
.rec:hover{background:hsl(var(--acRaw)/.08);border-color:var(--ac7)}
.rec .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rec .apelido{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .apelido input{width:100%;padding:2px 6px;font-size:13px}
.rec .sub{display:flex;align-items:baseline;gap:8px}
.rec .cod{font:500 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.06em;color:var(--tx3)}
.rec .qdo{font-size:11px;color:var(--tx4)}
.rec .mini{width:26px;height:26px;padding:0;border:0;border-radius:6px;flex:none;
           background:transparent;color:var(--tx4);display:grid;place-items:center;
           font-size:12px;opacity:0;transition:opacity .1s}
.rec:hover .mini{opacity:1}
.rec .mini:hover{background:hsl(var(--veuRaw)/.1);color:var(--tx)}