/* v3-matchfound.css — Codex Match Found layout (HANDOFF.md 885-906). Scope every rule to this screen.
   Boxes, desktop 1920x1080 (→ vw/vh so 1366x768 scales) | phone 844x390:
     title ribbon (560,24,800,96)        | (248,8,348,48)
     P1 plate     (120,152,520,104)      | (20,64,240,52)      P2 mirrored
     P1 sprite    (64,304,640,640)       | (12,120,256,256)    P2 mirrored + flipped inward
     VS           (760,336,400,240)      | (324,124,196,108)
     status       (704,656,512,128)      | (280,256,284,76)
     recovery     (752,816,416,64)       | (312,338,220,44)
   Fullscreen transition: no lobby sidebar / top bar (like Battle). Background = shared lobby-bg-v4, light scrim. */

#screen-matchfound{
  --mf-blue:#00C2FF; --mf-red:#FF2D2D; --mf-green:#00FF87; --mf-amber:#FFB020; --mf-err:#FF5A5A;
  --mf-text:#F4F7FF; --mf-text2:#B7C4D8; --mf-muted:#899AB3;
  --mf-ui:'Oswald','Rajdhani',sans-serif; --mf-disp:'Bangers','Luckiest Guy',sans-serif;
  position:relative; overflow:hidden; padding:0 !important; gap:0 !important;
  width:100%; height:100vh; height:100dvh; min-height:0 !important;
  background:#080D1A url('../assets/ui/lobby-bg-v4.webp') center / cover no-repeat !important;
}
/* lobby.css blurs a promo photo here; v4 stays sharp with only a light scrim + modest blue/red edge light */
#screen-matchfound::before{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; z-index:0 !important;
  background:
    linear-gradient(90deg, rgba(0,194,255,.20) 0%, rgba(0,194,255,0) 26%, rgba(255,45,45,0) 74%, rgba(255,45,45,.20) 100%),
    linear-gradient(180deg, rgba(4,6,16,.10) 0%, rgba(4,6,16,.28) 100%) !important;
}
/* soft spotlight behind the VS, CSS only */
#screen-matchfound::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:30%; top:18%; width:40%; height:56%;
  background:radial-gradient(closest-side, rgba(255,214,60,.18), rgba(255,214,60,0));
}

/* ---------------- title ribbon ---------------- */
#screen-matchfound .mf-title{
  position:absolute !important; z-index:3; margin:0; box-sizing:border-box;
  left:29.167vw; top:2.222vh; width:41.667vw; height:8.889vh;
  display:flex; align-items:center; justify-content:center;
  border-style:solid; border-width:12px 36px; border-image:url('../assets/ui/header-ribbon-v3.webp') 24 96 fill / 12px 36px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));
  font-family:var(--mf-disp); font-style:italic; font-weight:400; letter-spacing:2px; line-height:1;
  font-size:min(5.185vh, 2.917vw); color:var(--mf-text); text-transform:uppercase; white-space:nowrap;
  -webkit-text-stroke:2px #05070f; paint-order:stroke fill; text-shadow:0 4px 0 #000;
}

/* ---------------- name plates ---------------- */
#screen-matchfound .mf-plate{
  position:absolute !important; z-index:3; box-sizing:border-box;
  top:14.074vh; width:27.083vw; height:9.63vh;
  display:flex; align-items:center; gap:min(1.48vh, .83vw); padding:0 min(1.1vh, .6vw);
  border-style:solid; border-width:14px; border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / 14px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
}
#screen-matchfound .mf-p1{ left:6.25vw; }
#screen-matchfound .mf-p2{ right:6.25vw; flex-direction:row-reverse; text-align:right; }
/* side colour: blue = you, red = rival (plus the plate position; never colour alone) */
#screen-matchfound .mf-plate::after{ content:''; position:absolute; top:4px; bottom:4px; width:4px; border-radius:2px; }
#screen-matchfound .mf-p1::after{ right:2px; background:var(--mf-blue); box-shadow:0 0 12px var(--mf-blue); }
#screen-matchfound .mf-p2::after{ left:2px; background:var(--mf-red); box-shadow:0 0 12px var(--mf-red); }

