/* Dominó — Arena. Reusa el sistema de diseño de app.css. */
.dom-wrap{max-width:1000px;margin:0 auto;padding:18px 14px 90px}
.dom-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dom-head h1{margin:0;font-size:1.5rem}
.dom-social{background:rgba(127,216,208,.14);color:var(--cian);border:1px solid rgba(127,216,208,.3)}
.dom-view{animation:domIn .18s ease}
.hide{display:none !important}
@keyframes domIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

.dom-card{margin-bottom:14px}
.dom-card h2{margin:0 0 4px;font-size:1.12rem}
.dom-gate{text-align:center}
.dom-check{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--mut);font-size:.9rem}
.dom-lista{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.dom-fila{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--borde);
  border-radius:12px;padding:9px 11px}
.dom-fila .grow{flex:1;min-width:0}
.dom-fila b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dom-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;background:linear-gradient(135deg,#38bdf8,#818cf8);font-size:.9rem;overflow:hidden}
.dom-av img{width:100%;height:100%;object-fit:cover}

/* --- sala de espera --- */
.dom-jugadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}
.dom-jgrid{background:var(--card2);border:1px solid var(--borde);border-radius:14px;padding:12px;text-align:center;cursor:pointer}
.dom-jgrid.listo{border-color:var(--verde);box-shadow:0 0 0 1px rgba(55,214,122,.35)}
.dom-jgrid .av{margin:0 auto 7px}
.dom-jgrid .est{font-size:.78rem;color:var(--mut);margin-top:3px}
.dom-jgrid.listo .est{color:var(--verde);font-weight:700}
.dom-countdown{margin-top:12px;text-align:center;font-weight:800;font-size:1.1rem;color:var(--oro)}

/* --- mesa --- */
.dom-mesa{display:flex;flex-direction:column;gap:12px}
.dom-ops{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dom-op{background:var(--card2);border:1px solid var(--borde);border-radius:14px;padding:8px 12px;text-align:center;min-width:96px;position:relative}
.dom-op.turno{border-color:var(--verde);box-shadow:0 0 0 2px rgba(55,214,122,.3)}
.dom-op .nm{font-size:.82rem;font-weight:700;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.dom-op .nf{font-size:.78rem;color:var(--mut)}
.dom-op .leyenda{position:absolute;top:-9px;right:-6px;font-size:.66rem;background:var(--oro);color:#241a00;
  border-radius:8px;padding:1px 6px;font-weight:800}
.dom-op.ausente{opacity:.55}

.dom-board-wrap{background:var(--bg2);border:1px solid var(--borde);border-radius:var(--r);padding:12px}
.dom-extremos{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mut);margin-bottom:8px}
.dom-extremos b{color:var(--tx);font-size:1rem}
.dom-board{display:flex;flex-wrap:wrap;gap:6px;min-height:74px;align-items:center;justify-content:center;
  overflow-x:auto;padding:6px}
.dom-tile{width:46px;height:62px;border-radius:9px;background:linear-gradient(160deg,#fdfcf7,#e9e4d3);
  border:1px solid #cfc8b0;color:#1a1a1a;display:flex;flex-direction:column;position:relative;flex:0 0 auto;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.9)}
.dom-tile .half{flex:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem}
.dom-tile .sep{height:1px;background:#c9c2aa;margin:0 5px}
.dom-tile.vert{width:34px;height:76px}
.dom-tile.vert .half{font-size:1.05rem}
.dom-tile.mia{cursor:pointer;transition:transform .12s}
.dom-tile.mia:hover{transform:translateY(-6px)}
.dom-tile.sel{outline:3px solid var(--oro);transform:translateY(-6px)}
.dom-tile.jugable{box-shadow:0 0 0 2px rgba(55,214,122,.55),0 6px 14px -8px #000}
.dom-tile.nojugable{opacity:.45}

.dom-turno{text-align:center;font-weight:800;font-size:1rem;padding:9px;border-radius:12px;background:var(--card2);
  border:1px solid var(--borde)}
.dom-turno.mio{background:linear-gradient(135deg,rgba(55,214,122,.2),rgba(55,214,122,.06));border-color:var(--verde);color:#b8f5ce}

.dom-mano{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding:12px;background:var(--bg2);
  border:1px solid var(--borde);border-radius:var(--r);min-height:92px}
.dom-acciones{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap}
.dom-sides{display:inline-flex;gap:8px}

/* --- fin --- */
.dom-fin{text-align:center;max-width:560px;margin:0 auto}
.dom-fin-ico{font-size:3.4rem;line-height:1}
.dom-scores{display:flex;flex-direction:column;gap:6px;margin-top:12px;text-align:left}
.dom-score{display:flex;justify-content:space-between;background:var(--card2);border:1px solid var(--borde);
  border-radius:10px;padding:8px 11px;font-size:.9rem}
.dom-score.gano{border-color:var(--verde);background:rgba(55,214,122,.1)}

/* --- toasts / emotes / audio --- */
.dom-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.dom-toast{background:rgba(18,26,46,.97);border:1px solid var(--borde2);color:var(--tx);border-radius:12px;
  padding:10px 14px;font-size:.9rem;box-shadow:var(--sh);animation:domIn .16s ease}
.dom-toast.err{border-color:var(--rojo);color:#ffd9dc}
.dom-toast.emo{border-color:var(--oro)}
.dom-emotes{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:85;background:var(--card);
  border:1px solid var(--borde2);border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;
  max-width:min(92vw,460px);box-shadow:var(--sh)}
.dom-audio{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:85;background:var(--rojo);
  color:#fff;border-radius:50px;padding:9px 18px;font-weight:700;font-size:.9rem;box-shadow:var(--sh)}

@media(max-width:560px){
  .dom-tile{width:40px;height:54px}
  .dom-tile .half{font-size:1rem}
  .dom-head h1{font-size:1.28rem}
}