/* ============================================================
   mip-3d.css — Botones de ACCIÓN unificados (estilo "PISTA").
   · .mip3d   → primario SÓLIDO (como el botón PISTA de quiensoy)
   · .mip3d2  → secundario CLARO (misma familia, más suave)
   El color sale del --accent de cada juego; el borde 3D oscuro
   se calcula solo. NO afecta los botones del header.
   ============================================================ */

.mip3d{
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 0 0 color-mix(in srgb, var(--accent) 72%, #000),
             0 12px 26px rgba(0,0,0,.20) !important;
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.mip3d:hover{ filter:brightness(1.05); }
.mip3d:active{
  transform:translateY(5px) !important;
  box-shadow:0 3px 0 0 color-mix(in srgb, var(--accent) 72%, #000),
             0 4px 10px rgba(0,0,0,.18) !important;
}

.mip3d2{
  background:color-mix(in srgb, var(--accent) 15%, #fff) !important;
  color:color-mix(in srgb, var(--accent) 72%, #000) !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:800 !important;
  cursor:pointer;
  box-shadow:0 6px 0 0 color-mix(in srgb, var(--accent) 30%, #fff),
             0 8px 16px rgba(0,0,0,.08) !important;
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.mip3d2:hover{ filter:brightness(.98); }
.mip3d2:active{
  transform:translateY(4px) !important;
  box-shadow:0 2px 0 0 color-mix(in srgb, var(--accent) 30%, #fff) !important;
}

.mip3d[disabled], .mip3d2[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* Fallback para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red, blue)){
  .mip3d{ box-shadow:0 8px 0 0 rgba(0,0,0,.30), 0 12px 26px rgba(0,0,0,.20) !important; }
  .mip3d2{ background:#eef1f7 !important; color:#2a2f3a !important;
           box-shadow:0 6px 0 0 #cdd5e6, 0 8px 16px rgba(0,0,0,.08) !important; }
}