.title-duel{margin:22px auto 0;max-width:540px;padding:12px}.title-duel-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:clamp(20px,3vw,36px);position:relative;isolation:isolate}.duel-side-0{--duel-tilt: 4deg;--back-offset: -24px;--back-tilt: -9deg;--shuffle-out: -44px;--shuffle-in: 14px}.duel-side-1{--duel-tilt: -4deg;--back-offset: 24px;--back-tilt: 9deg;--shuffle-out: 44px;--shuffle-in: -14px}.title-duel-stack{--back-rise: -12px;display:grid;position:relative;min-width:0;isolation:isolate}.title-duel-card{grid-area:1 / 1;position:relative;min-width:0;border:2px solid #799ad5;background:#102f76;box-shadow:inset 2px 2px #2455a9,inset -2px -2px #030c28,4px 4px #030c28;display:flex;flex-direction:column;transform:rotate(var(--duel-tilt))}.title-duel-front{z-index:1}.title-duel-back{z-index:0;transform:translate(var(--back-offset),var(--back-rise)) rotate(var(--back-tilt));filter:brightness(.75)}.title-duel-stack.is-swapping .title-duel-front{animation:card-to-back .7s steps(10,end) both}.title-duel-stack.is-swapping .title-duel-back{animation:card-to-front .7s steps(10,end) both}@keyframes card-to-back{0%{transform:rotate(var(--duel-tilt));filter:brightness(1);z-index:2}45%{transform:translate(var(--shuffle-out),-24px) rotate(var(--back-tilt));filter:brightness(.9);z-index:2}55%{z-index:0}to{transform:translate(var(--back-offset),var(--back-rise)) rotate(var(--back-tilt));filter:brightness(.75);z-index:0}}@keyframes card-to-front{0%{transform:translate(var(--back-offset),var(--back-rise)) rotate(var(--back-tilt));filter:brightness(.75);z-index:0}45%{transform:translate(var(--shuffle-in),-26px) rotate(var(--duel-tilt));filter:brightness(1);z-index:0}55%{z-index:3}to{transform:rotate(var(--duel-tilt));filter:brightness(1);z-index:3}}@media(prefers-reduced-motion:reduce){.title-duel-stack.is-swapping .title-duel-card{animation:none}}.title-duel-fighter{aspect-ratio:1;position:relative}.title-duel-fighter-zina,.title-duel-fighter-marquis{--title-fighter-scale: 1.03}.title-duel-fighter-helene{--title-fighter-scale: 1.05}.title-duel-fighter>.portrait.illustrated{width:100%;height:100%}.title-duel-fighter .portrait.illustrated .character-still{transform:scale(var(--title-fighter-scale, 1));transform-origin:center bottom}.title-duel-fighter .portrait.illustrated.mirrored .character-still{transform:scaleX(-1) scale(var(--title-fighter-scale, 1))}.title-duel-bars{display:grid;gap:5px;padding:8px 10px 9px;margin-top:auto;background:#050e30;border-top:2px solid #799ad5}.title-duel-bar-row{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:6px;min-width:0}.title-duel-bar-icon{display:flex;align-items:center;justify-content:center}.title-duel-bar-icon .stat-icon{width:18px;height:18px}.title-duel-bar{display:block;min-width:0;height:11px;overflow:hidden;border:2px solid #b9cdeb;background:#18223e;box-shadow:2px 2px #030817}.title-duel-bar-fill{display:block;height:100%;background:linear-gradient(to bottom,#ffc290 0 44%,#ff655d 44% 75%,#b7324b 75%)}.title-duel-bar-health .title-duel-bar-fill{width:var(--health-level)}.title-duel-health-medium .title-duel-bar-health .title-duel-bar-fill{background:linear-gradient(to bottom,#ffe1a0 0 44%,#eda344 44% 75%,#b5652e 75%)}.title-duel-health-high .title-duel-bar-health .title-duel-bar-fill{background:linear-gradient(to bottom,#fff2a1 0 44%,#e9bf4b 44% 75%,#b47e32 75%)}.title-duel-bar-energy{height:9px;border-color:#8dc1d9;background:#14233e}.title-duel-bar-energy .title-duel-bar-fill{width:var(--energy-level);background:linear-gradient(to bottom,#a5f2ee 0 45%,#4ba6d3 45%)}@media(max-width:520px){.title-duel-stack{--back-rise: -8px}.duel-side-0{--back-offset: -12px;--back-tilt: -6deg;--shuffle-out: -28px;--shuffle-in: 8px}.duel-side-1{--back-offset: 12px;--back-tilt: 6deg;--shuffle-out: 28px;--shuffle-in: -8px}}
