/* Fine pointer depth is restrained; foreground props never translate. */
.cartoon-title > .title-depth {
  position: absolute;
  inset: -6px;
  z-index: -2;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  mask-image: linear-gradient(#000 0 45%, transparent 65%);
  translate: var(--far-x, 0px) var(--far-y, 0px);
  transition: translate 0.25s ease-out;
}
#screens .cartoon-title > .title-cast {
  translate: var(--cast-x, 0px) var(--cast-y, 0px);
  transition: translate 0.25s ease-out;
}
.club-layered button .char-wrap {
  rotate: var(--hover-tilt, 0deg);
  transition: rotate 0.18s ease-out;
}
.blink-frame {
  opacity: 0;
  transition: opacity 45ms linear;
  pointer-events: none;
}
.raster-char.is-blinking .blink-frame {
  opacity: 1;
}
.opp-portrait .raster-char > .portrait > .blink-frame {
  x: -12px;
  y: -1px;
  width: 144px;
  height: 146px;
}
.expression-outgoing {
  pointer-events: none;
}
.opp-card.last-piece {
  border-color: #e4ff35;
}
.opp-card.last-piece .opp-count {
  color: #e4ff35;
}
.opp-card.last-piece .portrait {
  transform: translateY(-2px) rotate(-2deg);
}
.result-screen .result-title {
  animation: result-reveal 0.26s ease-out both;
}
@keyframes result-reveal {
  from {
    opacity: 0.3;
    translate: 0 7px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) {
    transform: none;
    translate: 0 -2px;
  }
  .icon-btn:hover:not(:disabled) {
    translate: 0 -2px;
  }
  .wizard-person:hover .wizard-nameplate {
    border-color: #fff9f1;
  }
}
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled) {
  transform: none;
  translate: 0 2px;
  box-shadow: 0 1px 0 #140b24;
}
@media (hover: none) {
  .cartoon-title > .title-depth {
    display: none;
  }
  #screens .cartoon-title > .title-cast {
    translate: 0 0;
  }
}
.reduced .title-depth {
  display: none;
}
.reduced .char-wrap,
.reduced .btn,
.reduced .icon-btn,
.reduced .portrait,
.reduced .title-cast {
  animation: none !important;
  transition: none !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .title-depth {
    display: none;
  }
  .char-wrap,
  .btn,
  .icon-btn,
  .portrait,
  .title-cast {
    animation: none !important;
    transition: none !important;
    rotate: 0deg !important;
    translate: 0 0 !important;
  }
}
.raster-char.is-blinking > .portrait > image:not(.blink-frame) {
  opacity: 0;
}
@media (orientation: portrait) {
  .cartoon-title > .title-depth {
    display: none;
  }
}
/* Blink frames switch at full opacity: eyelids close without fading the character. */
.blink-frame {
  transition: none;
}
.char-bento {
  --rest-duration: 4.8s;
}
.char-olivia {
  --rest-duration: 4.2s;
}
.char-lina {
  --rest-duration: 5.3s;
}
.raster-char > .portrait {
  animation-name: character-rest;
  animation-duration: var(--rest-duration, 4.8s);
}
@keyframes character-rest {
  0%,
  100% {
    scale: 1;
    translate: 0 0;
  }
  50% {
    scale: 1.009;
    translate: 0 -0.6px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .wizard-option:not(.wizard-person):hover {
    translate: 0 -2px;
  }
}
.wizard-option:active {
  translate: 0 1px;
}
.reduced .wizard-option {
  translate: 0 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .wizard-option {
    translate: 0 0 !important;
  }
}

/* End of game/assets/feel-BexCRfyg.css */