/* CASINO_BORDER_TRACE_V1 (2026-10-10) — on hover, a thin primary-colour beam
   traces the game-thumb border once and stops. Transparent at both ends.
   PRIMARY COLOUR chain: /api/theme-vars.css defines --p1, /api/theme.css
   defines --color-primary; different pages load one or the other, so try
   both before the final fallback. */
@property --tr-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card .thumb,
.gl-card .gl-thumb,
.gx-lc-card .gx-lc-thumb,
.game-card .thumb,
.game-card-wrap .thumb,
.wh-tile-trace {
  position: relative;
}

.card .thumb::after,
.gl-card .gl-thumb::after,
.gx-lc-card .gx-lc-thumb::after,
.game-card .thumb::after,
.game-card-wrap .thumb::after,
.wh-tile-trace::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--tr-ang),
    transparent 0deg,
    transparent 230deg,
    var(--p1, var(--color-primary, var(--accent-color, #ebcf47))) 300deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.card:hover .thumb::after,
.gl-card:hover .gl-thumb::after,
.gx-lc-card:hover .gx-lc-thumb::after,
.game-card:hover .thumb::after,
.game-card-wrap:hover .thumb::after,
.wh-tile-trace:hover::after {
  opacity: 1;
  animation: casino-trace 1.3s cubic-bezier(.55, .1, .35, 1) forwards;
}

@keyframes casino-trace {
  from { --tr-ang: 0deg; }
  to   { --tr-ang: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .thumb::after,
  .gl-card:hover .gl-thumb::after,
  .gx-lc-card:hover .gx-lc-thumb::after,
  .game-card:hover .thumb::after,
  .game-card-wrap:hover .thumb::after,
  .wh-tile-trace:hover::after {
    animation: none;
    background: none;
    outline: 1.5px solid var(--p1, var(--color-primary, var(--accent-color, #ebcf47)));
    outline-offset: -1.5px;
  }
}