/* =====================================================================
   Cuadrilla · estilos de la plataforma (mundo de juegos, pensado para móvil)
   ===================================================================== */
:root{
  --bg:#0d0b26; --bg-2:#151240; --panel:#1b1848; --panel-2:#252163; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#f4f2ff; --muted:#aaa6d6; --ink:#0a0820;
  --brand:#5b7cff; --brand-2:#a35bff; --accent:#ffcc4d; --ok:#5ff0a8; --bad:#ff5d7a; --cyan:#3fd0ff; --amber:#ffb42e;
  --fun:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --r:20px; --tab:72px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:dark;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.app{padding-bottom:calc(var(--tab) + 18px + env(safe-area-inset-bottom))}
a{color:#9db3ff}
h1,h2,h3{font-family:var(--fun);font-weight:800;line-height:1.1;margin:0 0 .5rem;letter-spacing:-.01em}
h1{font-size:2rem}h2{font-size:1.3rem}h3{font-size:1.08rem}
small{display:block;color:var(--muted);font-weight:400;margin-top:.15rem}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* fondo con brillos */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(600px 420px at 85% -5%,rgba(163,91,255,.35),transparent 70%),
  radial-gradient(520px 380px at -10% 30%,rgba(91,124,255,.28),transparent 70%),
  radial-gradient(500px 400px at 70% 110%,rgba(255,92,180,.18),transparent 70%),var(--bg)}
.sky::after{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 70% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 40% 70%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 85% 60%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 10% 85%,#fff 50%,transparent 51%);background-size:420px 420px}

/* ---------- cabecera ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;padding-top:calc(.7rem + env(safe-area-inset-top));background:rgba(13,11,38,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.55rem;font:800 1.35rem/1 var(--fun);color:var(--text);text-decoration:none;letter-spacing:.01em;margin-right:auto}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 6px 16px rgba(120,90,255,.45)}
.logo svg{width:24px;height:24px;color:#fff}
.me{display:flex;align-items:center;gap:.55rem}
.me form{margin:0}
.me-name{font-weight:700}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;border:0;background:rgba(255,255,255,.07);color:var(--text);cursor:pointer}
.iconbtn svg{width:22px;height:22px}
.iconbtn:hover{background:rgba(255,255,255,.14)}
.nav,.nav-right{display:flex;gap:.6rem;align-items:center}
.nav a:not(.btn){color:var(--muted);text-decoration:none;font-weight:600}
.nav a:not(.btn):hover{color:var(--text)}

/* ---------- barra de secciones ---------- */
.tabbar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;width:min(560px,calc(100% - 20px));height:var(--tab);display:flex;justify-content:space-around;align-items:center;padding:0 6px;border-radius:26px;background:rgba(22,19,60,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:20px;color:var(--muted);text-decoration:none;font:700 .72rem var(--fun);transition:color .2s,background .2s}
.tabbar a svg{width:26px;height:26px}
.tabbar a:hover{color:var(--text)}
.tabbar a.on{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 18px rgba(110,90,255,.45)}

/* ---------- contenido ---------- */
.wrap{width:min(1100px,100%);margin:0 auto;padding:1.2rem 1rem 1rem}
.hello{margin:.4rem 0 1.1rem}
.hello h1{font-size:clamp(1.7rem,6vw,2.4rem)}
.hello p{margin:.2rem 0 0}
.cta{margin-top:1rem!important;display:flex;gap:.6rem;flex-wrap:wrap}
.block{margin:1.6rem 0}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.block-head h2{margin:0}
.block-head a{font-weight:700;text-decoration:none;font-size:.92rem}
.empty-row{background:var(--panel);border-radius:16px;padding:.9rem 1rem;margin:0}
.notice{margin:.8rem 0 0}
.notice a{display:inline-block;padding:.5rem .9rem;border-radius:99px;background:rgba(255,204,77,.14);color:var(--accent);font-weight:700;text-decoration:none}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.2rem;border:0;border-radius:16px;cursor:pointer;font:800 1rem/1.1 var(--fun);letter-spacing:.01em;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 18px rgba(110,90,255,.35),inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .12s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px)}
.btn-ghost{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}

