.versus-screen {
  --paper:#f4efe6;--ink:#14161c;--p1:#ff7a1c;--p2:#31a8ff;
  --kr:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --disp:'Lilita One','Arial Black',Impact,sans-serif;
  position:fixed;inset:0;z-index:190;overflow:auto;padding:28px 18px;
  color:var(--paper);background:#101217;
  background-image:repeating-linear-gradient(0deg,transparent 0 39px,#ffffff06 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#ffffff06 39px 40px);
  font-family:var(--kr);box-sizing:border-box;
}
.versus-screen.on {display:grid;place-items:center;}
.versus-screen * {box-sizing:border-box;}
.versus-sheet {width:min(820px,100%);margin:auto;text-align:center;}
.versus-heading>span {font:16px var(--disp);letter-spacing:.17em;color:#bbb5a9;}
.versus-heading h1 {font:clamp(25px,4vw,36px)/1.2 var(--kr);margin:10px 0;outline:none;}
.versus-heading p {margin:0 0 25px;color:#c5bfb3;font-size:14px;}
.versus-pair {position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch;}
.fighter {--team:var(--p1);position:relative;min-width:0;padding:0 22px 17px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:7px 8px 0 #050609;transform:rotate(-1.4deg);}
.fighter[data-side=p2] {--team:var(--p2);transform:rotate(1.4deg);}
.fighter-label {background:var(--team);margin:0 -22px 17px;padding:10px 12px;border-bottom:3px solid var(--ink);border-radius:12px 12px 0 0;font-size:16px;}
.fighter-portrait {position:relative;display:grid;place-items:center;width:86px;height:86px;margin:0 auto 13px;border:3px solid var(--ink);border-radius:50%;color:var(--ink);background:var(--team);box-shadow:4px 4px 0 var(--ink);font:42px var(--kr);}
.fighter-portrait::before {content:'';position:absolute;inset:8px;border:2px solid #f4efe688;border-radius:50%;}
.fighter h2 {font:clamp(21px,3vw,28px)/1.3 var(--kr);overflow-wrap:anywhere;margin:0;min-height:1.3em;}
.fighter-tag {font:15px var(--disp);color:#777066;letter-spacing:.07em;margin:3px 0 17px;}
.fighter-record {display:grid;grid-template-columns:1.5fr 1fr;gap:8px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:12px 0;margin:0;}
.fighter-record>div+div {border-left:1px solid #c6beb2;}
.fighter-record dt {font:12px var(--kr);color:#777066;margin-bottom:4px;}
.fighter-record dd {font:clamp(18px,2.5vw,23px) var(--kr);margin:0;overflow-wrap:anywhere;}
.fighter-streak {display:inline-block;min-height:28px;margin:13px 0 6px;padding:3px 11px;border:2px solid var(--ink);transform:rotate(-3deg);font-size:14px;}
.fighter-equipment {display:flex;align-items:center;justify-content:center;gap:8px;margin-top:3px;font-size:12px;color:#6c655d;}
.fighter-equipment[hidden] {display:none;}
.fighter-equipment canvas {width:100px;height:auto;}
.versus-mark {position:absolute;z-index:2;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-9deg);font:76px/1 var(--disp);color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 6px 0 #050609;}
.versus-footer {padding-top:24px;}
.versus-status {margin:0 0 11px;font-size:16px;min-height:1.4em;}
.versus-track {width:180px;height:7px;margin:0 auto 16px;background:#3a3b40;overflow:hidden;transform:rotate(-1deg);}
.versus-track i {display:block;width:100%;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .06s linear;}
.versus-leave {border:2px solid #aba499;border-radius:99px;background:transparent;color:var(--paper);padding:8px 26px;min-height:42px;font:14px var(--kr);cursor:pointer;}
.versus-leave:hover {background:var(--paper);color:var(--ink);}
.versus-leave:focus-visible {outline:3px solid var(--p1);outline-offset:4px;}
.versus-leave:disabled {opacity:.45;cursor:default;}
.versus-enter .fighter {animation:fighter-in .32s cubic-bezier(.2,.8,.3,1) both;}
.versus-enter .fighter[data-side=p2] {animation-name:fighter-in-right;}
.versus-enter .versus-mark {animation:versus-in .25s .18s both;}
@keyframes fighter-in {from{opacity:0;transform:translateX(-24px) rotate(-3deg);}to{opacity:1;transform:rotate(-1.4deg);}}
@keyframes fighter-in-right {from{opacity:0;transform:translateX(24px) rotate(3deg);}to{opacity:1;transform:rotate(1.4deg);}}
@keyframes versus-in {from{opacity:0;scale:1.25;}to{opacity:1;scale:1;}}
@media(max-width:540px) {
  .versus-screen {padding:22px 13px;}
  .versus-pair {gap:18px;}
  .fighter {padding:0 10px 12px;border-radius:13px;box-shadow:4px 5px 0 #050609;}
  .fighter-label {margin:0 -10px 14px;padding:9px 3px;font-size:13px;border-radius:9px 9px 0 0;}
  .fighter-portrait {width:64px;height:64px;font-size:32px;}
  .fighter h2 {font-size:20px;min-height:52px;display:grid;place-items:center;}
  .fighter-tag {margin:2px 0 12px;font-size:13px;}
  .fighter-record {grid-template-columns:1fr;gap:10px;}
  .fighter-record>div+div {border:0;}
  .fighter-record dd {font-size:20px;}
  .fighter-equipment {display:block;line-height:1.4;}
  .fighter-equipment canvas {display:block;margin:auto;}
  .fighter-streak {font-size:12px;padding:3px 7px;}
  .versus-mark {font-size:45px;-webkit-text-stroke-width:2px;top:46%;text-shadow:3px 4px 0 #050609;}
}
@media(prefers-reduced-motion:reduce) {
  .versus-enter .fighter,.versus-enter .versus-mark {animation:none;}
  .versus-track i {transition:none;}
}