/* Salón inspirado en la referencia rosa. El alcance excluye login y partida. */
body.salon-lobby{
 --salon-ink:#743955;--salon-muted:#9b5b78;--salon-edge:#e8bdcf;
 color:var(--salon-ink);
 background:radial-gradient(ellipse at 40% 0,#fff5ebbb,transparent 55%),radial-gradient(ellipse at 90% 65%,#ecc5d8,transparent 65%),linear-gradient(125deg,#e6b8cc,#f7e1e5 55%,#deb0c8);
 isolation:isolate;
}
/* Ilustración vectorial decorativa, sin interceptar gestos ni pulsaciones. */
.salon-lobby::before,.salon-lobby::after{content:"";position:fixed;z-index:-1;pointer-events:none;background:url('assets/salon-botanico.svg') no-repeat center/contain;width:140px;height:70vh;opacity:.57;bottom:-30px;left:-58px}
.salon-lobby::after{left:auto;right:-60px;transform:scaleX(-1);height:48vh;opacity:.36}
.salon-lobby .app-header{position:relative;background:linear-gradient(100deg,#f8e5eaaa,#e9bbd1aa);border-bottom:1px solid #fff9;color:#64304e;box-shadow:0 2px 18px #9a547912}
.salon-lobby .brand small{color:#874664}
.salon-lobby .app-header::after{content:"Buenas partidas, mejores momentos ♡";font:italic 21px Georgia,serif;color:#aa6989;position:absolute;left:51%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);max-width:240px;text-align:center;pointer-events:none}
.salon-lobby #header-actions{position:relative;z-index:1}
.salon-lobby .icon-button{background:#ffdef0;border-color:#edbfd6;color:#743955;box-shadow:0 3px 8px #8b46671b}
.salon-lobby .salon-view{padding:0 clamp(18px,4.6vw,88px) 18px}
.salon-lobby .salon-heading{padding:15px 0 13px;flex-shrink:0}
.salon-lobby .salon-heading h1{color:var(--salon-ink);font:bold clamp(26px,2.6vw,44px)/1.05 Georgia,serif;letter-spacing:-.6px}
.salon-lobby .salon-heading h1::after{content:"DONDE CADA PARTIDA UNE PERSONAS";display:block;font:500 9px/1.6 'Segoe UI',sans-serif;letter-spacing:3px;color:var(--salon-muted);margin-top:5px}
.salon-lobby .salon-heading>div{color:var(--salon-muted)}
.salon-lobby #table-filter{background:#fff9fa;border:1px solid #fff8;border-radius:13px;color:var(--salon-ink);box-shadow:0 4px 12px #87456417;padding:9px 12px}
/* El separador ya reserva 16px; no sumar huecos a ambos lados. */
.salon-lobby .salon-pages{gap:0}
.salon-lobby .table-search{border-radius:14px;background:#fffafaed;color:#ba668a;border:1px solid #fff9;box-shadow:0 3px 10px #87456420;margin-bottom:10px;padding:0 12px}
.salon-lobby .table-search input{color:var(--salon-ink);padding:7px 0}
.salon-lobby .table-search input::placeholder{color:#a46180}
.salon-lobby .table-grid{gap:13px;padding:2px 5px 16px 1px}
.salon-lobby .table-card{background:linear-gradient(140deg,#fff5f4ef,#f8e2e7f5);border:1px solid #fff9;border-radius:20px;padding:12px 16px 10px;color:var(--salon-ink);box-shadow:0 5px 12px #9b577529,inset 0 1px #fff9}
.salon-lobby .table-card.own-table{border-color:#b86d91;box-shadow:0 0 0 2px #cb88a745,0 5px 12px #9b577529}
.salon-lobby .table-card header strong{font-size:16px;font-weight:650;color:#813c5b}
.salon-lobby .table-card header small{color:#9b5376;font-size:12px}
.salon-lobby .table-card .mini-board{margin:12px auto;box-shadow:0 4px 10px #71374838}
.salon-lobby .table-card .table-meta{border-top-color:#eac2d1;min-height:36px;padding-top:6px}
.salon-lobby .table-card .table-price{color:#ae4776;font-size:14px;font-weight:700}
.salon-lobby .table-icons img{width:36px;height:29px}
.salon-lobby .conversation-page,.salon-lobby .players-page{background:#fffafa;border:1px solid #fff;border-radius:22px;box-shadow:0 7px 22px #9b577530;color:var(--salon-ink)}
.salon-lobby .pane-heading{background:linear-gradient(110deg,#f9e6ea,#f3d8e3);border-color:#eed1dd;color:var(--salon-ink)}
.salon-lobby .salon-social-tabs{gap:10px}
.salon-lobby .salon-social-tabs button{color:#884467;padding:0 13px}
.salon-lobby .salon-social-tabs button[aria-pressed=true]{background:#fff5f6;border-radius:13px 13px 0 0;border-bottom-color:#d77fa7;color:#793552;box-shadow:0 -2px 10px #a6647e0b}
.salon-lobby .social-player-count{background:#f7d8e6;border-radius:6px;padding:2px 6px}
.salon-lobby .player-row{border-color:#f1dfe6;margin:0 14px;padding:13px 2px}
.salon-lobby .player-copy strong{color:#813c5b}.salon-lobby .player-copy small{color:#a76584}
.salon-lobby .chat-log{background:#fffafa}.salon-lobby .chat-log .chat-line.mine{background:#f9e8ef}
.salon-lobby .composer{background:#faedf2;border-color:#f0d4e0}
.salon-lobby .composer input{background:#fffafd;border-color:#efd4e1;color:#68354e}
.salon-lobby .mobile-tabs{background:#f5dce7;border-color:#e9bcd0}
.salon-lobby .mobile-tabs button{color:#874563}.salon-lobby .mobile-tabs [aria-selected=true]{background:#fecce7;color:#67304f;box-shadow:inset 0 2px #d489ae}
.salon-lobby .tables-page,.salon-lobby #player-list,.salon-lobby .chat-log{scrollbar-color:#dca1bc transparent;scrollbar-width:thin}
@media(min-width:1151px){.salon-lobby .table-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
@media(max-width:1300px){.salon-lobby .app-header::after{font-size:17px;max-width:185px}.salon-lobby .salon-view{padding-left:24px;padding-right:24px}}
/* Se conserva el scroll de páginas existente; la decoración cede espacio en móvil. */
@media(max-width:1150px){
 .salon-lobby .app-header::after{display:none}.salon-lobby .salon-view{padding:0}
 .salon-lobby .salon-heading{padding:9px 12px}.salon-lobby .salon-heading h1{font-size:25px}.salon-lobby .salon-heading h1::after{font-size:7px;letter-spacing:1.5px}
 .salon-lobby .salon-pages{gap:0}.salon-lobby::before,.salon-lobby::after{display:none}
 .salon-lobby .conversation-page,.salon-lobby .players-page{border-radius:16px 16px 0 0}
 .salon-lobby .table-card{padding:10px;border-radius:16px}.salon-lobby .table-grid{gap:9px}
 .salon-lobby .table-card header strong{font-size:14px}.salon-lobby .table-card .table-price{font-size:12px}
 .salon-lobby .salon-social-tabs button{padding:0 6px}
}
@media(max-width:420px){.salon-lobby .salon-heading h1::after{display:none}.salon-lobby .table-card{padding:8px}.salon-lobby .table-icons img{width:28px;height:24px}.salon-lobby .table-card .mini-board{margin:9px auto}}
@media(max-height:500px) and (orientation:landscape){.salon-lobby .salon-heading{padding:4px 12px}.salon-lobby .salon-heading h1{font-size:21px}.salon-lobby .salon-heading h1::after,.salon-lobby .app-header::after{display:none}.salon-lobby .salon-heading select{padding:4px 8px}.salon-lobby .table-card .mini-board{margin:7px auto}.salon-lobby .table-search{margin-bottom:5px}.salon-lobby .table-search input{padding:3px 0}}

.salon-lobby #header-actions .account-name{color:#743955}

/* Cabecera móvil: todos los accesos permanecen visibles con el avatar propio. */
@media(max-width:520px){
 .salon-lobby .app-header{gap:6px;padding:6px 8px}
 .salon-lobby .brand{gap:5px}.salon-lobby .brand img{width:35px;height:42px}
 .salon-lobby .brand b{font-size:18px;letter-spacing:-.8px}.salon-lobby .brand small{font-size:5px;letter-spacing:1px}
 .salon-lobby #header-actions{display:flex;gap:5px;flex-shrink:0}
 .salon-lobby #header-actions .account-name{font-size:0;gap:0}
 .salon-lobby #header-actions .account-name>.avatar{width:28px;height:28px}
 .salon-lobby #header-actions .icon-button{width:34px;height:36px;padding:6px;border-radius:11px}
}