/* destacado */
.feature{position:relative;display:block;border-radius:26px;overflow:hidden;aspect-ratio:16/9;max-height:360px;width:100%;text-decoration:none;color:#fff;box-shadow:0 22px 50px rgba(0,0,0,.45);isolation:isolate}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feature:hover img{transform:scale(1.04)}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,24,.95) 0,rgba(8,6,24,.55) 40%,transparent 72%),linear-gradient(90deg,rgba(8,6,24,.6),transparent 65%)}
.feature-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:1.2rem 1.3rem}
.kicker{font:800 .74rem var(--fun);padding:.2rem .6rem;border-radius:99px;background:var(--accent);color:#2a1a00}
.ftitle{font:800 clamp(1.8rem,7vw,2.8rem)/1 var(--fun);text-shadow:0 4px 16px rgba(0,0,0,.6)}
.fdesc{max-width:46ch;color:#e4e0ff;font-size:.95rem}
.feature .btn{margin-top:.5rem}

/* invitaciones */
.invite-strip{display:grid;gap:.6rem;margin-bottom:1.2rem}
.invite{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:20px;text-decoration:none;color:var(--text);background:linear-gradient(135deg,rgba(255,204,77,.18),rgba(255,92,180,.14));box-shadow:inset 0 0 0 1px rgba(255,204,77,.4)}
.invite .grow{flex:1}
.invite .btn{padding:.5rem .9rem;font-size:.9rem}
.pulse{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(255,204,77,.7);animation:pl 1.6s infinite}
@keyframes pl{70%{box-shadow:0 0 0 12px rgba(255,204,77,0)}100%{box-shadow:0 0 0 0 rgba(255,204,77,0)}}

/* amigos en fila */
.friends-row{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .1rem .5rem;scrollbar-width:none}
.friends-row::-webkit-scrollbar{display:none}
.friend{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:66px;text-decoration:none;color:var(--text);font-size:.82rem;font-weight:600}
.friend span:last-child{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* mosaicos de juegos */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tiles.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tile{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc,#5b7cff) 60%,#1b1848),#120f38);box-shadow:0 12px 26px rgba(0,0,0,.4);transition:transform .2s cubic-bezier(.3,1.4,.5,1),box-shadow .2s}
.tile:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 18px 36px rgba(0,0,0,.5)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,4,20,.85) 0,rgba(6,4,20,.25) 38%,transparent 60%);z-index:0}
.tname{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;font:800 1.25rem/1 var(--fun);text-shadow:0 3px 10px rgba(0,0,0,.7)}
.tname small{color:#d9d4ff;font:600 .75rem system-ui;margin-top:.2rem}
.tiles.big .tname{font-size:1.5rem}
.tbadge{position:absolute;top:10px;right:10px;z-index:1;font:800 .72rem var(--fun);padding:.2rem .55rem;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.tile-ico{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.9}
.tile-ico .gicon{width:56px;height:56px}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding:.1rem 0 .9rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:.55rem 1rem;border-radius:16px;border:0;cursor:pointer;font:800 .92rem var(--fun);color:#c8c4f0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.chip.on{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 6px 14px rgba(110,90,255,.35)}

/* tienda y próximamente */
.shop,.soon{text-align:center;max-width:520px;margin:1rem auto;padding:1.5rem 1rem 2rem;border-radius:28px;background:linear-gradient(180deg,var(--panel),rgba(27,24,72,.4));box-shadow:inset 0 0 0 1px var(--line)}
.chest svg{width:min(240px,70%);height:auto}
.soon-art{border-radius:20px;overflow:hidden;aspect-ratio:16/10;margin-bottom:1rem;display:grid;place-items:center;background:var(--panel-2)}
.soon-art img{width:100%;height:100%;object-fit:cover}
.soon-art .gicon{width:80px;height:80px}

/* ---------- tarjetas y formularios ---------- */
.card{background:linear-gradient(180deg,var(--panel),rgba(27,24,72,.75));border-radius:var(--r);padding:1.1rem 1.15rem;box-shadow:inset 0 0 0 1px var(--line),0 12px 30px rgba(0,0,0,.25)}
.narrow{max-width:460px;margin:1.2rem auto}
form label{display:block;margin-bottom:1rem;font-weight:700}
form input:not([type=checkbox]):not([type=radio]),form textarea,form select,.searchbar input,.chat-form input{display:block;width:100%;margin-top:.35rem;padding:.8rem .95rem;background:rgba(10,8,32,.7);color:var(--text);border:1px solid var(--line-2);border-radius:14px;font:inherit;font-size:1rem}
form input:focus,form textarea:focus,.chat-form input:focus,.searchbar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,124,255,.3)}
form textarea.code{font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-height:340px;resize:vertical}
.err{color:var(--bad)}
.alert{background:rgba(255,93,122,.12);border:1px solid rgba(255,93,122,.5);padding:.7rem .9rem;border-radius:14px}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.hint{color:var(--muted);font-weight:400;font-size:.88rem;display:block;margin-top:.25rem}
.avatars{border:0;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.avatars legend{font-weight:700;margin-bottom:.4rem;padding:0}
.av-pick{margin:0;cursor:pointer}
.av-pick input{position:absolute;opacity:0}
.av-pick input:checked + .avatar{outline:3px solid var(--accent);outline-offset:2px}
.av-pick input:focus-visible + .avatar{outline:3px solid var(--cyan)}
.avatar{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;font:800 1.05rem var(--fun);color:#0a0820;vertical-align:middle;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.avatar.sm{width:32px;height:32px;font-size:.85rem}
.avatar.lg{width:58px;height:58px;font-size:1.4rem;box-shadow:0 0 0 3px rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.35)}
.avatar i.on{position:absolute;right:0;bottom:1px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--bg)}
.av-a1{background:linear-gradient(135deg,#7fe3ff,#3fa0ff)}.av-a2{background:linear-gradient(135deg,#ffd27a,#ff9a2e)}.av-a3{background:linear-gradient(135deg,#a8ffcf,#3fd08a)}.av-a4{background:linear-gradient(135deg,#ffb8c6,#ff6a8f)}
.av-a5{background:linear-gradient(135deg,#d6c4ff,#9a6aff)}.av-a6{background:linear-gradient(135deg,#fff09a,#ffc93a)}.av-a7{background:linear-gradient(135deg,#a0fff0,#3fd8c0)}.av-a8{background:linear-gradient(135deg,#ffffff,#c8ccf0)}
.tag{display:inline-block;font:800 .78rem var(--fun);padding:.2rem .7rem;border-radius:99px;background:rgba(95,240,168,.15);color:var(--ok)}
.tag-off{background:rgba(255,255,255,.08);color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5a5690;margin-right:.3rem}
.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.plain{list-style:none;margin:0;padding:0}.plain li{padding:.3rem 0}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;align-items:center;gap:.6rem;padding:.65rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rows li:last-child{border-bottom:0}
.rows .grow{flex:1;min-width:120px}
.rows li.sel{background:rgba(91,124,255,.16);margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;border-radius:14px}
.rows .btn{padding:.42rem .8rem;font-size:.85rem;border-radius:12px}
.rows a.grow{color:var(--text);text-decoration:none;font-weight:600}
form.inline{display:inline;margin:0}
.grow{flex:1}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.stack{display:flex;flex-direction:column;gap:1rem}
.searchbar{display:flex;gap:.5rem;margin-bottom:.6rem}
.searchbar input{margin:0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.span2{grid-column:span 2}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.game{background:var(--panel-2);border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:inherit}
.game p{margin:0;color:var(--muted);font-size:.92rem}
.gicon{width:62px;height:62px}
.juego-area{min-height:320px;display:grid;place-items:center;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r);padding:2rem}

/* ---------- chat privado ---------- */
.chat-page{display:grid;grid-template-columns:280px 1fr;gap:1rem;align-items:start}
.chat{display:flex;flex-direction:column}
.chat-log{height:min(60vh,520px);overflow-y:auto;display:flex;flex-direction:column;gap:.45rem;padding:.4rem .2rem}
.msg{max-width:80%;align-self:flex-start;background:rgba(255,255,255,.08);padding:.5rem .8rem;border-radius:18px 18px 18px 6px}
.msg.mine{align-self:flex-end;background:linear-gradient(135deg,#3f6cff,#6a4bff);border-radius:18px 18px 6px 18px}
.msg.big{background:none!important;padding:0 .2rem;font-size:2.2rem;line-height:1.1}
.msg.big .msg-head{display:none}
.msg-head{display:flex;gap:.6rem;align-items:baseline;font-size:.78rem;opacity:.8}
.msg .time{color:#d6d2ff;font-size:.7rem}
.msg p{margin:.1rem 0 0;overflow-wrap:anywhere}
.chat-form{position:relative;display:flex;gap:.5rem;margin-top:.7rem;align-items:center}
.chat-form input{margin:0;border-radius:99px}
.chat-form .btn{border-radius:99px}
.emo-btn{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;font-size:1.35rem;background:rgba(255,255,255,.08)}
.emo-pop{position:absolute;bottom:56px;right:0;left:0;max-width:360px;margin-left:auto;z-index:5;padding:.6rem;border-radius:20px;background:rgba(22,19,60,.97);box-shadow:inset 0 0 0 1px var(--line-2),0 18px 40px rgba(0,0,0,.5)}
.emo-tabs{display:flex;gap:.3rem;margin-bottom:.4rem}
.emo-tabs button{flex:1;border:0;background:transparent;font-size:1.2rem;padding:.3rem;border-radius:10px;cursor:pointer}
.emo-tabs button.on{background:rgba(255,255,255,.1)}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:200px;overflow-y:auto}
.emo-grid button{border:0;background:transparent;font-size:1.45rem;padding:.25rem 0;border-radius:10px;cursor:pointer}
.emo-grid button:hover{background:rgba(255,255,255,.1)}
.chat-note{min-height:1.2rem;margin:.4rem 0 0;font-size:.88rem}
.chat-guest p{margin:.6rem 0}

/* ---------- página de partida (pantalla completa) ---------- */
body.play{height:100dvh;overflow:hidden;background:#07061a}
.playbar{position:fixed;top:0;left:0;right:0;z-index:10;height:calc(50px + env(safe-area-inset-top));padding:env(safe-area-inset-top) .6rem 0;display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,rgba(13,11,38,.98),rgba(13,11,38,.9));border-bottom:1px solid var(--line)}
.playbar .back{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:#fff;background:rgba(255,255,255,.08)}
.playbar .back svg{width:22px;height:22px}
.ptitle{font:800 1.2rem var(--fun)}
.pmeta{margin-left:auto;font-size:.8rem;color:var(--muted)}
.game-frame{display:block;width:100%;border:0;background:#07061a}
body.play .game-frame{position:fixed;left:0;right:0;bottom:0;top:calc(50px + env(safe-area-inset-top));height:calc(100dvh - 50px - env(safe-area-inset-top))}

/* ---------- panel de administración ---------- */
.toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.toolbar .grow{flex:1}
.admin-list{list-style:none;margin:0;padding:0}
.admin-list li{display:flex;gap:.9rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.admin-list li:last-child{border-bottom:0}
.thumb{width:84px;height:56px;border-radius:12px;overflow:hidden;display:grid;place-items:center;color:var(--acc,var(--cyan));background:var(--panel-2);flex:none}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .gicon{width:30px;height:30px}
.admin-list .grow{flex:1;min-width:160px}
.admin-list small{display:inline}
.icon-grid{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0 0 1rem}
.icon-grid legend{font-weight:700;margin-bottom:.4rem;padding:0}
.icon-opt{position:relative;margin:0!important;cursor:pointer}
.icon-opt input{position:absolute;opacity:0}
.icon-opt span{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--line-2);border-radius:14px;color:var(--text)}
.icon-opt .gicon{width:30px;height:30px}
.icon-opt input:checked + span{border-color:var(--accent);background:var(--panel-2);color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.danger{box-shadow:inset 0 0 0 1px rgba(255,93,122,.4)}
.tabla-scroll{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th,.tabla td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.tabla form{margin:0}.tabla .btn{padding:.3rem .7rem;font-size:.85rem}
.foot{text-align:center;color:var(--muted);padding:1rem;font-size:.85rem}

/* colores por juego */
.ic-ajedrez{--acc:#3fd0ff}.ic-legion{--acc:#e8c060}.ic-fincas{--acc:#7cf0a8}.ic-bolos{--acc:#ffb42e}.ic-dardos{--acc:#b79cff}.ic-golf{--acc:#4ee07a}.ic-migajas{--acc:#ff5a2b}
.ic-mando{--acc:#6be3d0}.ic-dados{--acc:#ffd76b}.ic-cartas{--acc:#ff8fa3}.ic-trofeo{--acc:#ffb42e}.ic-cohete{--acc:#3fd0ff}.ic-puzzle{--acc:#7cf0a8}.ic-rayo{--acc:#ffd76b}

@media (max-width:760px){
  .cols,.chat-page,.grid,.row2{grid-template-columns:1fr}.span2{grid-column:auto}
  .me-name{display:none}
  .wrap{padding:1rem .85rem}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tiles.big{grid-template-columns:1fr 1fr}
  .tname{font-size:1.05rem}.tiles.big .tname{font-size:1.15rem}
  .feature{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.nav-right .btn{white-space:nowrap;padding:.55rem .9rem;font-size:.92rem}

/* ---------- partidas abiertas (inicio) ---------- */
.open-rooms{display:grid;gap:.55rem}
.oroom{display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;border-radius:18px;text-decoration:none;color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.oroom:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.oroom .grow{flex:1;min-width:0}
.oroom b{display:block;font:800 1rem var(--fun);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oroom small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oroom .btn{padding:.45rem .9rem;font-size:.9rem}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:.4rem;box-shadow:0 0 0 0 rgba(95,240,168,.7);animation:livep 1.6s infinite}
@keyframes livep{70%{box-shadow:0 0 0 8px rgba(95,240,168,0)}100%{box-shadow:0 0 0 0 rgba(95,240,168,0)}}

/* ---------- invitaciones en el chat ---------- */
.msg.msg-inv{max-width:92%;background:linear-gradient(135deg,rgba(255,204,77,.2),rgba(255,92,180,.16));box-shadow:inset 0 0 0 1px rgba(255,204,77,.45)}
.msg.mine.msg-inv{background:linear-gradient(135deg,rgba(91,124,255,.35),rgba(163,91,255,.3))}
.inv-card{display:flex;align-items:center;gap:.65rem;margin-top:.3rem}
.inv-ico{font-size:1.6rem;line-height:1;flex:none}
.inv-tx{flex:1;min-width:0}
.inv-tx b{display:block;font:800 .98rem var(--fun)}
.inv-tx small{color:#e6e2ff}
.inv-join{padding:.45rem .95rem;font-size:.92rem;flex:none}

/* ---------- avisos de invitación (todas las páginas) ---------- */
.inv-toasts{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;display:grid;gap:.5rem;width:min(440px,calc(100vw - 20px));pointer-events:none}
.inv-toast{pointer-events:auto;display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:18px;background:rgba(27,24,72,.97);box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,204,77,.55);color:var(--text);opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .3s}
.inv-toast.on{opacity:1;transform:none}
.inv-toast .btn{padding:.45rem .9rem;font-size:.9rem;flex:none}
.inv-toast .inv-tx small{color:var(--muted)}
.inv-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--text);font-size:.85rem;cursor:pointer}
.msg-report{display:block;margin:.25rem 0 0 auto;padding:0;border:0;background:none;color:rgba(255,255,255,.45);font:600 .72rem system-ui,sans-serif;cursor:pointer}
.msg-report:hover{color:#ff8aa0}
/* ---------- páginas legales y cuenta ---------- */
.legal{max-width:820px;margin:0 auto;line-height:1.65}
.legal h2{margin-top:1.6rem}
.legal li{margin:.25rem 0}
.legal-crumb{margin:0 0 .4rem;font-size:.85rem}
.legal-toc{font-size:.9rem;padding:.6rem .8rem;border-radius:14px;background:rgba(255,255,255,.05);margin:.4rem 0 1rem}
.legal-index{display:grid;gap:.4rem;padding-left:1.1rem}
.legal-more{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem}
.legal-more ul{columns:2;column-gap:2rem;padding-left:1.1rem}
.legal .tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.legal .tabla th,.legal .tabla td{border-bottom:1px solid var(--line);padding:.45rem;text-align:left;vertical-align:top}
.site-foot{max-width:1100px;margin:2rem auto 0;padding:0 16px;font-size:.82rem;color:var(--muted);text-align:center}
.site-foot a{color:var(--muted);margin:0 .35rem;white-space:nowrap}
.danger-zone{box-shadow:inset 0 0 0 1px rgba(255,93,122,.45)}
.btn-danger{background:linear-gradient(135deg,#ff5d7a,#d63a5a)!important}
@media (max-width:560px){.legal-more ul{columns:1}}
.rep-form{display:inline-block;position:relative}
.rep-form summary{list-style:none;cursor:pointer}
.rep-form summary::-webkit-details-marker{display:none}
.rep-form[open] form{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;gap:.45rem;width:min(280px,80vw);padding:.7rem;border-radius:14px;background:var(--panel-2);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.me-link{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}