:root {
  --trfx-ink: #1e2a5a;
  --trfx-pink: #ff6fae;
  --trfx-yellow: #ffd83d;
  --trfx-blue: #5f8dff;
  --trfx-cream: #fdf8ec;
}

#tr-bg {
  overflow: hidden;
  background-color: var(--trfx-cream);
  background-image:
    radial-gradient(circle at 8% 14%, rgb(255 173 203 / 22%) 0 80px, transparent 81px),
    radial-gradient(circle at 92% 74%, rgb(123 216 196 / 17%) 0 110px, transparent 111px),
    linear-gradient(rgb(30 42 90 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(30 42 90 / 5%) 1px, transparent 1px);
  background-size: auto, auto, 20px 20px, 20px 20px;
}

#tr-bg::before {
  position: absolute;
  width: 170vmax;
  height: 170vmax;
  left: 50%;
  top: 49%;
  z-index: -1;
  content: '';
  opacity: 0;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgb(255 111 174 / 22%) 0deg 10deg,
    rgb(255 216 61 / 18%) 10deg 20deg,
    rgb(95 141 255 / 19%) 20deg 30deg,
    rgb(85 216 193 / 18%) 30deg 40deg
  );
  transition: opacity 350ms ease;
}

#tr-bg.trfx-sunburst-on::before {
  opacity: .82;
  animation: trfx-spin 28s linear infinite;
}

#tr-bg.trfx-fever-on::before {
  opacity: 1;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(255 89 147 / 32%) 0deg 9deg,
    rgb(255 216 61 / 31%) 9deg 18deg,
    rgb(81 222 192 / 29%) 18deg 27deg,
    rgb(93 133 255 / 30%) 27deg 36deg,
    rgb(180 115 255 / 27%) 36deg 45deg
  );
  animation-duration: 9s;
}

#tr-fx-layer {
  contain: layout style;
  overflow: hidden;
}

.trfx-mascot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 0 rgb(30 42 90 / 20%));
}

.trfx-mascot-body {
  transform-origin: 90px 150px;
  animation: trfx-breathe 2.2s ease-in-out infinite;
}

