/* Interaction polish only. Layout, typography and game state belong to the app. */
body.approved-ui .approved-motion-button {
  transition: transform 220ms cubic-bezier(.2,.85,.3,1.18),
    box-shadow 240ms ease, filter 200ms ease,
    background-color 180ms ease, border-color 180ms ease !important;
  -webkit-tap-highlight-color: transparent;
}
body.approved-ui .approved-motion-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent) 75%, var(--ink)) !important;
  outline-offset: 4px !important;
}
body.approved-ui .approved-motion-button:not(:disabled):active {
  transform: translateY(1px) scale(.98) !important;
  transition-duration: 85ms !important;
  box-shadow: inset 0 2px 5px #3d16321c, 0 2px 5px #3d163212 !important;
}
body.approved-ui :is(#next,#back,#skip,#mode-next,#mode-back,#mode-skip,
  #approved-date-start,#mode-start,#tutorial-next,#mode-tutorial-next,
  #date-name-save,#mode-name-save,#pay).approved-motion-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 1px #ffffffaa, 0 5px 12px #442b251a !important;
}
body.approved-ui :is(#next,#mode-next,#approved-date-start,#mode-start,
  #tutorial-next,#mode-tutorial-next,#date-name-save,#mode-name-save,#pay)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -55% auto -55% -65%;
  width: 42%;
  opacity: 0;
  transform: translateX(-140%) rotate(12deg);
  background: linear-gradient(90deg,transparent,#ffffff50,transparent);
  mix-blend-mode: screen;
}
@media (hover:hover) and (pointer:fine) {
  body.approved-ui .approved-motion-button:not(:disabled):not(.banner-switch):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.025);
    box-shadow: inset 0 1px 1px #ffffffaa, 0 8px 18px #442b2523 !important;
  }
  body.approved-ui :is(#next,#back,#skip,#mode-next,#mode-back,#mode-skip,
    #approved-date-start,#mode-start,#tutorial-next,#mode-tutorial-next,
    #date-name-save,#mode-name-save,#pay).approved-motion-button:not(:disabled):hover {
    transform: translateY(-3px) !important;
    box-shadow: inset 0 1px 2px #ffffffcc, 0 11px 24px #442b2528,
      0 3px 14px color-mix(in srgb,var(--ui-accent) 20%,transparent) !important;
  }
  body.approved-ui :is(#next,#mode-next,#approved-date-start,#mode-start,
    #tutorial-next,#mode-tutorial-next,#date-name-save,#mode-name-save,#pay):not(:disabled):hover::after {
    animation: approved-button-sheen 650ms cubic-bezier(.2,.6,.3,1) both;
  }
  body.approved-ui .approved-tabs .approved-motion-button:hover,
  body.approved-ui .approved-brand.approved-motion-button:hover,
  body.approved-ui .banner-switch.approved-motion-button:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Press wins over hover; the hit area is never replaced by a decorative layer. */
  body.approved-ui .approved-motion-button:not(:disabled):active,
  body.approved-ui :is(#next,#back,#skip,#mode-next,#mode-back,#mode-skip,
    #approved-date-start,#mode-start,#tutorial-next,#mode-tutorial-next,
    #date-name-save,#mode-name-save,#pay).approved-motion-button:not(:disabled):active {
    transform: translateY(1px) scale(.98) !important;
    box-shadow: inset 0 2px 5px #3d16321c, 0 2px 5px #3d163212 !important;
  }
}
body.approved-ui .approved-tabs .approved-motion-button:active,
body.approved-ui .banner-switch.approved-motion-button:active,
body.approved-ui .approved-brand.approved-motion-button:active {
  transform: none !important;
}
body.approved-ui .approved-motion-button:disabled {
  transform: none !important;
  filter: none !important;
}
@keyframes approved-button-sheen {
  0% { opacity:0; transform:translateX(-140%) rotate(12deg); }
  28% { opacity:.72; }
  100% { opacity:0; transform:translateX(420%) rotate(12deg); }
}
@media (prefers-reduced-motion:reduce) {
  body.approved-ui .approved-motion-button,
  body.approved-ui .approved-motion-button:not(:disabled):hover,
  body.approved-ui .approved-motion-button:not(:disabled):active,
  body.approved-ui :is(#next,#back,#skip,#mode-next,#mode-back,#mode-skip,
    #approved-date-start,#mode-start,#tutorial-next,#mode-tutorial-next,
    #date-name-save,#mode-name-save,#pay).approved-motion-button:not(:disabled):hover,
  body.approved-ui :is(#next,#back,#skip,#mode-next,#mode-back,#mode-skip,
    #approved-date-start,#mode-start,#tutorial-next,#mode-tutorial-next,
    #date-name-save,#mode-name-save,#pay).approved-motion-button:not(:disabled):active {
    transform:none !important;
    transition:none !important;
  }
  body.approved-ui .approved-motion-button::after { animation:none !important; opacity:0 !important; }
}