/* Real feedback, not painted into the background. Positions measured against
   the shared 1672×941 stage, so the ring stays on the play disc on every size. */
.island-home .world-mode-choices .alphabet-link { --ring-x: 51.2%; --ring-y: 62.3%; }
.island-home .world-mode-choices .reader-link { --ring-x: 50.2%; --ring-y: 62.7%; }
.island-home .world-mode-choices .wordplay-link { --ring-x: 50%; --ring-y: 62%; }
.island-home .world-mode-choices .numbers-link { --ring-x: 50.3%; --ring-y: 68.8%; }
.island-home .world-mode-choices .world-link > .tap-ring {
  display: block; position: absolute; width: 37%; height: auto; aspect-ratio: 1;
  left: var(--ring-x); top: var(--ring-y); z-index: 3;
  border: max(2px, .2cqw) solid transparent; border-radius: 50%;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  box-shadow: none; background: transparent;
  transition: opacity 140ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.island-home .world-mode-choices .tap-ring::before,
.island-home .world-mode-choices .tap-ring::after {
  content: "✦"; position: absolute; color: #fff8b6; font: 800 1.5cqw/1 system-ui;
  text-shadow: 0 1px 3px #be7d28, 0 0 .5cqw #ffde7b; pointer-events: none;
}
.island-home .world-mode-choices .tap-ring::before { left: -15%; top: 2%; }
.island-home .world-mode-choices .tap-ring::after { right: -13%; bottom: 1%; font-size: 1.1cqw; }
.island-home .world-mode-choices .world-link:focus-visible > .tap-ring,
.island-home .world-mode-choices .world-link:active > .tap-ring {
  opacity: 1; border-color: #fff9c6;
  box-shadow: 0 0 0 .35cqw #fff6c44f, 0 0 1.4cqw .25cqw #ffde7899, inset 0 0 .5cqw #fff8bc55;
  transform: translate(-50%, -50%) scale(1.04);
}
@media (hover: hover) and (pointer: fine) {
  .island-home .world-mode-choices .world-link:hover > .tap-ring {
    opacity: 1; border-color: #fff9c6;
    box-shadow: 0 0 0 .35cqw #fff6c44f, 0 0 1.4cqw .25cqw #ffde7899, inset 0 0 .5cqw #fff8bc55;
    transform: translate(-50%, -50%) scale(1.04);
    animation: island-ring-breathe 1.5s ease-in-out infinite alternate;
  }
}
.island-home .world-mode-choices .world-link:active > .tap-ring {
  transform: translate(-50%, -50%) scale(.96); animation: none;
}
/* On touchscreens don't retain a synthetic :hover ring after returning home. */
@media (hover: none) {
  .island-home .world-mode-choices .world-link:not(:active):not(:focus-visible) > .tap-ring { opacity: 0; animation: none; }
}
/* Highlight the intended disc instead of the former rectangular hotspot. */
.island-home .world-mode-choices .world-link:is(:hover, :active) { background: transparent; }
@keyframes island-ring-breathe {
  from { transform: translate(-50%, -50%) scale(1.02); }
  to { transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .island-home .world-mode-choices .world-link > .tap-ring,
  .island-home .world-mode-choices .world-link:is(:hover, :focus-visible, :active) > .tap-ring { animation: none; transition: none; }
}