/* MixUp v10.9 Motion Kit: one lightweight, dependency-free interaction language.
   All effects are decorative: never move a question target while a touch is held. */
:root{--mix-motion-fast:165ms;--mix-motion-normal:240ms;--mix-motion-ease:cubic-bezier(.2,.75,.3,1)}
/* Global tap feedback keeps form actions responsive without overriding game-board positions. */
:where(button,.btn,[role="button"]):not(:disabled):not([aria-disabled="true"]){
  -webkit-tap-highlight-color:transparent;
  transition-property:background-color,border-color,color,box-shadow,filter,opacity;
  transition-duration:var(--mix-motion-fast);transition-timing-function:var(--mix-motion-ease);
}
:where(button,.btn,[role="button"]):not(:disabled):not([aria-disabled="true"]):active{filter:brightness(.94)}
:where(button,.btn,[role="button"]):focus-visible{
  outline:3px solid #1f9ee8!important;outline-offset:3px!important;
}
/* The action-ripple is a single short-lived span, inserted only on real input. */
.mixui-ripple-host{position:relative!important;overflow:hidden}
.mixui-ripple{position:absolute;z-index:5;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,#ffffffd9 0%,#ffffff5c 44%,#ffffff00 72%);
  pointer-events:none!important;transform:translate(-50%,-50%) scale(.15);
  animation:mixui-press-wave 480ms ease-out forwards;mix-blend-mode:screen}
@keyframes mixui-press-wave{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.15)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(12)}
}
/* Interactive game tiles, tabs and big call-to-action buttons share a lift effect. */
:where(.ff-mini-card,.arcade-main,.mayhem-main-button,.v109-pop-tab,
       .v109-party-options button,.mixup-points-bottom button,.mixup-reward button,
       .v109-puzzle-buttons button){
  transition:transform var(--mix-motion-normal) var(--mix-motion-ease),
   box-shadow var(--mix-motion-normal) var(--mix-motion-ease),
   border-color var(--mix-motion-fast),filter var(--mix-motion-fast)!important;
  will-change:auto;
}
@media(hover:hover) and (pointer:fine){
  :where(.ff-mini-card,.arcade-main,.mayhem-main-button,.v109-pop-tab,
         .v109-party-options button,.mixup-points-bottom button,
         .v109-puzzle-buttons button):not(:disabled):hover{
    transform:translateY(-3px);filter:brightness(1.05);
    box-shadow:0 9px 25px #44368a38;
  }
}
:where(.ff-mini-card,.arcade-main,.mayhem-main-button,.v109-pop-tab,
       .v109-party-options button,.mixup-points-bottom button,
       .v109-puzzle-buttons button):not(:disabled):active{
  transform:translateY(1px) scale(.984);transition-duration:90ms!important;
}
/* A sliding-light active treatment for the app's existing, functional topic tabs. */
.v109-pop-tab{position:relative;overflow:hidden;border-radius:17px!important}
.v109-pop-tab[aria-pressed="true"],.v109-pop-tab.active{
  box-shadow:0 7px 23px #554bb647!important;
  animation:mixui-tab-selected 260ms var(--mix-motion-ease) both;
}
.v109-pop-tab.active::after{content:"";position:absolute;bottom:0;left:17%;width:66%;
  height:3px;background:#defdff;border-radius:9px;
  box-shadow:0 0 11px #bbfaff;pointer-events:none}
@keyframes mixui-tab-selected{from{filter:brightness(.97)}to{filter:brightness(1.06)}}
/* Animated entry of the actual question cards, without looping the content. */
.v103-question-card,.v98-question-shell .gameinner,.v109-kid-stage,
.v109-party-panel,.mayhem-puzzle{
  animation:mixui-card-appear 285ms var(--mix-motion-ease) both;
}
@keyframes mixui-card-appear{
  from{opacity:.65;translate:0 8px}
  to{opacity:1;translate:0 0}
}
/* A small floating, non-interactive challenge label — never covers answer choices. */
.v103-question-card .gameinner,.v98-question-shell .gameinner,
.v109-kid-stage{position:relative}
.mixui-question-pill{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
  width:max-content;max-width:calc(100% - 28px);margin:0 0 11px;
  padding:6px 13px;border:1px solid #c8b5f8;border-radius:999px;
  background:linear-gradient(122deg,#fff,#f3eaff 65%,#e7f7ff);
  box-shadow:0 5px 15px #5d3eae30;color:#5440a0;
  font:800 10px/1.35 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  pointer-events:none;user-select:none;
  animation:mixui-pill-in 320ms var(--mix-motion-ease) both;
}
.mixui-question-pill::before{content:"✦";font-size:15px;color:#a367df;line-height:1}
@keyframes mixui-pill-in{from{opacity:0;transform:translateY(7px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}}
/* Answer options get depth and feedback, but remain fixed in place while tapping. */
:where(.v103-question-card,.v98-question-shell,.v109-kid-stage)
 :is(button[data-act*="answer"],button[data-act*="choice"],button[data-act*="pick"]){
  border-radius:15px;box-shadow:0 4px 12px #493a8821;
}
:where(.v103-question-card,.v98-question-shell,.v109-kid-stage)
 :is(button[data-act*="answer"],button[data-act*="choice"],button[data-act*="pick"]):not(:disabled):active{
  box-shadow:inset 0 2px 9px #453c5d30,0 2px 6px #5f519633;
}
/* Avoid both excess movement and any accessibility penalty. */
@media(prefers-reduced-motion:reduce){
  :root{--mix-motion-fast:0ms;--mix-motion-normal:0ms}
  .mixui-ripple{display:none!important}
  :where(.ff-mini-card,.arcade-main,.mayhem-main-button,.v109-pop-tab,
         .v109-party-options button,.mixup-points-bottom button,
         .v109-puzzle-buttons button):not(:disabled):hover,
  :where(.ff-mini-card,.arcade-main,.mayhem-main-button,.v109-pop-tab,
         .v109-party-options button,.mixup-points-bottom button,
         .v109-puzzle-buttons button):not(:disabled):active{transform:none!important}
  .v103-question-card,.v98-question-shell .gameinner,.v109-kid-stage,
  .v109-party-panel,.mayhem-puzzle,.mixui-question-pill,.v109-pop-tab.active{
    animation:none!important;translate:none!important;transition:none!important
  }
}