:root {
  --ilyos-hover-blue: #168eaf;
  --ilyos-hover-green: #48aa63;
  --ilyos-hover-gold: #d2a84b;
  --ilyos-hover-red: #d85b64;
  --ilyos-hover-shadow: 0 12px 24px rgba(28, 73, 89, .18);
}

/* Keep keyboard navigation as clear as pointer hover. */
#setupScreen :is(
  .v64-mode-card,
  .v64-board-card,
  .v64-difficulty-btn,
  .primary-btn,
  .secondary-btn,
  .random-setup-btn,
  .online-tool-btn,
  .resume-local-card button
):focus-visible,
#gameScreen :is(
  button,
  .island-choice,
  .action-card,
  .v60-action-btn,
  .island-option
):focus-visible {
  outline: 3px solid rgba(255, 255, 255, .98) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(22, 142, 175, .42), var(--ilyos-hover-shadow) !important;
}

@media (hover: hover) and (pointer: fine) {
  #setupScreen :is(
    .v64-mode-card,
    .v64-board-card,
    .v64-difficulty-btn,
    .primary-btn,
    .secondary-btn,
    .random-setup-btn,
    .online-tool-btn,
    .resume-local-card button
  ):not(:disabled) {
    cursor: pointer;
    transform-origin: center;
    transition:
      transform 160ms cubic-bezier(.2, .75, .25, 1),
      border-color 160ms ease,
      box-shadow 160ms ease,
      filter 160ms ease !important;
  }

  #setupScreen :is(
    .v64-mode-card,
    .v64-board-card,
    .v64-difficulty-btn
  ):not(:disabled):hover {
    z-index: 3;
    transform: translateY(-4px) scale(1.018) !important;
    border-color: var(--ilyos-hover-blue) !important;
    box-shadow:
      0 0 0 3px rgba(22, 142, 175, .14),
      0 14px 26px rgba(28, 73, 89, .2) !important;
    filter: saturate(1.08) brightness(1.025);
  }

  #setupScreen :is(
    .v64-mode-card,
    .v64-board-card,
    .v64-difficulty-btn
  )[aria-pressed="true"]:hover {
    border-color: var(--ilyos-hover-gold) !important;
    box-shadow:
      0 0 0 3px rgba(210, 168, 75, .2),
      0 14px 28px rgba(112, 85, 20, .2) !important;
  }

  #setupScreen :is(
    .primary-btn,
    .secondary-btn,
    .random-setup-btn,
    .online-tool-btn,
    .resume-local-card button
  ):not(:disabled):hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.07) saturate(1.08) !important;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, .68),
      0 12px 24px rgba(25, 73, 85, .22) !important;
  }

  #gameScreen :is(
    .small-btn,
    .primary-btn,
    .secondary-btn,
    .online-tool-btn,
    .kaykit-control-btn
  ):not(:disabled):not(.v12-panel-toggle) {
    transition:
      transform 140ms cubic-bezier(.2, .75, .25, 1),
      filter 140ms ease,
      box-shadow 140ms ease,
      border-color 140ms ease !important;
  }

  #gameScreen :is(
    .small-btn,
    .primary-btn,
    .secondary-btn,
    .online-tool-btn,
    .kaykit-control-btn
  ):not(:disabled):not(.v12-panel-toggle):hover {
    transform: translateY(-2px) scale(1.025) !important;
    border-color: rgba(143, 233, 255, .9) !important;
    filter: brightness(1.12) saturate(1.08) !important;
    box-shadow:
      0 0 0 2px rgba(94, 211, 240, .2),
      0 8px 18px rgba(5, 24, 36, .28) !important;
  }

  body[data-visual-mode="alternative"] :is(
    .island-choice,
    .action-card,
    .v60-action-btn,
    .island-option
  ):not(:disabled):not(.disabled) {
    cursor: pointer;
    transition:
      transform 160ms cubic-bezier(.2, .75, .25, 1),
      border-color 160ms ease,
      box-shadow 160ms ease,
      filter 160ms ease !important;
  }

  body[data-visual-mode="alternative"] :is(
    .island-choice,
    .action-card,
    .v60-action-btn,
    .island-option
  ):not(:disabled):not(.disabled):hover {
    z-index: 5;
    transform: translateY(-3px) scale(1.02) !important;
    border-color: rgba(105, 224, 249, .9) !important;
    filter: brightness(1.08) saturate(1.1) !important;
    box-shadow:
      0 0 0 3px rgba(56, 189, 221, .15),
      0 12px 22px rgba(5, 24, 36, .28) !important;
  }

  body[data-visual-mode="alternative"] :is(
    .island-choice.active,
    .action-card.selected,
    .v60-action-btn.selected,
    .island-option.selected
  ):hover {
    border-color: #ffe783 !important;
    box-shadow:
      0 0 0 3px rgba(255, 218, 78, .25),
      0 0 22px rgba(255, 213, 69, .48),
      0 12px 22px rgba(5, 24, 36, .25) !important;
  }

  body[data-visual-mode="alternative"] .cell:is(
    .reachable,
    .valid,
    .valid-target,
    .move-valid,
    .push-valid,
    .magic-valid
  ):hover {
    z-index: 24 !important;
    cursor: pointer;
    outline: 4px solid rgba(224, 255, 239, .98) !important;
    outline-offset: -5px !important;
    filter: brightness(1.2) saturate(1.18) !important;
    box-shadow:
      inset 0 0 0 7px rgba(71, 201, 130, .72),
      0 0 20px rgba(71, 231, 151, .76) !important;
  }

  body[data-visual-mode="alternative"] .cell:is(.invalid, .invalid-target, .is-invalid):hover {
    cursor: not-allowed;
    outline-color: rgba(255, 232, 234, .98) !important;
    filter: brightness(1.08) saturate(1.12) !important;
    box-shadow:
      inset 0 0 0 7px rgba(216, 91, 100, .7),
      0 0 18px rgba(216, 91, 100, .58) !important;
  }

  body[data-visual-mode="alternative"] .kaykit-cursor-label.visible {
    transform: translateX(-50%) translateY(-4px) scale(1.04) !important;
    border-width: 2px !important;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, .14),
      0 12px 28px rgba(0, 0, 0, .38) !important;
  }

  body[data-visual-mode="alternative"] .kaykit-cursor-label[data-kind="ally"] {
    border-color: #54ead4 !important;
    color: #e7fffb !important;
  }

  body[data-visual-mode="alternative"] .kaykit-cursor-label[data-kind="enemy"] {
    border-color: #ff777b !important;
    color: #fff0f1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #setupScreen *,
  #gameScreen * {
    scroll-behavior: auto !important;
  }

  #setupScreen :is(button, .v64-mode-card, .v64-board-card, .v64-difficulty-btn),
  #gameScreen :is(button, .island-choice, .action-card, .v60-action-btn, .island-option),
  .kaykit-cursor-label {
    transition-duration: .001ms !important;
  }

  #setupScreen :is(button, .v64-mode-card, .v64-board-card, .v64-difficulty-btn):hover,
  #gameScreen :is(button, .island-choice, .action-card, .v60-action-btn, .island-option):hover {
    transform: none !important;
  }
}