/* Iconos de cartas en CSS puro (fallback del pipeline de arte) */
/* iconos de cartas en CSS puro (fallback del pipeline de arte) */
.ico { position: relative; display: inline-block; width: 1em; height: 1em; font-size: 26px; vertical-align: middle; }
.ico::before, .ico::after { content: ''; position: absolute; }
.ico-palo::before { left: 44%; top: 2%; width: 10%; height: 74%; background: currentColor; border-radius: 4px;
  transform: rotate(28deg); transform-origin: bottom center;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.35); }
.ico-palo::after { left: 22%; bottom: 6%; width: 36%; height: 19%; background: currentColor;
  border-radius: 50% 50% 50% 12%; transform: rotate(28deg);
  /* bolita blanca de golf junto a la cabeza del palo */
  box-shadow: .52em .42em 0 -.05em #fff, .52em .42em 0 -.02em rgba(0,0,0,.28); }
.ico-dedo::before { left: 34%; top: 14%; width: 32%; height: 66%; background: currentColor;
  border-radius: 45% 45% 30% 30%; }
.ico-dedo::after { left: 40%; top: 20%; width: 20%; height: 16%; background: rgba(255,255,255,.5);
  border-radius: 50% 50% 30% 30%; }
.ico-hoyo::before { left: 4%; bottom: 4%; width: 62%; height: 62%; border-radius: 50%;
  background: #23262b; /* plano */
  box-shadow: 0 0 0 .09em currentColor; }
/* flecha grande y contrastada: halo blanco para leer la dirección de un vistazo */
.ico-hoyo::after { right: -4%; top: -4%; width: 0; height: 0;
  border-left: .52em solid currentColor; border-top: .36em solid transparent; border-bottom: .36em solid transparent;
  filter: drop-shadow(0 0 .07em #fff) drop-shadow(0 .04em .05em rgba(0,0,0,.4)); }
.ico-hoyo.up::after { transform: rotate(-90deg) translateX(.1em); }
.ico-hoyo.down::after { transform: rotate(90deg) translateX(-.1em); }
.ico-hoyo.left::after { transform: rotate(180deg) translateY(-.1em); }
.ico-hoyo.right::after { transform: rotate(0deg) translateY(.1em); }
.ico-bunker::before { left: 12%; bottom: 14%; width: 76%; height: 46%; background: currentColor;
  border-radius: 50% 50% 22% 22% / 90% 90% 22% 22%; }
.ico-bunker::after { left: 30%; bottom: 34%; width: 40%; height: 12%;
  border-top: .11em solid rgba(255,255,255,.55); border-radius: 50%;
  box-shadow: 0 .14em 0 0 rgba(255,255,255,.35); }
.ico-portal::before { inset: 6%; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 18%, currentColor 18% 42%, transparent 42% 58%, currentColor 58% 82%, transparent 82%); }
.ico-portal::after { inset: 34%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .12em currentColor; }
.ico-no::before, .ico-no::after { left: 44%; top: 8%; width: 14%; height: 84%; background: currentColor; border-radius: 4px; }
.ico-no::before { transform: rotate(45deg); }
.ico-no::after { transform: rotate(-45deg); }