/* ============================================================
   Juego embebido: tema oscuro + llenar el marco (sin scroll)
   Sin filtros: se cambian las variables de color y se hace que
   el área de juego se estire para llenar el marco.
   ============================================================ */
html{
  /* superficies oscuras, tinta clara */
  --paper:#101014;
  --papel:#101014;
  --paper-raised:#1A1A20;
  --paper-deep:#0C0C10;
  --ink:#F2F0E6;
  --tinta:#F2F0E6;
  --line:#F2F0E6;
  --gray:#C7C1B6;
  --borde:4px solid var(--ink);
  --sombra:6px 6px 0 rgba(242,240,230,.35);

  height:100% !important;
  overflow:hidden !important;
  background:#101014 !important;
}
body{
  height:100% !important;
  margin:0 !important;
  padding:8px 10px 10px !important;
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#101014 !important;
  color:var(--ink);
}
header{display:none !important}

/* la tarjeta del juego desaparece: sin bordes ni sombras */
.page, .main, .wrap, .panel{
  flex:1 1 auto;
  min-height:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
/* el área de juego se come el espacio que sobra */
.lienzo-caja, .tablero, .arena, .lienzo, .board, .board-wrap, #lienzo{
  flex:1 1 auto !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
}
canvas{
  width:100% !important;
  height:100% !important;
  display:block;
  border:0 !important;
  border-radius:0 !important;
}
img{max-width:100%}

/* contraste: textos que quedaban apagados sobre el fondo oscuro */
.page, .main, .wrap, .panel { color: var(--ink) }
.hud, .toolbar, .stats, .topbar, .stat, .fila { color: var(--ink) }
.hud .valor, .stat .value, .stat .valor { color: var(--ink) !important }