/* MatchMate intro concept — isolated layer only. Existing styles.css is unchanged. */
:root{--mm-intro-green:#76ff75;--mm-intro-bg:#060e09}
.mm-intro[hidden],.mm-intro-replay[hidden]{display:none!important}
.mm-intro{position:fixed;inset:0;z-index:2147480000;overflow:hidden;background:radial-gradient(ellipse at 50% 51%,#101e13 0%,#070e09 57%,#050908 100%);color:#f4faf2;isolation:isolate;opacity:1;transition:opacity .59s cubic-bezier(.2,.65,.2,1)}
.mm-intro.mm-intro-leaving{opacity:0;pointer-events:none}
.mm-intro.mm-intro-leaving .mm-intro-message{opacity:0;transform:translateY(-6px) scale(.965);transition-duration:.20s}
.mm-intro.mm-intro-leaving .mm-intro-fieldzone{opacity:0}
html.mm-intro-playing,html.mm-intro-playing body{overflow:hidden!important}
.mm-intro-noise{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 48.8%,rgba(118,255,117,.045) 50%,transparent 51.2%);background-size:100% 12px;opacity:.17;mix-blend-mode:screen}
.mm-intro:before,.mm-intro:after{content:'';position:absolute;top:7%;height:86%;width:1px;background:#233729;opacity:.55}
.mm-intro:before{left:4.2%}.mm-intro:after{right:4.2%}
.mm-intro-topline,.mm-intro-bottomline{position:absolute;z-index:3;left:7%;right:7%;display:flex;justify-content:space-between;gap:20px;font:800 clamp(9px,.72vw,12px)/1.5 'DM Sans',system-ui,sans-serif;letter-spacing:.22em;color:#96b19b}
.mm-intro-topline{top:clamp(26px,4.8vh,48px)}
.mm-intro-topline i{display:inline-block;width:7px;height:7px;background:var(--mm-intro-green);border-radius:50%;margin:0 14px 1px 9px}
.mm-intro-bottomline{bottom:clamp(26px,4.8vh,48px);color:#698773}
.mm-intro-skip{position:absolute;z-index:9;right:7%;top:clamp(58px,9.2vh,92px);min-width:136px;height:42px;display:flex;align-items:center;justify-content:center;gap:13px;border:1px solid rgba(179,205,177,.4);background:rgba(11,21,13,.66);color:#f5fff5;font:800 10px 'DM Sans',sans-serif;letter-spacing:.15em;cursor:pointer;transition:border .2s,background .2s}
.mm-intro-skip:hover,.mm-intro-skip:focus-visible{border-color:var(--mm-intro-green);background:#17351e;outline-offset:3px}
.mm-intro-skip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mm-intro-fieldzone{position:absolute;left:50%;top:48%;width:min(1000px,88vw);transform:translate(-50%,-50%);opacity:1;transition:opacity .42s linear,transform .5s ease}
.mm-intro-pitch{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 25px rgba(74,200,88,.11))}
.mm-intro-pitchlines{fill:none;stroke:rgba(124,223,134,.55);stroke-width:1.7;opacity:0;transition:opacity .5s ease}
.mm-intro-pitchlines>*{stroke-dasharray:1;stroke-dashoffset:1}
.mm-intro-activeplayers circle,.mm-intro-ghostplayers circle{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.15)}
.mm-intro-ghostplayers circle{fill:rgba(231,255,233,.42);stroke:#28362c;stroke-width:2}
.mm-intro-activeplayers circle{fill:var(--mm-intro-green);stroke:#061008;stroke-width:4;filter:drop-shadow(0 0 12px rgba(118,255,117,.36))}
.mm-intro-passlines{fill:none;stroke:var(--mm-intro-green);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:10 18;opacity:0}
.mm-intro-passlines path{stroke-dasharray:10 16;stroke-dashoffset:0}
#mmIntroBall{fill:#f5fff1;stroke:#081009;stroke-width:4;filter:drop-shadow(0 0 11px rgba(167,255,167,.75));opacity:0}
#mmIntroBallCenter{fill:#0d1d0e;opacity:0}
.mm-intro-side{position:absolute;top:51%;font:900 clamp(11px,1.15vw,16px)/1.45 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;color:#7d9e84;opacity:0;transition:opacity .3s}
.mm-intro-left{left:-4%;transform:translate(-100%,-50%);text-align:right}
.mm-intro-right{right:-4%;transform:translate(100%,-50%)}
.mm-intro-message{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .38s ease,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.mm-intro-overline{font:800 clamp(8px,.9vw,12px) 'DM Sans',sans-serif;letter-spacing:.26em;color:#74ff76;margin-bottom:36px}
.mm-intro-brand{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:28px}
.mm-intro-brand img:first-child{height:67px;width:auto;object-fit:contain}
.mm-intro-brand img:last-child{height:40px;width:auto;object-fit:contain}
.mm-intro-title{font:900 clamp(46px,7.5vw,126px)/.83 'Barlow Condensed','Impact',sans-serif;letter-spacing:-.012em;display:grid;gap:9px}
.mm-intro-title span{color:#ecf4eb}
.mm-intro-title strong{font:inherit;color:var(--mm-intro-green)}
.mm-intro.is-message .mm-intro-message{opacity:1;transform:none}
.mm-intro.is-message .mm-intro-fieldzone{opacity:.065;transform:translate(-50%,-50%) scale(1.05)}
.mm-intro.is-ready .mm-intro-pitchlines{opacity:1}
.mm-intro.is-ready .mm-intro-side{opacity:.75}
.mm-intro.is-ready .mm-intro-pitchlines>*{animation:mmDrawField 1.12s cubic-bezier(.22,.75,.23,1) forwards}
.mm-intro.is-ready .mm-intro-pitchlines>*:nth-child(2){animation-delay:.23s}
.mm-intro.is-ready .mm-intro-pitchlines>*:nth-child(3){animation-delay:.30s}
.mm-intro.is-ready .mm-intro-pitchlines>*:nth-child(n+4){animation-delay:.43s}
.mm-intro.is-ready .mm-intro-ghostplayers circle{animation:mmPlayerAppear .5s cubic-bezier(.16,1,.3,1) forwards}
.mm-intro.is-ready .mm-intro-ghostplayers circle:nth-child(2n){animation-delay:1.10s}
.mm-intro.is-ready .mm-intro-ghostplayers circle:nth-child(2n+1){animation-delay:1.00s}
.mm-intro.is-ready .mm-intro-activeplayers circle{animation:mmPlayerAppear .42s cubic-bezier(.16,1,.3,1) forwards}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(1){animation-delay:.86s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(2){animation-delay:.99s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(3){animation-delay:1.12s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(4){animation-delay:1.25s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(5){animation-delay:1.36s}
.mm-intro.is-passing .mm-intro-passlines{opacity:1}
.mm-intro.is-passing #mmIntroBall,.mm-intro.is-passing #mmIntroBallCenter{opacity:1}
@keyframes mmDrawField{to{stroke-dashoffset:0}}
@keyframes mmPlayerAppear{to{opacity:1;transform:scale(1)}}
.mm-intro-strike{position:fixed;z-index:7;pointer-events:none;left:0;top:0;width:100px;height:7px;background:var(--mm-intro-green);transform:scaleX(0);transform-origin:left center;opacity:0}
.mm-intro-strike.is-striking{opacity:1;animation:mmStrikeOut .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes mmStrikeOut{to{transform:scaleX(1)}}
.mm-intro-replay{position:fixed;z-index:500;bottom:20px;left:20px;background:rgba(5,13,7,.93);color:#8aff83;border:1px solid #315839;backdrop-filter:blur(15px);font:800 10px 'DM Sans',system-ui,sans-serif;letter-spacing:.11em;padding:12px 15px;cursor:pointer;transition:border-color .2s,background .2s}
.mm-intro-replay:hover,.mm-intro-replay:focus-visible{background:#152d1b;border-color:var(--mm-intro-green)}
@media(max-width:820px){
 .mm-intro-fieldzone{width:116vw;max-width:none;top:45%}
 .mm-intro-side{display:none}
 .mm-intro-brand img:first-child{height:60px}
 .mm-intro-brand img:last-child{height:34px}
 .mm-intro-title{font-size:clamp(49px,11.5vw,92px)}
}
@media(max-width:640px){
 .mm-intro:before{left:17px}.mm-intro:after{right:17px}
 .mm-intro-topline,.mm-intro-bottomline{left:26px;right:26px;font-size:8px;letter-spacing:.13em}
 .mm-intro-topline{top:calc(env(safe-area-inset-top) + 27px)}
 .mm-intro-topline span:last-child{display:none}
 .mm-intro-bottomline{bottom:calc(env(safe-area-inset-bottom) + 31px)}
 .mm-intro-skip{top:calc(env(safe-area-inset-top) + 68px);right:26px;height:37px;min-width:115px;font-size:9px}
 .mm-intro-fieldzone{width:148vw;top:43%;transform:translate(-50%,-50%) rotate(90deg)}
 .mm-intro.is-message .mm-intro-fieldzone{transform:translate(-50%,-50%) rotate(90deg) scale(1.09)}
 .mm-intro-overline{font-size:8px;letter-spacing:.12em;margin-bottom:33px}
 .mm-intro-brand{gap:12px;margin-bottom:28px}
 .mm-intro-brand img:first-child{height:47px}
 .mm-intro-brand img:last-child{height:28px}
 .mm-intro-title{font-size:clamp(51px,14vw,76px);line-height:.88}
 .mm-intro-message{padding:0 10px}
 .mm-intro-replay{left:12px;bottom:calc(14px + env(safe-area-inset-bottom));padding:9px 11px;font-size:9px}
 .mm-intro-strike{height:6px}
}
@media(prefers-reduced-motion:reduce){
 .mm-intro *, .mm-intro *::before,.mm-intro *::after{animation:none!important;transition:none!important}
 .mm-intro{display:none!important}
}

/* Preview refinement: preserve the visual brand while keeping SVG animation lightweight on mobile Safari. */
@media(max-width:820px){.mm-intro-pitch{filter:none}.mm-intro-activeplayers circle{filter:none}}
@media(max-width:640px){.mm-intro-title{font-size:clamp(46px,12.8vw,70px);max-width:100%;gap:12px}.mm-intro-title span,.mm-intro-title strong{overflow-wrap:normal;white-space:nowrap}.mm-intro-overline{max-width:90vw;line-height:1.65}}
/* Keep the longer PT-PT headline entirely inside narrow iPhone viewports. */
@media(max-width:640px){html[lang^="pt"] .mm-intro-title{font-size:clamp(35px,10vw,58px)}}


/* Double-M intro refinement */
.mm-intro-passlines{fill:none;stroke:var(--mm-intro-green);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.mm-intro-passlines path{filter:drop-shadow(0 0 10px rgba(118,255,117,.18));will-change:stroke-dashoffset}
.mm-intro-ball,.mm-intro-ball-center{opacity:0}
.mm-intro-ball{fill:#f5fff1;stroke:#081009;stroke-width:4;filter:drop-shadow(0 0 11px rgba(167,255,167,.75));will-change:transform}
.mm-intro-ball-center{fill:#0d1d0e}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(1){animation-delay:.82s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(2){animation-delay:.92s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(3){animation-delay:1.02s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(4){animation-delay:1.12s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(5){animation-delay:1.22s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(6){animation-delay:.82s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(7){animation-delay:.92s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(8){animation-delay:1.02s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(9){animation-delay:1.12s}
.mm-intro.is-ready .mm-intro-activeplayers circle:nth-child(10){animation-delay:1.22s}
.mm-intro.is-passing .mm-intro-ball,.mm-intro.is-passing .mm-intro-ball-center{opacity:1}
@media(max-width:640px){
 .mm-intro-passlines{stroke-width:2.85}
 .mm-intro-ball{filter:none}
}


/* ===== Logo-drawing intro: unrotated overlay + orientation-safe pitch sizing ===== */
.mm-intro-logolayer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden;transition:opacity .36s ease}
.mm-intro.is-message .mm-intro-logolayer,.mm-intro.mm-intro-leaving .mm-intro-logolayer{opacity:0}
.mm-intro.mm-intro-noside .mm-intro-side{display:none}
/* never let the horizontal pitch exceed the viewport height (short laptops) */
@media(min-width:821px){.mm-intro-fieldzone{width:min(1000px,88vw,calc((100vh - 130px)*1.5686));width:min(1000px,88vw,calc((100svh - 130px)*1.5686))}}
/* landscape phones / small landscape windows: pitch stays horizontal and fits the height (no 90deg rotation) */
@media(max-width:820px) and (orientation:landscape){
 .mm-intro-fieldzone{width:min(88vw,calc((100vh - 70px)*1.5686));width:min(88vw,calc((100svh - 70px)*1.5686));top:50%;transform:translate(-50%,-50%)}
 .mm-intro.is-message .mm-intro-fieldzone{transform:translate(-50%,-50%) scale(1.05)}
}