/* Sparse combat lettering inside the original purple pixel rim. */
.action-ring { position: relative; width: min(100%, 680px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.action-ring__art { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; background: url("../assets/Sprites/action-ring.webp") center / 108% no-repeat; }
.action-ring__art.has-artwork { background: none; }
.action-ring__categories { position: absolute; inset: 0; }
.action-ring [hidden] { display: none; }
.action-ring__choice, .action-ring__link, .action-ring__back { font-family: var(--font); font-weight: 400; color: var(--text); background: none; border: 0; text-decoration: none; cursor: pointer; text-align: center; text-shadow: 2px 2px var(--ink); }
.action-ring__choice { position: absolute; translate: -50% -50%; font-size: clamp(1rem, 5.2cqi, 2.2rem); padding: .5rem .15rem; min-height: 44px; line-height: 1.1; }
.action-ring__choice--world { left: 50%; top: 32%; }
.action-ring__choice--mechanics { left: 30%; top: 50%; }
.action-ring__choice--characters { left: 70%; top: 50%; }
.action-ring__choice--music { left: 50%; top: 69%; }
.action-ring__choice span { display: inline-block; animation: ring-letter-drift 8.7s ease-in-out infinite; }
.action-ring__choice--mechanics span { animation-duration: 10.3s; animation-delay: -3.2s; }
.action-ring__choice--characters span { animation-duration: 9.6s; animation-delay: -6.4s; }
.action-ring__choice--music span { animation-duration: 11.1s; animation-delay: -2.1s; }
@keyframes ring-letter-drift {
  0%, 100% { transform: translate(-.35px, -.55px); }
  45% { transform: translate(.4px, .55px); }
}
@media (prefers-reduced-motion: reduce) { .action-ring__choice span { animation: none; } }
.action-ring__choice:hover, .action-ring__link:hover, .action-ring__back:hover { color: var(--cream); }
.action-ring__choice:focus-visible, .action-ring__link:focus-visible, .action-ring__back:focus-visible { outline: 2px dashed var(--water); outline-offset: 3px; }
.action-ring__submenu { position: absolute; inset: 0; text-align: center; }
.action-ring__submenu > * { position: absolute; left: 50%; translate: -50% -50%; max-width: 42%; }
.action-ring__submenu h3 { top: 30%; max-width: 65%; }
.action-ring__submenu .action-ring__link { top: 51%; width: max-content; }
.action-ring__submenu:has(.action-ring__link:nth-of-type(2)) .action-ring__link:nth-of-type(1) { left: 29%; }
.action-ring__submenu:has(.action-ring__link:nth-of-type(2)) .action-ring__link:nth-of-type(2) { left: 71%; }
/* Four commands form the game's up / left / right / down arrangement. */
#explore-mechanics h3 { top: 20%; }
#explore-mechanics .action-ring__link:nth-of-type(1) { left: 50%; top: 33%; }
#explore-mechanics .action-ring__link:nth-of-type(2) { left: 28%; top: 50%; }
#explore-mechanics .action-ring__link:nth-of-type(3) { left: 72%; top: 50%; }
#explore-mechanics .action-ring__link:nth-of-type(4) { left: 50%; top: 67%; }
#explore-mechanics .action-ring__back { top: 85%; }
.action-ring__submenu h3 { font-family: var(--font); font-weight: 400; font-size: clamp(1.2rem, 5.8cqi, 2.6rem); line-height: 1.1; color: var(--cream); margin: 0 0 1cqi; text-shadow: 2px 2px var(--ink); }
.action-ring__link { font-size: clamp(.9rem, 4.4cqi, 1.8rem); line-height: 1.2; padding: .25rem; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.action-ring__back { top: 83%; font-size: clamp(.85rem, 3.7cqi, 1.4rem); color: var(--water); padding: .25rem .75rem; min-height: 44px; }
.action-ring__hint { text-align: center; color: var(--water); font-size: 1rem; margin: .5rem 0 3rem; }
.ring-fallback { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.ring-fallback a { color: var(--cream); }
.music-page-links { display: flex; justify-content: center; flex-wrap: wrap; margin: 2.5rem auto 0; gap: 1rem; }
@media (max-width: 480px) {
  .action-ring__choice { left: 50%; }
  .action-ring__choice--world { top: 26%; }
  .action-ring__choice--mechanics { top: 43%; }
  .action-ring__choice--characters { top: 59%; }
  .action-ring__choice--music { top: 76%; }
  .action-ring__submenu h3 { margin: 0; }
  .action-ring__hint { font-size: .9rem; }
}
.coop-copy { max-width: 740px; margin: 0 auto; padding: 2rem; }
.coop-copy p { margin: 0 0 1.5rem; }
.coop-copy p:last-child { margin-bottom: 0; }