.trfx-head,
.trfx-body,
.trfx-tail,
.trfx-ear,
.trfx-arm {
  fill: #f3bd68;
  stroke: var(--trfx-ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trfx-ear { fill: #d99039; }
.trfx-belly,
.trfx-muzzle { fill: #fff0c9; }
.trfx-muzzle { stroke: #d99039; stroke-width: 2; }
.trfx-scarf,
.trfx-scarf-tail { fill: #f59e0b; stroke: var(--trfx-ink); stroke-width: 4; stroke-linejoin: round; }
.trfx-tail { fill: none; stroke-width: 11; }
.trfx-shadow { fill: rgb(30 42 90 / 16%); }
.trfx-eye { fill: var(--trfx-ink); }
.trfx-cheek { fill: #f27f73; opacity: .62; }
.trfx-nose { fill: #58341d; stroke: var(--trfx-ink); stroke-width: 1.5; }
.trfx-happy-eye { display: none; fill: none; stroke: var(--trfx-ink); stroke-width: 4.5; stroke-linecap: round; }
.trfx-mouth { fill: none; stroke: var(--trfx-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.trfx-mouth-happy { display: none; fill: #743921; }
.trfx-mouth-sad { display: none; }
.trfx-tongue { display: none; fill: #ff7f94; stroke: var(--trfx-ink); stroke-width: 2; }
.trfx-blaze { fill: #fff5d8; }
.trfx-shine { fill: none; stroke: #fff0c9; stroke-width: 6; stroke-linecap: round; }

/* Ayane-ko: the cat character used by the mini trial. */
.trfx-character-cat .trfx-head,
.trfx-character-cat .trfx-body,
.trfx-character-cat .trfx-arm { fill: #f5d5a7; }
.trfx-character-cat .trfx-ear { fill: #edc58f; }
.trfx-character-cat .trfx-ear-inner { fill: #f2a5b8; stroke: var(--trfx-ink); stroke-width: 2.5; stroke-linejoin: round; }
.trfx-character-cat .trfx-belly,
.trfx-character-cat .trfx-muzzle { fill: #fffaf0; }
.trfx-character-cat .trfx-muzzle { stroke: #e4b879; stroke-width: 2; }
.trfx-character-cat .trfx-tail { fill: none; stroke: #edc58f; stroke-width: 11; }
.trfx-character-cat .trfx-bow,
.trfx-character-cat .trfx-bow-knot { fill: #b79cff; stroke: var(--trfx-ink); stroke-width: 4; stroke-linejoin: round; }
.trfx-character-cat .trfx-bow-knot { stroke-width: 3; }
.trfx-character-cat .trfx-nose { fill: #d86f8d; }
.trfx-character-cat .trfx-whiskers { fill: none; stroke: var(--trfx-ink); stroke-width: 2.5; stroke-linecap: round; }
.trfx-character-cat .trfx-forehead-mark { fill: none; stroke: #d7a663; stroke-width: 3; stroke-linecap: round; }
.trfx-character-cat .trfx-shine { stroke: #fff8e8; }

.trfx-mascot[data-state='happy'] .trfx-mouth-idle,
.trfx-mascot[data-state='cheer'] .trfx-mouth-idle,
.trfx-mascot[data-state='fever'] .trfx-mouth-idle,
.trfx-mascot[data-state='sad'] .trfx-mouth-idle { display: none; }
.trfx-mascot[data-state='happy'] .trfx-mouth-happy,
.trfx-mascot[data-state='cheer'] .trfx-mouth-happy,
.trfx-mascot[data-state='fever'] .trfx-mouth-happy { display: block; }
.trfx-mascot[data-state='happy'] .trfx-eye,
.trfx-mascot[data-state='cheer'] .trfx-eye,
.trfx-mascot[data-state='fever'] .trfx-eye { display: none; }
.trfx-mascot[data-state='happy'] .trfx-happy-eye,
.trfx-mascot[data-state='cheer'] .trfx-happy-eye,
.trfx-mascot[data-state='fever'] .trfx-happy-eye,
.trfx-mascot[data-state='happy'] .trfx-tongue,
.trfx-mascot[data-state='cheer'] .trfx-tongue,
.trfx-mascot[data-state='fever'] .trfx-tongue { display: block; }
.trfx-mascot[data-state='sad'] .trfx-mouth-sad { display: block; }
.trfx-mascot[data-state='sad'] .trfx-ear-l { transform: rotate(12deg) translateY(4px); transform-origin: 50px 48px; }
.trfx-mascot[data-state='sad'] .trfx-ear-r { transform: rotate(-12deg) translateY(4px); transform-origin: 132px 48px; }
.trfx-character-cat[data-state='sad'] .trfx-ear-inner-l { transform: rotate(12deg) translateY(4px); transform-origin: 50px 48px; }
.trfx-character-cat[data-state='sad'] .trfx-ear-inner-r { transform: rotate(-12deg) translateY(4px); transform-origin: 132px 48px; }
.trfx-mascot[data-state='happy'] .trfx-mascot-body { animation: trfx-happy 620ms cubic-bezier(.2,.8,.3,1); }
.trfx-mascot[data-state='sad'] .trfx-mascot-body { animation: trfx-sad 800ms ease both; }
.trfx-mascot[data-state='cheer'] .trfx-mascot-body,
.trfx-mascot[data-state='fever'] .trfx-mascot-body { animation: trfx-cheer 560ms ease-in-out infinite alternate; }
.trfx-mascot[data-state='cheer'] .trfx-arm-l,
.trfx-mascot[data-state='fever'] .trfx-arm-l { transform: rotate(42deg) translate(-13px,-20px); transform-origin: 54px 100px; }
.trfx-mascot[data-state='cheer'] .trfx-arm-r,
.trfx-mascot[data-state='fever'] .trfx-arm-r { transform: rotate(-42deg) translate(13px,-20px); transform-origin: 126px 100px; }
.trfx-mascot[data-state='fever'] .trfx-tail { animation: trfx-tail-wag 150ms ease-in-out infinite alternate; transform-origin: 137px 118px; }
.trfx-mascot[data-state='fever'] .trfx-scarf-tail { animation: trfx-scarf-wave 240ms ease-in-out infinite alternate; transform-origin: 108px 120px; }
.trfx-character-cat[data-state='fever'] .trfx-bow-l { animation: trfx-bow-wave 210ms ease-in-out infinite alternate; transform-origin: 64px 111px; }
.trfx-character-cat[data-state='fever'] .trfx-bow-r { animation: trfx-bow-wave 210ms -105ms ease-in-out infinite alternate-reverse; transform-origin: 64px 111px; }

.trfx-garland {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: -3%;
  width: 106%;
  height: 37px;
  display: flex;
  justify-content: space-around;
  border-top: 3px solid var(--trfx-ink);
  transform: rotate(-1deg);
  pointer-events: none;
  animation: trfx-garland-in 520ms cubic-bezier(.2,.9,.2,1.3) both;
}

.trfx-garland i {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 21px solid var(--flag);
  filter: drop-shadow(0 2px 0 var(--trfx-ink));
  transform-origin: top center;
  animation: trfx-flag 1.2s calc(var(--i) * -90ms) ease-in-out infinite alternate;
}

.trfx-friend {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  width: 58px;
  height: 56px;
  pointer-events: none;
  animation: trfx-friend-in 600ms cubic-bezier(.15,.85,.25,1.35) both, trfx-friend-hop 1.5s 650ms ease-in-out infinite;
}
.trfx-friend svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgb(30 42 90 / 20%)); }
.trfx-friend-0 { left: 2%; }
.trfx-friend-1 { right: 2%; animation-delay: 80ms, 730ms; }
.trfx-friend-2 { left: 15%; width: 45px; height: 43px; animation-delay: 140ms, 790ms; }
.trfx-friend-3 { right: 16%; width: 45px; height: 43px; animation-delay: 210ms, 860ms; }
.trfx-friend-4 { left: -5%; bottom: 43px; width: 40px; height: 39px; animation-delay: 260ms, 910ms; }
.trfx-friend-5 { right: -5%; bottom: 42px; width: 40px; height: 39px; animation-delay: 330ms, 980ms; }

.trfx-ambient { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.trfx-ambient i {
  position: absolute;
  left: calc(4% + (var(--i) * 7%));
  bottom: -12px;
  color: var(--c);
  -webkit-text-stroke: 1px var(--trfx-ink);
  font: 900 16px/1 sans-serif;
  animation: trfx-ambient-up calc(1.9s + (var(--i) * 70ms)) calc(var(--i) * -170ms) linear infinite;
}

.trfx-particle {
  position: fixed;
  z-index: 51;
  display: block;
  width: var(--trfx-size);
  height: var(--trfx-size);
  margin: calc(var(--trfx-size) * -.5);
  color: var(--trfx-color);
  background: var(--trfx-color);
  pointer-events: none;
  will-change: transform, opacity;
  animation: trfx-particle var(--trfx-life) var(--trfx-delay) cubic-bezier(.12,.72,.32,1) both;
}
.trfx-confetti { border: 1.5px solid var(--trfx-ink); border-radius: 1px; }
.trfx-rain { border: 1px solid var(--trfx-ink); border-radius: 2px; animation-name: trfx-rain; animation-timing-function: linear; }
.trfx-star,
.trfx-heart,
.trfx-note,
.trfx-coin {
  width: auto;
  height: auto;
  background: transparent;
  font: 900 var(--trfx-size)/1 sans-serif;
  -webkit-text-stroke: 1.5px var(--trfx-ink);
  paint-order: stroke fill;
}
.trfx-coin {
  color: #ffd331;
  -webkit-text-stroke-width: 2px;
  text-shadow: inset 0 0 0 2px #fff5a2;
}

.trfx-burst-ring {
  position: fixed;
  z-index: 50;
  width: 40px;
  height: 40px;
  margin: -20px;
  border: 10px double var(--trfx-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(255 95 158 / 75%);
  pointer-events: none;
  animation: trfx-ring 720ms ease-out both;
}

.trfx-gain {
  position: fixed;
  z-index: 53;
  max-width: 92vw;
  transform: translate(-50%, -50%);
  color: var(--trfx-yellow);
  font-family: 'M PLUS Rounded 1c', system-ui, sans-serif;
  font-size: clamp(30px, 9vw, 50px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.025em;
  white-space: nowrap;
  -webkit-text-stroke: 5px var(--trfx-ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #ff6fae;
  pointer-events: none;
  animation: trfx-gain 1.05s cubic-bezier(.12,.75,.25,1) both;
}
.trfx-gain-tier-3,
.trfx-gain-tier-4 { font-size: clamp(36px, 11vw, 58px); }
.trfx-gain-tier-5 { font-size: clamp(42px, 13vw, 68px); text-shadow: 0 6px 0 #ff6fae, 0 10px 0 #5f8dff; }

.trfx-question-in { animation: trfx-question-in 520ms cubic-bezier(.15,.8,.2,1.25) both; }
.trfx-correct-pop { animation: trfx-correct-pop 600ms cubic-bezier(.16,.8,.3,1.3) both; }
.trfx-wrong-shake { position: relative; animation: trfx-wrong 480ms ease both; }
.trfx-wrong-mark {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 12px;
  transform: translateY(-53%) rotate(-9deg);
  color: #ff4f78;
  font: 900 2.2rem/1 'M PLUS Rounded 1c', sans-serif;
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  pointer-events: none;
}
.trfx-dopa-tick { animation: trfx-dopa 480ms cubic-bezier(.2,.9,.3,1.4) both; }
.trfx-screen-shake body { animation: trfx-screen-shake 340ms ease; }

.trfx-stamp {
  position: fixed;
  z-index: 56;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.trfx-stamp-inner {
  position: relative;
  max-width: 96vw;
  color: var(--trfx-yellow);
  font: 900 clamp(48px, 17vw, 94px)/.9 'M PLUS Rounded 1c', system-ui, sans-serif;
  letter-spacing: -.08em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 7px var(--trfx-ink);
  paint-order: stroke fill;
  filter: drop-shadow(0 8px 0 #ff6fae);
  animation: trfx-stamp 1.08s cubic-bezier(.16,.86,.28,1.2) both;
}

.trfx-stamp-start .trfx-stamp-inner::before,
.trfx-stamp-score .trfx-stamp-inner::before,
.trfx-stamp-unit .trfx-stamp-inner::before,
.trfx-stamp-end .trfx-stamp-inner::before {
  position: absolute;
  z-index: -1;
  inset: -45px -80px;
  content: '';
  background: repeating-conic-gradient(from 0deg, rgb(255 216 61 / 70%) 0 8deg, transparent 8deg 18deg);
  border-radius: 50%;
  animation: trfx-spin 5s linear infinite;
}

.trfx-stamp-last { transform: rotate(-7deg); }
.trfx-stamp-last::before {
  position: absolute;
  left: -12vw;
  right: -12vw;
  height: clamp(105px, 31vw, 150px);
  content: '';
  background: repeating-linear-gradient(135deg, #1e2a5a 0 18px, #2f3d78 18px 36px);
  border-top: 7px solid #ff6fae;
  border-bottom: 7px solid #ff6fae;
  box-shadow: 0 7px 0 rgb(30 42 90 / 24%);
  animation: trfx-band 1.08s cubic-bezier(.18,.8,.25,1) both;
}
.trfx-stamp-last .trfx-stamp-inner {
  color: #fff;
  font-size: clamp(37px, 12vw, 68px);
  -webkit-text-stroke-width: 2px;
  filter: none;
}
.trfx-stamp-score .trfx-stamp-inner,
.trfx-stamp-end .trfx-stamp-inner { color: #ff69a9; font-size: clamp(68px, 24vw, 126px); filter: drop-shadow(0 8px 0 #fff) drop-shadow(0 13px 0 #5f8dff); }
.trfx-stamp-unit .trfx-stamp-inner {
  padding: .16em .3em .22em;
  color: #fff;
  font-size: clamp(42px, 14vw, 78px);
  letter-spacing: -.055em;
  -webkit-text-stroke-width: 6px;
  background: #b79cff;
  border: 5px solid #fff;
  border-radius: .42em;
  box-shadow: 0 0 0 6px var(--trfx-ink), 0 12px 0 #8065c9;
  filter: none;
}
.trfx-stamp-unit .trfx-stamp-inner::before { inset: -65px -100px; }

.trfx-cheer-big {
  position: fixed;
  z-index: 55;
  left: 50%;
  bottom: -32vh;
  width: min(92vw, 470px);
  height: min(86vw, 440px);
  transform: translateX(-50%);
  pointer-events: none;
  animation: trfx-cheer-big 1.6s cubic-bezier(.16,.82,.22,1.1) both;
}
.trfx-cheer-big .trfx-mascot-body { animation: none; }
.trfx-cheer-big .trfx-arm-l { transform: rotate(54deg) translate(-16px,-25px); transform-origin: 54px 100px; }
.trfx-cheer-big .trfx-arm-r { transform: rotate(-54deg) translate(16px,-25px); transform-origin: 126px 100px; }
.trfx-cheer-big .trfx-mouth-idle { display: none; }
.trfx-cheer-big .trfx-mouth-happy,
.trfx-cheer-big .trfx-tongue,
.trfx-cheer-big .trfx-happy-eye { display: block; }
.trfx-cheer-big .trfx-eye { display: none; }

.trfx-result-in { animation: trfx-result 620ms cubic-bezier(.15,.85,.24,1.25) both; }

.trfx-reduced-motion #tr-bg::before,
.trfx-reduced-motion .trfx-mascot-body,
.trfx-reduced-motion .trfx-garland i,
.trfx-reduced-motion .trfx-friend,
.trfx-reduced-motion .trfx-ambient i { animation: none !important; }
.trfx-reduced-motion .trfx-question-in,
.trfx-reduced-motion .trfx-correct-pop,
.trfx-reduced-motion .trfx-wrong-shake,
.trfx-reduced-motion .trfx-dopa-tick,
.trfx-reduced-motion .trfx-result-in { animation: trfx-fade 300ms ease both !important; }
.trfx-reduced-motion .trfx-stamp-inner { animation: trfx-stamp-reduced 540ms ease both !important; }
.trfx-reduced-motion .trfx-stamp-last::before { animation: trfx-fade 540ms ease both !important; }
.trfx-reduced-motion .trfx-cheer-big { animation: trfx-cheer-reduced 760ms ease both !important; }
.trfx-reduced-motion .trfx-gain { animation: trfx-gain-reduced 620ms ease both !important; }

@keyframes trfx-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes trfx-breathe { 50% { transform: translateY(-3px) scale(1.015,.985); } }
@keyframes trfx-happy { 35% { transform: translateY(-18px) rotate(-4deg) scale(1.07,.94); } 62% { transform: translateY(2px) rotate(3deg) scale(.96,1.05); } }
@keyframes trfx-sad { 35% { transform: translateY(5px) scale(1.05,.93) rotate(-2deg); } 65% { transform: translateY(5px) scale(1.05,.93) rotate(2deg); } 100% { transform: translateY(4px) scale(1.04,.94); } }
@keyframes trfx-cheer { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-10px) rotate(3deg); } }
@keyframes trfx-tail-wag { from { transform: rotate(-13deg); } to { transform: rotate(15deg); } }
@keyframes trfx-scarf-wave { to { transform: rotate(8deg) translateY(-2px); } }
@keyframes trfx-bow-wave { to { transform: rotate(9deg) scale(1.05); } }
@keyframes trfx-garland-in { from { opacity: 0; transform: translateY(-24px) rotate(-1deg); } }
@keyframes trfx-flag { to { transform: rotateY(24deg) rotate(3deg); } }
@keyframes trfx-friend-in { from { opacity: 0; transform: translateY(55px) scale(.4); } }
@keyframes trfx-friend-hop { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes trfx-ambient-up { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15%,75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-125px) rotate(120deg); } }
@keyframes trfx-particle { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.4); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--trfx-x),var(--trfx-y),0) rotate(var(--trfx-r)) scale(1); } }
@keyframes trfx-rain { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); } 8%,84% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--trfx-x),var(--trfx-y),0) rotate(var(--trfx-r)); } }
@keyframes trfx-ring { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(4.2); } }
@keyframes trfx-gain { 0% { opacity: 0; transform: translate(-50%,-20%) scale(.25) rotate(-8deg); } 20% { opacity: 1; transform: translate(-50%,-70%) scale(1.12) rotate(2deg); } 72% { opacity: 1; transform: translate(-50%,-125%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-180%) scale(.82); } }
@keyframes trfx-question-in { from { opacity: 0; transform: translateY(42px) scale(.93); } 70% { transform: translateY(-5px) scale(1.015); } }
@keyframes trfx-correct-pop { 35% { transform: translateY(-7px) scale(1.08) rotate(-1deg); filter: brightness(1.12); } 65% { transform: translateY(2px) scale(.98); } }
@keyframes trfx-wrong { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-9px) rotate(-1deg); } 38% { transform: translateX(8px) rotate(1deg); } 58% { transform: translateX(-6px); } 78% { transform: translateX(4px); } }
@keyframes trfx-dopa { 35% { transform: translateY(-7px) scale(1.22) rotate(-3deg); } 65% { transform: scale(.96); } }
@keyframes trfx-screen-shake { 0%,100% { transform: translate(0); } 20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); } 60% { transform: translate(-3px,-1px); } 80% { transform: translate(2px,1px); } }
@keyframes trfx-stamp { 0% { opacity: 0; transform: scale(3.4) rotate(-10deg); } 18% { opacity: 1; transform: scale(.82) rotate(3deg); } 32% { transform: scale(1.08) rotate(-1deg); } 72% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(1.15) translateY(-18px); } }
@keyframes trfx-band { 0% { opacity: 0; transform: translateX(-120vw); } 22%,76% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(120vw); } }
@keyframes trfx-cheer-big { 0% { opacity: 0; transform: translate(-50%,40%) scale(.72); } 22% { opacity: 1; transform: translate(-50%,-64%) scale(1.08); } 38%,70% { opacity: 1; transform: translate(-50%,-55%) scale(1); } 100% { opacity: 0; transform: translate(-50%,45%) scale(.88); } }
@keyframes trfx-result { from { opacity: 0; transform: translateY(55px) scale(.8) rotate(-2deg); } 70% { transform: translateY(-5px) scale(1.02); } }
@keyframes trfx-fade { from { opacity: 0; } }
@keyframes trfx-stamp-reduced { 0%,100% { opacity: 0; } 22%,75% { opacity: 1; } }
@keyframes trfx-cheer-reduced { 0%,100% { opacity: 0; } 25%,70% { opacity: 1; transform: translate(-50%,-48%); } }
@keyframes trfx-gain-reduced { 0%,100% { opacity: 0; } 20%,72% { opacity: 1; transform: translate(-50%,-90%); } }

@media (max-width: 380px) {
  .trfx-friend { width: 50px; height: 48px; }
  .trfx-garland i { border-left-width: 8px; border-right-width: 8px; border-top-width: 17px; }
  .trfx-stamp-inner { -webkit-text-stroke-width: 5px; }
  .trfx-gain { -webkit-text-stroke-width: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.trfx-motion-ok) #tr-bg::before,
  html:not(.trfx-motion-ok) .trfx-mascot-body,
  html:not(.trfx-motion-ok) .trfx-garland i,
  html:not(.trfx-motion-ok) .trfx-friend,
  html:not(.trfx-motion-ok) .trfx-ambient i { animation: none; }
}