/* Match found (src/screens/versus.mjs): the split VS screen. Each half is a player's profile-icon painting with their
   name (and rank in ranked play); the halves meet at a slanted gold seam and the swords VS slams down on it at --slam.
   Side by side on monitors and sideways phones; upright phones and tablets stack the opponent over you, like the board. */
.mf{position:fixed;inset:0;z-index:9300;overflow:hidden;background:#07090b;font-family:var(--cond);color:var(--ink);--slam:.7s;
  transition:opacity .35s ease}
.mf.is-out{opacity:0;pointer-events:none}
.mf-shake{position:absolute;inset:0}
.mf-bg{position:absolute;inset:0;background:#07090b}
.mf-title{position:absolute;z-index:4;left:0;right:0;top:calc(env(safe-area-inset-top) + clamp(14px,6dvh,64px));margin:0;text-align:center;
  font:700 clamp(15px,2.2dvh,22px)/1 var(--cond);letter-spacing:.55em;text-indent:.55em;text-transform:uppercase;color:var(--gold1);
  text-shadow:0 0 18px rgba(255,200,110,.5),0 2px 4px #000}
.mf-title small{display:block;margin-top:10px;font-size:.62em;letter-spacing:.4em;color:var(--muted);text-shadow:0 2px 4px #000}
.mf-vs{position:absolute;left:50%;top:50%;width:clamp(190px,34dvh,340px);aspect-ratio:1;translate:-50% -50%;z-index:3;filter:drop-shadow(0 10px 30px rgba(0,0,0,.8))}
.mf-vs img{width:100%;height:100%;display:block}
.mf-flash{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;translate:-50% -50%;z-index:2;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,244,214,.95) 0,rgba(255,214,140,.45) 12%,rgba(255,180,90,0) 34%)}

/* The halves: full-screen layers clipped along the seam; the painting fills each player's side. */
.mf-side{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(10px,2dvh,20px);
  padding-bottom:calc(env(safe-area-inset-bottom) + clamp(20px,7dvh,80px))}
.mf-side--me{clip-path:polygon(0 0,55% 0,45% 100%,0 100%);align-items:flex-start;padding-left:calc(env(safe-area-inset-left) + clamp(20px,6vw,110px))}
.mf-side--opp{clip-path:polygon(55% 0,100% 0,100% 100%,45% 100%);align-items:flex-end;padding-right:calc(env(safe-area-inset-right) + clamp(20px,6vw,110px))}
.mf-art{position:absolute;top:0;bottom:0;width:56%;z-index:-1;overflow:hidden;background:#101418}
.mf-side--me .mf-art{left:0}.mf-side--opp .mf-art{right:0}
.mf-art img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block} /* vsFrame() sizes and places it */
.mf-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 55%,rgba(5,7,9,.92) 92%)}
.mf-art::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;opacity:.55}
.mf-side--me .mf-art::before{background:linear-gradient(90deg,transparent 40%,var(--c-me))}
.mf-side--opp .mf-art::before{background:linear-gradient(270deg,transparent 40%,var(--c-opp))}
.mf-seam{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
.mf-seam-h{display:none}
.mf-seam line{stroke:#ffe9b8;stroke-width:3;filter:drop-shadow(0 0 6px #ffc970) drop-shadow(0 0 16px rgba(255,170,70,.8))}
.mf-seam .glow{filter:none;stroke:#ffb95c;stroke-width:12;stroke-opacity:0}

.mf-name{margin:0;padding:8px 26px 9px;border-radius:6px;border:2px solid transparent;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:linear-gradient(180deg,#161d23,#080b0e) padding-box,var(--frame) border-box;box-shadow:0 8px 22px rgba(0,0,0,.6);
  font:700 clamp(20px,3.3dvh,36px)/1.05 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#f5ecd6}
.mf-rank{display:flex;align-items:center;gap:12px}
.mf-rank .rank-emblem{width:clamp(64px,11dvh,112px)}
.mf-rank b{display:block;font:700 clamp(18px,2.7dvh,28px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--glow) 55%,#fff);text-shadow:0 0 14px var(--glow),0 2px 3px #000}
.mf-rank small{display:block;margin-top:5px;font:600 clamp(12px,1.6dvh,15px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Motion: the halves slide in, the VS slams down at --slam with a flash and a jolt, then the names and ranks rise. */
.mf.is-in .mf-side--me{animation:mfInL .5s cubic-bezier(.2,.9,.25,1.06) both}
.mf.is-in .mf-side--opp{animation:mfInR .5s cubic-bezier(.2,.9,.25,1.06) .05s both}
.mf.is-in .mf-vs{animation:mfSlam .28s cubic-bezier(.55,0,.9,.45) calc(var(--slam) - .28s) both,mfSettle .5s cubic-bezier(.2,1.5,.4,1) var(--slam) both}
.mf.is-in .mf-flash{animation:mfFlash .6s ease-out var(--slam) forwards}
.mf.is-in .mf-shake{animation:mfShake .26s linear var(--slam) both}
.mf.is-in .mf-name{animation:mfUp .4s ease calc(var(--slam) + .05s) both}
.mf.is-in .mf-rank{animation:mfUp .45s cubic-bezier(.2,1.4,.4,1) calc(var(--slam) + .22s) both}
.mf.is-in .mf-title{animation:mfFade .5s ease .1s both}
.mf.is-in .mf-seam line{animation:mfSeam .45s ease-out .25s both}
@keyframes mfInL{from{translate:-60vw 0}to{translate:0 0}}
@keyframes mfInR{from{translate:60vw 0}to{translate:0 0}}
@keyframes mfInUp{from{translate:0 60dvh}to{translate:0 0}}
@keyframes mfInDown{from{translate:0 -60dvh}to{translate:0 0}}
@keyframes mfSlam{from{scale:2.8;opacity:0}40%{opacity:1}to{scale:1;opacity:1}}
@keyframes mfSettle{0%{scale:1}35%{scale:1.1}to{scale:1}}
@keyframes mfFlash{0%{opacity:.9}to{opacity:0}}
@keyframes mfShake{0%,100%{translate:0 0}20%{translate:-9px 5px}40%{translate:8px -6px}60%{translate:-5px 3px}80%{translate:3px -2px}}
@keyframes mfUp{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes mfFade{from{opacity:0}to{opacity:1}}
@keyframes mfSeam{from{stroke-dasharray:0 2000}to{stroke-dasharray:2000 0}}
@media (prefers-reduced-motion:reduce){.mf.is-in *{animation-duration:.01s!important;animation-delay:0s!important}}
body.no-motion .mf.is-in *{animation-duration:.01s!important;animation-delay:0s!important}

/* Upright (phones, iPads held tall): the halves meet across the middle; the opponent's name sits just above the VS
   (their face above that), yours at the foot. */
@media (max-aspect-ratio:4/5){
  .mf-seam-v{display:none}.mf-seam-h{display:inline}
  .mf-vs{width:clamp(90px,min(32vw,15dvh),180px)}
  .mf-name{padding:6px 18px 7px;font-size:clamp(18px,3dvh,32px)}
  .mf-rank{gap:10px}.mf-rank .rank-emblem{width:clamp(44px,6.5dvh,76px)}
  .mf-rank b{font-size:clamp(15px,2.2dvh,24px)}.mf-rank small{font-size:clamp(11px,1.4dvh,14px)}
  .mf-side--opp{clip-path:polygon(0 0,100% 0,100% 45%,0 55%);align-items:center;padding:0 16px calc(50dvh + clamp(45px,min(16vw,7.5dvh),90px) + 12px)}
  .mf-side--me{clip-path:polygon(0 55%,100% 45%,100% 100%,0 100%);align-items:center;padding:0 16px calc(env(safe-area-inset-bottom) + clamp(20px,5dvh,60px))}
  .mf-art{width:auto;left:0;right:0}
  .mf-side--opp .mf-art{top:0;bottom:44%}.mf-side--me .mf-art{top:44%;bottom:0}
  .mf-side--me .mf-art::before{background:linear-gradient(180deg,var(--c-me),transparent 45%)}
  .mf-side--opp .mf-art::before{background:linear-gradient(0deg,var(--c-opp),transparent 45%)}
  .mf.is-in .mf-side--me{animation-name:mfInUp}.mf.is-in .mf-side--opp{animation-name:mfInDown}
}

/* Sideways phones: side by side as on a monitor, sized to the short height. */
@media (orientation:landscape) and (max-height:500px){
  .mf-title{top:calc(env(safe-area-inset-top) + 10px);font-size:13px}
  .mf-vs{width:clamp(96px,32dvh,150px)}
  .mf-side{gap:8px;padding-bottom:calc(env(safe-area-inset-bottom) + 14px)}
  .mf-name{padding:5px 16px 6px;font-size:clamp(15px,5dvh,22px);max-width:86%}
  .mf-rank{gap:8px}.mf-rank .rank-emblem{width:clamp(34px,12dvh,52px)}
  .mf-rank b{font-size:clamp(13px,4.2dvh,18px)}.mf-rank small{font-size:11px;margin-top:3px}
}

/* Touch screens run cooler (like the board's touch rules): no live blur filters or blend modes while it moves. */
@media (hover:none) and (pointer:coarse){
  .mf-vs{filter:none}
  .mf-vs::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.7),transparent 70%);translate:0 8%}
  .mf-seam line{filter:none}
  .mf-seam .glow{stroke-opacity:.28}
  .mf-art::before{mix-blend-mode:normal;opacity:.28}
}