/* TRIX motion grammar: small response → clear anticipation → decisive impact → settling result. */
:root {
  --motion-press: 120ms;
  --motion-control: 220ms;
  --motion-enter: 380ms;
  --motion-clash: 760ms;
  --motion-result: 520ms;
  --motion-ease-out: cubic-bezier(.2,.75,.25,1);
  --motion-ease-impact: cubic-bezier(.16,.82,.2,1);
}
.screen-entering .arena-wordmark img { animation: home-mark-in 600ms var(--motion-ease-out) both; }
.play-panel { transition: transform var(--motion-press) ease, filter var(--motion-control) ease; }
.screen-entering .play-panel { animation: home-play-in 620ms 100ms var(--motion-ease-impact) both; }
.play-panel::after { position: absolute; top: -30%; bottom: -30%; left: -45%; display: block; width: 20%; background: linear-gradient(90deg, transparent, #a6fbff25, transparent); content: ''; pointer-events: none; transform: skewX(-18deg) translateX(-250%); }
.screen-entering .play-panel::after { animation: home-play-sweep 1.6s 700ms ease-in-out 1 both; }
.play-panel:hover { filter: none; transform: translateY(-2px); }
.play-panel:hover .play-label { color: #d8fdff; }
.screen-entering .streak-panel { animation: battle-enter 390ms 220ms var(--motion-ease-out) both; }
.screen-entering .reward-panel { animation: battle-enter 390ms 290ms var(--motion-ease-out) both; }
.screen-entering .bottom-nav { animation: nav-rise 360ms 340ms var(--motion-ease-out) both; }
.battle-main.round-entering > * { animation: battle-enter var(--motion-enter) var(--motion-ease-out) both; }
.battle-main.round-entering > .opponent-banner { animation-delay: 20ms; }
.battle-main.round-entering > .battle-scoreline { animation-delay: 70ms; }
.battle-main.round-entering > .battle-playfield { animation-delay: 115ms; }
.battle-main.round-entering > .battle-choice-area { animation-delay: 160ms; }
.battle-main.round-entering > .battle-statusbar { animation-delay: 200ms; }
.battle-main.round-entering .battle-timer-ring { animation: timer-arrive 520ms var(--motion-ease-impact) both; }
.battle-main.round-entering .battle-move { animation: move-arrive 380ms var(--motion-ease-out) both; }
.battle-main.round-entering .battle-move:nth-child(1) { animation-delay: 40ms; }
.battle-main.round-entering .battle-move:nth-child(2) { animation-delay: 95ms; }
.battle-main.round-entering .battle-move:nth-child(3) { animation-delay: 150ms; }
.battle-move.selected { animation: move-lock 280ms var(--motion-ease-impact) both; }
.battle-move.powered::before {
  position: absolute;
  inset: -30% auto -30% -38%;
  width: 35%;
  background: linear-gradient(90deg, transparent, #f7c7ff72, transparent);
  content: '';
  transform: translateX(0) skewX(-18deg);
  animation: power-sweep 3.4s ease-in-out infinite;
}
.battle-search-state { animation: battle-enter 420ms var(--motion-ease-out) both; }
.search-avatar.self { animation: search-avatar-in 440ms var(--motion-ease-impact) both; }
.search-avatar.rival { animation: search-avatar-in 440ms 100ms var(--motion-ease-impact) both; }
.search-state-copy { animation: battle-enter 420ms 100ms var(--motion-ease-out) both; }
.search-progress { animation: battle-enter 320ms 160ms var(--motion-ease-out) both; }
.battle-secondary-button,.result-actions .primary-button { transition: transform var(--motion-press) ease, filter var(--motion-control) ease; }
.battle-secondary-button:active,.result-actions .primary-button:active { transform: scale(.975); }
.battle-collision { position: relative; display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; isolation: isolate; contain: paint; }
.battle-collision img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 22px #12dff37a); animation: collision-arrive var(--motion-clash) var(--motion-ease-impact) both; }
.battle-collision.reverse img { transform: scaleX(-1); }
.battle-collision.reverse img { animation-name: collision-arrive-reversed; }
.battle-waiting { animation: timer-arrive 420ms var(--motion-ease-impact) both; }
.battle-waiting-art .waiting-item { animation: waiting-art-lock 360ms var(--motion-ease-impact) both; }
.battle-waiting-dots i { animation: search-dot 1.1s ease-in-out infinite; }
.battle-waiting-dots i:nth-child(2) { animation-delay: .15s; }
.battle-waiting-dots i:nth-child(3) { animation-delay: .3s; }
.impact-flash { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: white; opacity: 0; box-shadow: 0 0 18px 8px #fff, 0 0 44px 24px #ed42ff, 0 0 70px 34px #09eaf3; transform: translate(-50%,-50%) scale(.15); animation: collision-flash 690ms 80ms ease-out both; pointer-events: none; }
.battle-reveal-pair { display: flex; width: 86%; height: 86%; align-items: center; justify-content: space-between; }
.reveal-piece { position: relative; display: grid; width: 39%; height: 100%; place-items: center; isolation: isolate; }
.reveal-piece::before { position: absolute; z-index: -1; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#02dff34d 0,transparent 70%); content: ''; opacity: .72; }
.reveal-piece.right::before { background: radial-gradient(circle,#ed35f54d 0,transparent 70%); }
.reveal-item { width: 100%; height: 100%; object-fit: contain; }
.reveal-versus { color: #f4f7ff; font: 700 17px var(--display); text-shadow: 0 0 17px #e23dff; animation: versus-beat 720ms ease-in-out both; }
.battle-playfield.revealing .reveal-piece.left { animation: reveal-lunge-left 660ms var(--motion-ease-impact) both; }
.battle-playfield.revealing .reveal-piece.right { animation: reveal-lunge-right 660ms var(--motion-ease-impact) both; }
.battle-playfield.revealing .reveal-item { animation: artifact-spin-in 720ms var(--motion-ease-impact) both; will-change: transform, opacity; }
.result-impact-stage { animation: result-stage-in 580ms var(--motion-ease-out) both; }
.result-impact-light { animation: result-flash 560ms 100ms ease-out both; }
.result-context { animation: battle-enter 320ms ease-out both; }
.result-move-caption { animation: result-card-in 420ms 70ms var(--motion-ease-out) both; }
.result-outcome { animation: result-word 620ms 90ms var(--motion-ease-impact) both; }
.result-score { animation: result-score-in 440ms 210ms var(--motion-ease-out) both; }
.result-round { animation: battle-enter 320ms 255ms var(--motion-ease-out) both; }
.result-player-card { animation: result-card-in 420ms var(--motion-ease-out) both; }
.result-player-card.player-two { animation-delay: 90ms; }
.result-reward { animation: battle-enter 360ms 180ms var(--motion-ease-out) both; }
.result-actions { animation: result-actions-in 420ms 220ms var(--motion-ease-out) both; }
.result-nav { animation: nav-rise 360ms 240ms var(--motion-ease-out) both; }
.result-nav button { transition: color var(--motion-control) ease, transform var(--motion-press) ease; }
.screen-entering > .screen { animation: route-screen-enter 260ms var(--motion-ease-out) both; }
.result-duel-artifact.winner .duel-item { animation: winning-artifact-arrive 560ms 90ms var(--motion-ease-impact) both; }
.result-duel-artifact.loser .duel-item { animation: artifact-shatter 660ms 180ms cubic-bezier(.25,.7,.2,1) both; }
.battle-playfield.revealing .reveal-piece.loser .reveal-item { animation: artifact-shatter 660ms 180ms cubic-bezier(.25,.7,.2,1) both; }
@keyframes battle-enter {
  from { opacity: 0; transform: translate3d(0,10px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes home-mark-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes home-play-in {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.9); }
  70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.025); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes home-play-sweep {
  0%, 70%, 100% { transform: skewX(-18deg) translateX(-250%); }
  86% { transform: skewX(-18deg) translateX(850%); }
}
@keyframes route-screen-enter {
  from { opacity: 0; transform: translate3d(0,9px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes winning-artifact-arrive {
  from { opacity: .55; transform: translate3d(0,10px,0) scale(.92); }
  72% { opacity: 1; transform: translate3d(0,-3px,0) scale(1.035); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes artifact-shatter {
  0%,35% { opacity: 1; transform: scale(1) rotate(0); }
  52% { opacity: .96; transform: scale(1.04) rotate(-3deg); }
  100% { opacity: .12; transform: translate3d(0,9px,0) scale(.72) rotate(8deg); }
}
@keyframes timer-arrive {
  0% { opacity: 0; transform: scale(.8) rotate(-10deg); }
  70% { opacity: 1; transform: scale(1.035) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes move-arrive {
  from { opacity: 0; transform: translate3d(0,16px,0) scale(.9); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes move-lock {
  0% { transform: scale(.92); }
  55% { transform: scale(1.055); }
  100% { transform: scale(1); }
}
@keyframes search-avatar-in {
  from { opacity: 0; transform: scale(.78); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes battle-search-pulse {
  0% { opacity: 0; transform: scale(.65); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.28); }
}
@keyframes search-dot {
  0%,100% { opacity: .36; transform: translateY(0) scale(.76); }
  50% { opacity: 1; transform: translateY(-5px) scale(1.12); }
}
@keyframes bot-arrive {
  0% { opacity: .5; transform: scale(.74) rotate(-9deg); }
  70% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes collision-arrive {
  0% { opacity: .3; transform: scale(.78) translateY(12px); }
  45% { opacity: 1; transform: scale(1.05) translateY(-3px); }
  68% { transform: scale(.985) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes collision-arrive-reversed {
  0% { opacity: .3; transform: scaleX(-1) scale(.78) translateY(12px); }
  45% { opacity: 1; transform: scaleX(-1) scale(1.05) translateY(-3px); }
  68% { transform: scaleX(-1) scale(.985) translateY(1px); }
  100% { opacity: 1; transform: scaleX(-1) scale(1) translateY(0); }
}
@keyframes collision-flash {
  0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
  34% { opacity: .95; transform: translate(-50%,-50%) scale(1.25); }
  55% { opacity: .42; transform: translate(-50%,-50%) scale(.72); }
}
@keyframes reveal-lunge-left {
  0% { opacity: .45; transform: translateX(-36px) scale(.76) rotate(-7deg); }
  22% { opacity: .8; transform: translateX(-29px) scale(.9) rotate(-4deg); }
  57% { opacity: 1; transform: translateX(14px) scale(1.1) rotate(2deg); }
  76% { transform: translateX(-4px) scale(.98) rotate(0); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes reveal-lunge-right {
  0% { opacity: .45; transform: translateX(36px) scale(.76) rotate(7deg); }
  22% { opacity: .8; transform: translateX(29px) scale(.9) rotate(4deg); }
  57% { opacity: 1; transform: translateX(-14px) scale(1.1) rotate(-2deg); }
  76% { transform: translateX(4px) scale(.98) rotate(0); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes artifact-spin-in {
  from { opacity: .45; transform: scale(.76) rotate(-7deg); }
  58% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes versus-beat {
  0%,100% { opacity: .68; transform: scale(.8); }
  48% { opacity: 1; transform: scale(1.22); }
}
@keyframes result-stage-in {
  from { opacity: .4; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes result-flash {
  0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
  37% { opacity: 1; transform: translate(-50%,-50%) scale(1.4); }
  62% { opacity: .3; transform: translate(-50%,-50%) scale(.55); }
}
@keyframes result-word {
  0% { opacity: 0; transform: translateY(17px) scale(.72); }
  66% { opacity: 1; transform: translateY(-2px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes result-score-in {
  from { opacity: 0; transform: translateY(9px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes result-card-in {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes result-actions-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nav-rise {
  from { opacity: .5; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes waiting-art-lock {
  0% { opacity: 0; transform: translate3d(0,12px,0) scale(.78); }
  65% { opacity: 1; transform: translate3d(0,-2px,0) scale(1.04); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes power-sweep {
  0%,55% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  62% { opacity: .6; }
  78%,100% { opacity: 0; transform: translateX(470%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .arena-wordmark img, .play-panel, .play-panel::after, .streak-panel, .reward-panel, .bottom-nav,
  .battle-main > *, .battle-move, .battle-timer-ring, .battle-search-state, .search-avatar, .search-state-copy, .search-progress,
  .search-pulse i, .battle-collision img, .impact-flash, .battle-waiting, .battle-waiting-art .waiting-item, .battle-waiting-dots i, .battle-reveal-pair *, .result-impact-stage,
  .result-impact-light, .result-context, .result-move-caption, .result-outcome, .result-score, .result-round, .result-player-card, .result-reward, .result-actions,
  .result-nav, .battle-move.powered::before {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-entering > .screen,.result-duel-artifact * { animation: none !important; }
}

/* Keep the fixed navigation geometry still when the route changes. */
.screen-entering .bottom-nav { animation: none !important; }