#screen-matchfound .mf-av-wrap{ position:relative; display:inline-flex; flex-shrink:0; margin:0 4px; }
#screen-matchfound .mf-av{ display:block; width:min(5.93vh, 3.33vw); height:min(5.93vh, 3.33vw); border-radius:50%; overflow:hidden; flex-shrink:0; }
#screen-matchfound .mf-p1 .mf-av{ box-shadow:0 0 0 3px var(--mf-blue); }
#screen-matchfound .mf-p2 .mf-av{ box-shadow:0 0 0 3px var(--mf-red); }
#screen-matchfound .mf-av img, #screen-matchfound .mf-av .av-lazy{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

#screen-matchfound .mf-id{ display:flex; flex-direction:column; justify-content:center; min-width:0; flex:1; gap:2px; text-align:left; }
#screen-matchfound .mf-p2 .mf-id{ text-align:right; }
#screen-matchfound .mf-name{
  font-family:var(--mf-ui); font-weight:700; font-size:min(2.593vh, 1.458vw); line-height:1.15; letter-spacing:.5px;
  color:var(--mf-text); text-shadow:0 2px 0 #000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#screen-matchfound .mf-rank{
  display:flex; align-items:center; gap:10px; min-height:1.2em; overflow:hidden; white-space:nowrap;
  font-family:var(--mf-ui); font-weight:600; font-size:max(13px, min(1.667vh, .9375vw)); letter-spacing:1.5px; text-transform:uppercase; color:var(--mf-text2);
}
#screen-matchfound .mf-p2 .mf-rank{ justify-content:flex-end; }
#screen-matchfound .mf-rank-tier{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
#screen-matchfound .mf-rank .rank-ico, #screen-matchfound .mf-rank .gico{ width:1.4em; height:1.4em; object-fit:contain; }
#screen-matchfound .mf-title-img{ height:1.7em; width:auto; max-width:60%; object-fit:contain; min-width:0; }
#screen-matchfound .mf-title-txt{ color:#FFE600; overflow:hidden; text-overflow:ellipsis; }
#screen-matchfound .mf-rank.is-loading:empty::before{
  content:''; display:block; width:40%; height:.7em; border-radius:4px;
  background:linear-gradient(90deg, rgba(183,196,216,.14), rgba(183,196,216,.34), rgba(183,196,216,.14)); background-size:200% 100%;
  animation:mf-shimmer 1.1s linear infinite;
}
#screen-matchfound .mf-p2 .mf-rank.is-loading:empty::before{ margin-left:auto; }

/* readiness badge hangs under the plate: icon + word, colour is a secondary cue */
#screen-matchfound .mf-ready{
  position:absolute; left:50%; top:100%; transform:translate(-50%, -2px); z-index:4;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  height:min(3.7vh, 2.08vw); padding:0 min(1.48vh, .83vw); box-sizing:border-box;
  font-family:var(--mf-ui); font-weight:600; font-size:max(13px, min(1.852vh, 1.04vw)); letter-spacing:1.5px; text-transform:uppercase;
  background:linear-gradient(180deg, #16243f, #0c1428); border:2px solid #05070f; border-radius:8px;
}
#screen-matchfound .mf-ready[hidden]{ display:none; }
#screen-matchfound .mf-ready .ico{ width:1.15em; height:1.15em; stroke-width:3; }
#screen-matchfound .mf-ready.is-ok{ color:var(--mf-green); box-shadow:inset 0 0 0 1px rgba(0,255,135,.55), 0 0 10px rgba(0,255,135,.25); }
#screen-matchfound .mf-ready.is-pending{ color:var(--mf-amber); box-shadow:inset 0 0 0 1px rgba(255,176,32,.6); }
#screen-matchfound .mf-ready.is-left{ color:var(--mf-err); box-shadow:inset 0 0 0 1px rgba(255,90,90,.6); }

