/* ── TOUCH SUPPORT STYLES ──────────────────────────────────────────────────── */

#main {
  touch-action: none;
}

/* ── Selection outline (board) ────────────────────────────────────────────
   Artwork scales down by --ring-inset on every side; the ring sits behind it at the token's full
   original boundary and is revealed wherever the now-smaller artwork no longer covers it — no
   mask needed, no layout shift. */
.html-token {
  --ring-inset: max(2px, calc(var(--tok-sz, 0px) * 0.05));
}

/* Transition lives on the base rule (not just .touch-selected) so it plays in both directions —
   zooming out on select and back in on deselect. */
.html-token img {
  transition: top 0.08s ease, left 0.08s ease, width 0.08s ease, height 0.08s ease;
}

.html-token.touch-selected {
  overflow: visible;
}

.html-token.touch-selected img {
  top: var(--ring-inset);
  left: var(--ring-inset);
  width: calc(100% - var(--ring-inset) * 2);
  height: calc(100% - var(--ring-inset) * 2);
}

.html-token::before {
  content: '';
  position: absolute;
  inset: 0; /* the token's original, full-size boundary */
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #edc360,
    #ec7a00,
    #edc360
  );
  transform-origin: center;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.html-token.touch-selected::before {
  opacity: 1;
  animation: touch-ring-spin 1s linear infinite;
}

@keyframes touch-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.html-droptarget.touch-hint {
  background: transparent;
}

#main, #main * {
  -webkit-tap-highlight-color: transparent;
}