:root{--motion-ease:cubic-bezier(.2,.75,.25,1)}
button{transition:transform 220ms var(--motion-ease),box-shadow 220ms,color 180ms,background 180ms}
button:active{transform:scale(.98)}
#motion-toggle{display:flex;align-items:center;gap:5px;font-size:15px;color:var(--muted);min-height:40px;padding:5px}#motion-toggle span{font-size:10px}
.hero-art>img:not(.pe-flag),.mode-character,.panel-mentor{transition:transform 350ms var(--motion-ease),filter 300ms;transform-origin:50% 90%}
.hero-art:focus-visible{outline:2px solid #c4a04c;outline-offset:-5px;border-radius:18px}
.identity-mode,.deck{position:relative;transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px));transition:transform 300ms var(--motion-ease),box-shadow 250ms,border-color 250ms}
.identity-mode:hover,.deck:hover{--lift:-4px;transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift));box-shadow:0 14px 26px #17395918}
.identity-mode:active,.deck:active{transform:scale(.985)}
.identity-mode:focus-visible .mode-character,.identity-mode:hover .mode-character,.mentor-panel:hover .panel-mentor{transform:translateY(-4px) scale(1.035);filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 7px 8px #194d8526)}
.identity-mode .mode-art{transition:transform 300ms var(--motion-ease)}.identity-mode:hover .mode-art,.identity-mode:focus-visible .mode-art{transform:rotate(-5deg) translateY(-3px)}
aside nav button,.bottom button{position:relative;transition:background 220ms,color 220ms,transform 220ms}.bottom .active:after{content:'';position:absolute;bottom:1px;left:35%;right:35%;height:2px;border-radius:4px;background:currentColor;animation:indicator-in 230ms var(--motion-ease)}
#library:not([hidden]),#arena:not([hidden]){animation:page-in 260ms var(--motion-ease)}
dialog[open]{animation:dialog-in 230ms var(--motion-ease)}dialog[open]::backdrop{animation:backdrop-in 180ms}
.motion-ready{opacity:0;transform:translateY(12px)}.motion-ready.motion-visible{opacity:1;transform:translateY(0);transition:opacity 420ms var(--motion-ease),transform 420ms var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.flip{perspective:1000px;padding:0;background:transparent;min-height:190px;display:block;transform:none!important}.flip-inner{display:grid;transform-style:preserve-3d;transition:transform 360ms var(--motion-ease);width:100%;min-height:190px}.flip-front,.flip-back{grid-area:1/1;display:grid;place-items:center;padding:24px;background:var(--soft);border:1px solid var(--line);border-radius:15px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-back{transform:rotateY(180deg)}.is-flipped .flip-inner{transform:rotateY(180deg)}
.tap-pulse{animation:tap-pulse 230ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.hero-art:hover>img:not(.pe-flag),.hero-art:focus-visible>img:not(.pe-flag){transform:translate(var(--hero-x,0px),var(--hero-y,-4px)) scale(1.025);filter:drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0 10px 16px #194d8530)}}
@media(hover:none){.identity-mode:hover,.deck:hover{--lift:0px;box-shadow:none}.hero-art.touch-highlight>img:not(.pe-flag){transform:translateY(-4px) scale(1.02);filter:drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white)}}
@keyframes page-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes indicator-in{from{transform:scaleX(.2)}to{transform:scaleX(1)}}@keyframes tap-pulse{50%{box-shadow:0 0 0 4px #c4a04c35}}
.motion-off *, .motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.motion-off .motion-ready{opacity:1;transform:none}.motion-off .identity-mode,.motion-off .deck,.motion-off .hero-art img,.motion-off .mode-character,.motion-off .panel-mentor{transform:none!important}.motion-off .hero-art img,.motion-off .mode-character,.motion-off .panel-mentor{filter:none!important}.motion-off .flip-front,.motion-off .flip-back{backface-visibility:visible;transform:none}.motion-off .flip-back{visibility:hidden}.motion-off .is-flipped .flip-front{visibility:hidden}.motion-off .is-flipped .flip-back{visibility:visible}.motion-off .flip-inner{transform:none}
@media(max-width:700px){#motion-toggle span{display:none}header>div{gap:9px}.hero-art{overflow:hidden}}

.motion-hidden *, .motion-hidden *:before,.motion-hidden *:after{animation-play-state:paused!important}.hero:not(.loop-visible) .pe-flag,.floating:not(.loop-visible){animation-play-state:paused}