/* ---------------- dogs (exact equipped sprites, same scale + baseline) ---------------- */
#screen-matchfound .mf-dog{
  position:absolute !important; z-index:2; top:28.148vh; width:33.333vw; height:59.259vh; pointer-events:none;
}
#screen-matchfound .mf-dog-p1{ left:3.333vw; }
#screen-matchfound .mf-dog-p2{ right:3.333vw; }
#screen-matchfound .mf-dog img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
#screen-matchfound .mf-dog-p2 img{ transform:scaleX(-1); }
#screen-matchfound .mf-dog.is-empty img{ visibility:hidden; }
/* floor light under each dog: blue for you, red for the rival */
#screen-matchfound .mf-dog::before{ content:''; position:absolute; z-index:0; left:12%; right:12%; bottom:-2%; height:14%; border-radius:50%; }
#screen-matchfound .mf-dog-p1::before{ background:radial-gradient(closest-side, rgba(0,194,255,.45), rgba(0,194,255,0)); }
#screen-matchfound .mf-dog-p2::before{ background:radial-gradient(closest-side, rgba(255,45,45,.45), rgba(255,45,45,0)); }

/* ---------------- VS ---------------- */
#screen-matchfound .mf-vs{
  position:absolute !important; z-index:3; left:39.583vw; top:31.111vh; width:20.833vw; height:22.222vh;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mf-disp); font-style:italic; font-weight:400; line-height:1; letter-spacing:4px;
  font-size:min(20vh, 11.25vw); padding-right:.06em;
  background:linear-gradient(180deg, #fff6a8 0%, #ffe600 42%, #ff9a00 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:3px #2a1200; filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 22px rgba(255,190,40,.35));
}

/* ---------------- status (actual stage only) ---------------- */
#screen-matchfound .mf-status{
  position:absolute !important; z-index:3; box-sizing:border-box;
  left:36.667vw; top:60.741vh; width:26.667vw; height:11.852vh;
  display:flex; align-items:center; gap:min(1.85vh, 1.04vw); padding:0 min(1.48vh, .83vw);
  border-style:solid; border-width:16px; border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / 16px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55)); text-align:left;
}
#screen-matchfound .mf-status-ico{ flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:min(4.44vh, 2.5vw); height:min(4.44vh, 2.5vw); border-radius:50%; background:rgba(8,13,26,.7); box-shadow:inset 0 0 0 2px currentColor; }
#screen-matchfound .mf-status-ico .ico{ width:58%; height:58%; stroke-width:2.6; }
#screen-matchfound .mf-status-txt{ display:flex; flex-direction:column; min-width:0; gap:2px; }
#screen-matchfound .mf-status-txt b{ font-family:var(--mf-ui); font-weight:600; font-size:min(2.222vh, 1.25vw); line-height:1.15; color:var(--mf-text);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#screen-matchfound .mf-status-txt small{ font-family:var(--mf-ui); font-weight:500; font-size:max(12px, min(1.667vh, .9375vw)); color:var(--mf-text2); letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-matchfound .mf-status-txt small[hidden]{ display:none; }
#screen-matchfound .mf-status.is-ok .mf-status-ico{ color:var(--mf-green); }
#screen-matchfound .mf-status.is-pending .mf-status-ico{ color:var(--mf-amber); }
#screen-matchfound .mf-status.is-pending .mf-status-ico .ico{ animation:mf-breathe 1.6s ease-in-out infinite; }
#screen-matchfound .mf-status.is-error .mf-status-ico{ color:var(--mf-err); }

