[data-servir] { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.accion[data-servir] { position: relative; overflow: hidden; isolation: isolate; --carga: var(--tinta); }
.noche .accion[data-servir], .violeta .accion[data-servir] { --carga: #fff; }
.lima .accion[data-servir] { --carga: var(--violeta-boton); }
.accion[data-servir]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--carga);
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--entrar);
}
.accion[data-mantiene] { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--tinta); }
.accion[data-mantiene]::before { transform: scaleX(1); transition: transform var(--dura) cubic-bezier(.3, .1, .7, 1); }
.accion[data-listo] { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--tinta); }
.accion[data-listo]::before { transform: scaleX(1); transition: none; }
.otra[data-servir] { position: relative; overflow: hidden; isolation: isolate; }
.otra[data-servir]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(201 255 74 / .3);
  transform: scaleY(0); transform-origin: bottom; transition: transform 300ms var(--entrar);
}
.otra[data-mantiene] { border-color: var(--lima); }
.otra[data-mantiene]::before { transform: scaleY(1); transition: transform var(--dura) cubic-bezier(.3, .1, .7, 1); }
[data-servir][data-pista] { animation: amagar 420ms var(--rebote); }
[data-servir][data-pista]::after {
  content: attr(data-pista); position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: inherit; color: inherit; font-size: 17px; font-weight: 750; animation: aparecer 180ms ease-out both;
}
.otra[data-pista]::after { background: var(--noche); color: var(--lima); font-size: 13px; text-align: center; padding: 6px; }
@keyframes amagar { 25% { translate: -6px 0; } 55% { translate: 5px 0; } 80% { translate: -2px 0; } }
[data-sirviendo] { scale: 1.09; transition: scale var(--dura) cubic-bezier(.4, 0, .7, 1); animation: temblar var(--dura) linear forwards; }
:is([data-sirviendo], [data-soltando], [data-servido]) > .foto, .carta:is([data-sirviendo], [data-soltando], [data-servido]) .foto { outline: 0 solid var(--lima); }
[data-sirviendo] > .foto, .carta[data-sirviendo] .foto { outline-width: 12px; transition: outline-width var(--dura) cubic-bezier(.4, 0, .7, 1); }
[data-soltando] { transition: scale 300ms var(--entrar); }
[data-soltando] > .foto, .carta[data-soltando] .foto { transition: outline-width 300ms var(--entrar); }
@keyframes temblar {
  0%, 68% { rotate: 0deg; }
  74% { rotate: -1.4deg; } 80% { rotate: 1.6deg; } 86% { rotate: -1.8deg; } 92% { rotate: 1.8deg; } 100% { rotate: 0deg; }
}
[data-servido] { scale: 1.09; animation: saltar 260ms var(--rebote) both; }
[data-servido] > .foto, .carta[data-servido] .foto { animation: encender 900ms var(--entrar) both, soltar-anillo 420ms ease-out both; }
@keyframes saltar { 45% { scale: 1.17; } }
@keyframes soltar-anillo {
  from { outline-width: 12px; outline-offset: 0; }
  to { outline-width: 2px; outline-offset: 30px; outline-color: rgb(201 255 74 / 0); }
}
.carta[data-sirviendo] ~ .carta, .mazo:has([data-sirviendo]) .carta:is([data-pos="1"], [data-pos="2"]) { opacity: .35; transition: opacity var(--dura); }

@media (prefers-reduced-motion: reduce) {
  [data-sirviendo], [data-servido] { scale: none; animation: none; }
  [data-servir][data-pista] { animation: none; }
}
.otra [data-sirviendo] { scale: 1.04; }
.otra :is([data-sirviendo], [data-servido]) > .foto { outline: none; }