/* Mobile VS keeps the confrontation edge-to-edge. */

@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .vs-screen{--vs-dock:64px;background:#03050b}
  .vs-stage{inset:0;bottom:0;touch-action:manipulation}

  /* Keep the supplied art visible from the safe-area edge to the floating controls. */
  .vs-fighter{top:0;bottom:0;width:58%;transition:width .34s cubic-bezier(.16,1,.3,1),opacity .24s ease,transform .34s cubic-bezier(.16,1,.3,1),clip-path .34s ease}
  .vs-fighter-left{clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
  .vs-fighter-right{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
  .vs-fighter-art{inset:max(4px,env(safe-area-inset-top,0px)) 0 62px;mask-image:none;overflow:hidden}
  .vs-fighter-art img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.98) contrast(1.06) drop-shadow(0 10px 14px #0007);transition:transform .45s cubic-bezier(.16,1,.3,1),object-position .3s ease}
  .vs-fighter-wash,.vs-fighter-right .vs-fighter-wash{background:linear-gradient(0deg,#03050bd9 0,#03050b40 14%,transparent 38%),linear-gradient(90deg,rgba(var(--fighter-rgb),.12),transparent 55%)}
  .vs-fighter-right .vs-fighter-wash{background:linear-gradient(0deg,#03050bd9 0,#03050b40 14%,transparent 38%),linear-gradient(-90deg,rgba(var(--fighter-rgb),.12),transparent 55%)}
  .vs-fighter:after{inset:5% 3% 70px;opacity:.28}
  .vs-fighter:before{top:9%;font-size:29vw;opacity:.09}

  /* Compact labels leave the faces and costumes unobstructed. */
  .vs-nameplate{left:5%;right:18%;bottom:calc(var(--vs-dock) + env(safe-area-inset-bottom,0px) + 12px);padding:8px 9px 7px;border-left:2px solid var(--fighter);background:linear-gradient(90deg,#02050bd9,#02050b73 68%,transparent);transition:opacity .2s ease,transform .3s ease}
  .vs-fighter-right .vs-nameplate{left:18%;right:5%;border-left:0;border-right:2px solid var(--fighter);background:linear-gradient(-90deg,#02050bd9,#02050b73 68%,transparent)}
  .vs-player{margin:0 0 4px;padding:2px 5px;border:0;background:none;box-shadow:none;font-size:7px;letter-spacing:1.5px}
  .vs-surname{display:none}
  .vs-given{font-size:clamp(25px,7.8vw,47px);line-height:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vs-japanese{margin-top:3px;font-size:12px;line-height:1.2;letter-spacing:.4px}
  .vs-style,.vs-quote{display:none}

  /* The collision stays loud, then settles into a smaller center badge. */
  .vs-core{top:42%;max-width:34vw}
  #vs-emblem,.vs-logo-echo{font-size:clamp(78px,23vw,126px)}
  .vs-kicker{font-size:7px;letter-spacing:1.5px;padding:4px 5px}
  .vs-ready{margin-top:7px;padding:5px 7px;font-size:8px;letter-spacing:2px}
  .vs-seam{left:50%;transform:rotate(7deg)}
  .vs-stage{--impact-y:42%}
  .vs-ring,.vs-spark,.vs-bolt{top:var(--impact-y)}

  .vs-topline{display:none}

  /* The stage continues behind this translucent dock instead of losing 130px. */
  .vs-controls{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));height:var(--vs-dock);display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:5px;padding:6px;border:1px solid #bfd9fa52;background:#030811c7;box-shadow:0 8px 28px #000c,inset 0 1px #ffffff10;backdrop-filter:blur(14px);align-content:center}
  .vs-controls button{grid-column:auto!important;grid-row:auto!important;min-width:0;min-height:50px;padding:6px 4px;gap:3px;border-color:#afc7e338;font-size:10px;line-height:1.25;letter-spacing:0;background:#0a1420b8;touch-action:manipulation}
  .vs-controls #vs-replay{background:#152b43d9;border-color:#a9d4ff80}
  .vs-controls kbd{display:none}

}

@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .vs-screen{--vs-dock:56px}
  .vs-fighter-art{inset:0 3% 54px}
  .vs-nameplate{bottom:calc(var(--vs-dock) + 6px);padding:5px 7px}.vs-given{font-size:11vh}.vs-japanese{font-size:10px}
  .vs-controls{left:auto;right:max(8px,env(safe-area-inset-right,0px));bottom:calc(7px + env(safe-area-inset-bottom,0px));width:min(56vw,520px);height:var(--vs-dock);grid-template-columns:1fr 1.2fr 1fr;padding:5px}
  .vs-controls button{min-height:44px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .vs-fighter,.vs-fighter-art img,.vs-nameplate{transition:none!important}
}