/* ---------------- recovery action (existing exits only) ---------------- */
#screen-matchfound .mf-actions{
  position:absolute !important; z-index:4; left:39.167vw; top:75.556vh; width:21.667vw; height:max(44px, 5.926vh);
  display:flex; gap:12px;
}
#screen-matchfound .mf-actions[hidden]{ display:none; }
#screen-matchfound .mf-actions button{ height:100%; min-height:44px; margin:0; cursor:pointer; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; line-height:1; }
#screen-matchfound .mf-btn-main{ flex:1; min-width:0; padding:0 8px !important;
  font-family:var(--mf-disp) !important; font-style:italic; letter-spacing:1.5px; font-size:max(16px, min(2.6vh, 1.46vw)) !important;
  color:#06140c !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-matchfound .mf-btn-home{ flex:0 0 auto; aspect-ratio:1; min-width:44px; padding:0 !important; }
#screen-matchfound .mf-btn-home[hidden]{ display:none; }
#screen-matchfound .mf-btn-home .ico{ width:24px; height:24px; }
#screen-matchfound .mf-actions button:disabled{ filter:saturate(.25) brightness(.8); cursor:default; }
#screen-matchfound .mf-actions button:focus-visible{ outline:2px solid var(--mf-blue); outline-offset:3px; }

/* global back (goBack → abandonMatch) restyled as a quiet kit button while this screen is up */
body.mf-on #global-back-btn{
  top:max(24px, env(safe-area-inset-top)); left:max(24px, env(safe-area-inset-left)); width:56px; height:56px;
  border-style:solid; border-width:10px 12px; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / 10px 12px;
  background:none; border-radius:0; box-sizing:border-box; font-size:1.3rem; color:var(--mf-text);
}

/* sound toggle moves to the free top-right corner (mirror of Back) so it never sits on the rival's dog */
body.mf-on #sfx-toggle{
  top:max(24px, env(safe-area-inset-top)) !important; right:max(24px, env(safe-area-inset-right)) !important; bottom:auto !important;
  width:56px !important; height:56px !important; border-radius:0 !important; box-sizing:border-box; backdrop-filter:none; box-shadow:none;
  border-style:solid !important; border-width:10px 12px !important; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / 10px 12px !important; background:none !important;
}

/* ---------------- entrance 250-400ms, static with reduced motion ---------------- */
#screen-matchfound.mf-in .mf-title{ animation:mf-drop .32s cubic-bezier(.2,.9,.3,1) both; }
#screen-matchfound.mf-in .mf-p1, #screen-matchfound.mf-in .mf-dog-p1{ animation:mf-from-l .36s cubic-bezier(.2,.9,.3,1) both; }
#screen-matchfound.mf-in .mf-p2, #screen-matchfound.mf-in .mf-dog-p2{ animation:mf-from-r .36s cubic-bezier(.2,.9,.3,1) both; }
#screen-matchfound.mf-in .mf-vs{ animation:mf-pop .3s .08s cubic-bezier(.2,1.3,.4,1) both; }
#screen-matchfound.mf-in .mf-status{ animation:mf-fade .28s .12s ease-out both; }
@keyframes mf-drop{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:none; } }
@keyframes mf-from-l{ from{ opacity:0; transform:translateX(-48px); } to{ opacity:1; transform:none; } }
@keyframes mf-from-r{ from{ opacity:0; transform:translateX(48px); } to{ opacity:1; transform:none; } }
@keyframes mf-pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes mf-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mf-shimmer{ from{ background-position:200% 0; } to{ background-position:0 0; } }
@keyframes mf-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){
  #screen-matchfound, #screen-matchfound *, #screen-matchfound *::before{ animation:none !important; }
}

/* ============================================================
   PHONE LANDSCAPE (844x390 CSS; also runs rotated inside land.html)
   ============================================================ */
