/* ---------- Tres en Raya Polar (mesas de la Cafetería, js/tres-en-raya.js) ----------
   Solo se anima transform (rendimiento). */
/* en una esquina, sin tapar la sala: se ve la cafetería mientras juegas o esperas */
#tttGame { left: auto; top: 96px; right: 24px; transform: none; }
/* se muestra con su propia clase (no con .open: eso pone una capa oscura sobre toda la sala) */
#tttGame.ttt-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
#tttGame .ttt-who { margin: 10px 0 0; font: 600 15px/1.3 var(--font); color: #6b4a2a; }
#tttGame .ttt-found { margin: 4px 0 8px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(#d6f5c8, #a9e58f);
  border: 3px solid #5aa83a; font: 700 20px var(--font); color: #2f6a1e; }
#tttGame .ttt-box { position: relative; width: 380px; max-width: 92vw; max-height: 80vh; overflow-y: auto; box-sizing: border-box;
  padding: 22px 26px 22px; border-radius: 32px; border: 6px solid #6b4a2a; text-align: center;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 2px, transparent 3px) 0 0 / 26px 26px, linear-gradient(#fff7ea, #f3dcc0); }
#tttGame .x-btn { position: absolute; top: 12px; right: 12px; z-index: 2; }
#tttGame h2 { margin: 0 0 2px; padding: 0 34px; font: 700 26px var(--font); color: #5a3a1e; }
#tttGame .ttt-sub { margin: 0 0 12px; font: 600 18px var(--font); color: #8a6a4a; }
#tttGame .ttt-status { margin: 10px 0; font: 600 19px/1.3 var(--font); color: #5a3a1e; }
#tttGame .ttt-note { margin: 6px 0; font: 600 15px/1.3 var(--font); color: #8a6a4a; }
#tttGame .ttt-help { margin: 8px 0 4px; padding: 10px; border-radius: 20px; background: #fff3d6; border: 3px dashed #d9a441; }
#tttGame .ttt-help p { margin: 0 0 8px; font: 600 17px var(--font); color: #7a4a1e; }
#tttGame .ttt-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 4px; }
#tttGame .ttt-btns .btn { font-size: 19px; padding: 8px 16px; }

#tttGame .ttt-players { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 10px; font: 700 18px var(--font); color: #5a3a1e; }
#tttGame .ttt-players span { flex: 1; padding: 4px 8px; border-radius: 16px; background: #fff; border: 3px solid #e6cfae; }

/* tablero 3 × 3 */
#tttGame .ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 330px; max-width: 100%; margin: 0 auto; padding: 10px;
  border-radius: 24px; background: linear-gradient(#bfe7ff, #8fcaf0); border: 4px solid #4f8fc0; }
#tttGame .ttt-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: 56px; line-height: 1; border: 4px solid #ffffff; border-radius: 18px;
  background: rgba(255, 255, 255, .85); cursor: pointer; padding: 0; box-shadow: 0 4px 0 #6fa7cf; transition: transform .14s ease; }
#tttGame .ttt-cell:disabled { cursor: default; }
#tttGame .ttt-cell:not(:disabled):hover { transform: scale(1.06); }
#tttGame .ttt-cell.p0 { background: #fff3d6; border-color: #d9a441; }
#tttGame .ttt-cell.p1 { background: #e6f4ff; border-color: #6fa7cf; }
/* la ficha que se derrite en la próxima jugada (hielo): se ve medio transparente */
#tttGame .ttt-cell.melt { opacity: .5; border-style: dashed; }
#tttGame .ttt-board.ice .ttt-cell { font-size: 52px; }

@media (max-width: 480px) {
  #tttGame .ttt-board { width: 280px; }
  #tttGame .ttt-cell { font-size: 44px; }
  #tttGame h2 { font-size: 28px; }
}