@media (max-height:520px) and (orientation:landscape){
  #screen-matchfound{ background-image:url('../assets/ui/lobby-bg-v4-mobile.webp') !important; }
  #screen-matchfound .mf-title{
    left:29.384vw; top:max(2.051vh, env(safe-area-inset-top)); width:41.232vw; height:12.308vh;
    border-width:6px 18px; border-image-width:6px 18px; font-size:min(6.667vh, 3.08vw); -webkit-text-stroke:1.5px #05070f; text-shadow:0 2px 0 #000;
  }
  #screen-matchfound .mf-plate{ top:16.41vh; width:28.436vw; height:13.333vh; gap:6px; padding:0 2px; border-width:8px; border-image-width:8px; }
  #screen-matchfound .mf-p1{ left:calc(2.37vw + env(safe-area-inset-left)); }
  #screen-matchfound .mf-p2{ right:calc(2.37vw + env(safe-area-inset-right)); }
  #screen-matchfound .mf-plate::after{ top:2px; bottom:2px; width:3px; }
  #screen-matchfound .mf-av{ width:8.72vh; height:8.72vh; }
  #screen-matchfound .mf-p1 .mf-av, #screen-matchfound .mf-p2 .mf-av{ box-shadow:0 0 0 2px currentColor; }
  #screen-matchfound .mf-p1 .mf-av{ color:var(--mf-blue); }
  #screen-matchfound .mf-p2 .mf-av{ color:var(--mf-red); }
  #screen-matchfound .mf-name{ font-size:min(4.103vh, 1.9vw); }
  #screen-matchfound .mf-rank{ font-size:12px; letter-spacing:1px; gap:6px; }
  #screen-matchfound .mf-rank .rank-ico, #screen-matchfound .mf-rank .gico{ width:14px; height:14px; }
  #screen-matchfound .mf-title-img{ height:15px; }
  #screen-matchfound .mf-ready{ height:22px; padding:0 8px; font-size:12px; gap:4px; letter-spacing:1px; border-radius:6px; transform:translate(-50%, 0); }
  #screen-matchfound .mf-dog{ top:30.769vh; width:30.332vw; height:65.641vh; }
  #screen-matchfound .mf-dog-p1{ left:calc(1.422vw + env(safe-area-inset-left)); }
  #screen-matchfound .mf-dog-p2{ right:calc(1.422vw + env(safe-area-inset-right)); }
  #screen-matchfound .mf-vs{ left:38.389vw; top:31.795vh; width:23.223vw; height:27.692vh; font-size:min(25vh, 11.6vw); -webkit-text-stroke:2px #2a1200; letter-spacing:2px;
    filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(255,190,40,.35)); }
  #screen-matchfound .mf-status{ left:33.175vw; top:65.641vh; width:33.649vw; height:19.487vh; gap:8px; padding:0 2px; border-width:10px; border-image-width:10px; }
  #screen-matchfound .mf-status-ico{ width:28px; height:28px; }
  #screen-matchfound .mf-status-txt b{ font-size:min(4.103vh, 1.9vw); line-height:1.1; }
  #screen-matchfound .mf-status-txt small{ font-size:12px; }
  /* 220px at 844 wide (spec); never narrower, so "FIND ANOTHER MATCH" still fits on 740px-wide phones */
  #screen-matchfound .mf-actions{ left:calc(50% - max(110px, 13.033vw)); top:auto; bottom:max(8px, env(safe-area-inset-bottom)); width:max(220px, 26.066vw); height:44px; gap:8px; }
  #screen-matchfound .mf-btn-main{ font-size:15px !important; letter-spacing:.5px; padding:0 4px !important; border-width:8px 12px !important; border-image-width:8px 12px !important; }
  #screen-matchfound .mf-btn-home{ width:44px; border-width:8px 10px !important; border-image-width:8px 10px !important; }
  #screen-matchfound .mf-btn-home .ico{ width:20px; height:20px; }
  body.mf-on #sfx-toggle{ top:max(8px, env(safe-area-inset-top)) !important; right:max(8px, env(safe-area-inset-right)) !important; width:44px !important; height:44px !important;
    border-width:8px 10px !important; border-image-width:8px 10px !important; font-size:16px; }
  body.mf-on #global-back-btn{ top:max(8px, env(safe-area-inset-top)); left:max(8px, env(safe-area-inset-left)); width:44px; height:44px; border-width:8px 10px; border-image-width:8px 10px; font-size:1.1rem; }
}