.match-intro-action{display:flex;justify-content:center;margin-top:12px}.match-intro-trigger{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid #d4dfeb;border-radius:30px;background:#f4f7fb;color:#172f51;font:700 13px Manrope,sans-serif;cursor:pointer}.match-intro-trigger:hover{background:#172f51;color:white;border-color:#172f51}.match-intro-trigger span{color:#b86b0d;font-size:10px}.match-intro-trigger[hidden]{display:none}.match-intro-open{overflow:hidden}
.match-intro{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050d1a;color:#fff;overscroll-behavior:contain}.match-intro::backdrop{background:#050d1a}.match-intro *{box-sizing:border-box}.mi-stage{--mi-gold:#fbc668;position:relative;isolation:isolate;min-height:100%;height:100%;overflow:hidden;font-family:Manrope,Arial,sans-serif;background:#050d1a}.mi-sky,.mi-stars,.mi-stands,.mi-vignette{position:absolute;inset:0;pointer-events:none}.mi-sky{background:radial-gradient(ellipse at 50% 45%,#1c4160 0,transparent 65%),linear-gradient(#030918,#13293d 65%,#081e24)}.mi-stars{opacity:.45;background-image:radial-gradient(#d7edff 1px,transparent 1px),radial-gradient(#cba467 1px,transparent 2px);background-size:89px 77px,137px 109px;mask-image:linear-gradient(#000,transparent 80%)}.mi-stands{top:48%;height:24%;background:repeating-linear-gradient(0deg,transparent 0 8px,#a6c6d128 9px 10px),repeating-linear-gradient(90deg,#091725 0 6px,#64798577 7px 8px,#132e3f 9px 16px);clip-path:polygon(0 0,18% 16%,50% 32%,82% 16%,100% 0,100% 100%,0 100%);opacity:.65}.mi-stands:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:#eef8ff;box-shadow:0 0 30px 8px #99ddff}
.mi-beam{position:absolute;top:-10%;width:52%;height:115%;pointer-events:none;opacity:.45;background:linear-gradient(180deg,#bce8ff99,transparent 85%);clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);filter:blur(3px);transform-origin:50% 0}.mi-beam-left{left:-12%;transform:rotate(-23deg)}.mi-beam-right{right:-12%;transform:rotate(23deg)}.mi-running .mi-beam-left{animation:mi-sweep-left 10s ease-in-out both}.mi-running .mi-beam-right{animation:mi-sweep-right 10s ease-in-out both}.mi-pitch{position:absolute;left:-30%;width:160%;height:65%;top:66%;background:repeating-linear-gradient(90deg,#123d35 0 10%,#10362f 10% 20%);transform:perspective(600px) rotateX(55deg);transform-origin:50% 0;border-top:2px solid #a8d7b344;box-shadow:0 -12px 100px #63c6a233}.mi-field{position:absolute;inset:8% 19%;border:2px solid #c8e6ce55}.mi-field:before{content:"";position:absolute;left:50%;height:100%;border-left:2px solid #c8e6ce55}.mi-field i{position:absolute;left:40%;top:25%;width:20%;height:50%;border:2px solid #c8e6ce55;border-radius:50%}.mi-field b,.mi-field em{position:absolute;top:22%;width:13%;height:56%;border:2px solid #c8e6ce55}.mi-field b{left:-2px}.mi-field em{right:-2px}.mi-vignette{background:radial-gradient(ellipse at center,transparent 20%,#020813ba 100%),linear-gradient(transparent 50%,#030b18 100%)}
.mi-topline{position:absolute;top:max(30px,env(safe-area-inset-top));left:5%;right:90px;display:flex;gap:16px;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.17em;color:#b9c9d8}.mi-topline b{color:var(--mi-gold);padding:0 7px}.mi-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:24px;border:1px solid #ffffff40;border-radius:50%;width:44px;height:44px;background:#081423b3;color:white;font-size:20px;cursor:pointer;z-index:5}.mi-close:hover{background:#ffffff25}.match-intro button:focus-visible,.match-intro-trigger:focus-visible{outline:3px solid #fbc668;outline-offset:4px}
.mi-opening{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .5s,transform .7s}.mi-opening img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 0 32px #fbc66844);margin-bottom:20px}.mi-opening p{font-size:12px;font-weight:800;letter-spacing:.26em;color:#c3d2df;margin:0 0 14px}.mi-opening h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(42px,7.5vw,110px);line-height:.96;letter-spacing:-.02em;margin:0;color:#fff}.mi-opening h2 span{color:var(--mi-gold)}.mi-opening-line{width:60px;height:3px;margin-top:26px;background:var(--mi-gold);box-shadow:0 0 25px #fbc66888}.mi-running .mi-opening{animation:mi-intro-in 1.2s both}.mi-stage:not([data-phase=opening]) .mi-opening{opacity:0;transform:scale(1.18);pointer-events:none;visibility:hidden}
.mi-matchup{position:absolute;left:6%;right:6%;top:50%;transform:translateY(-44%) scale(var(--mi-scale,1));text-align:center;visibility:hidden}.mi-stage:not([data-phase=opening]) .mi-matchup{visibility:visible}.mi-kicker{font-size:11px;font-weight:800;letter-spacing:.32em;color:var(--mi-gold);margin:0 0 42px}.mi-teams{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);align-items:center;gap:30px}.mi-team{min-width:0;opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .7s}.mi-home{transform:translateX(-110%)}.mi-away{transform:translateX(110%)}.mi-team span{display:block;color:#a2bacb;font-size:10px;letter-spacing:.3em;font-weight:800;margin-bottom:16px}.mi-team strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(28px,5.4vw,82px);line-height:1.06;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 3px 22px #0008}.mi-home strong{color:#fff}.mi-away strong{color:var(--mi-gold)}.mi-stage:not([data-phase=opening]) .mi-team{opacity:1;transform:translateX(0)}.mi-vs{position:relative;color:#a7c0ce;font-family:'Barlow Condensed',Impact,sans-serif;font-size:34px;font-style:italic;opacity:0;transform:scale(.5);transition:opacity .5s,transform .7s}.mi-vs:before{content:"";position:absolute;inset:-22px;border:1px solid #fbc66855;transform:rotate(45deg);box-shadow:0 0 35px #fbc66811}.mi-stage[data-phase=versus] .mi-vs,.mi-stage[data-phase=final] .mi-vs{opacity:1;transform:scale(1)}.mi-stage[data-phase=versus]:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff2 48%,transparent 65%);pointer-events:none;animation:mi-flash 1s both}
.mi-match-details{margin:36px auto 0;max-width:720px;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}.mi-stage[data-phase=final] .mi-match-details{opacity:1;transform:translateY(0)}.mi-location{font-weight:800;font-size:14px;color:#d5e5ef;margin:0}.mi-note{white-space:pre-line;font-size:13px;line-height:1.55;color:#bbccd8;margin:10px 0;max-height:16vh;overflow:auto;overflow-wrap:anywhere}.mi-result{display:inline-flex;align-items:center;gap:18px;padding:10px 24px;margin-top:8px;border:1px solid #fbc66855;border-radius:6px;background:#07172599}.mi-result[hidden]{display:none}.mi-result span{font-size:9px;font-weight:800;letter-spacing:.17em;color:#bdcbd6}.mi-result strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;line-height:1;color:var(--mi-gold)}
.mi-bottom{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:20px}.mi-caption{color:#a3bacb;font-size:11px}.mi-controls{display:flex;gap:10px}.mi-controls button{border:1px solid #ffffff30;border-radius:30px;background:#08192bbf;color:#dce6ef;padding:12px 17px;font:700 12px Manrope,sans-serif;cursor:pointer}.mi-controls button:hover{background:#25405a}.mi-controls button[aria-pressed=true]{border-color:#fbc668;color:#fbc668}.mi-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff15}.mi-progress span{display:block;width:100%;height:100%;background:var(--mi-gold);transform:scaleX(1);transform-origin:left}.mi-running .mi-progress span{animation:mi-progress 10s linear both}
@keyframes mi-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes mi-intro-in{from{opacity:0;filter:blur(6px);transform:scale(.92)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes mi-sweep-left{0%{transform:rotate(-35deg)}50%{transform:rotate(12deg)}100%{transform:rotate(-15deg)}}@keyframes mi-sweep-right{0%{transform:rotate(35deg)}50%{transform:rotate(-12deg)}100%{transform:rotate(15deg)}}@keyframes mi-flash{from{transform:translateX(-100%);opacity:0}30%{opacity:1}to{transform:translateX(100%);opacity:0}}
@media(max-width:650px){.mi-topline{top:max(24px,env(safe-area-inset-top));left:22px;font-size:9px;letter-spacing:.08em;display:block}.mi-round{display:block;margin-top:9px}.mi-close{right:18px;top:max(18px,env(safe-area-inset-top))}.mi-matchup{left:8%;right:8%;transform:translateY(-48%) scale(var(--mi-scale,1))}.mi-kicker{font-size:9px;letter-spacing:.22em;margin-bottom:27px}.mi-teams{grid-template-columns:1fr;gap:22px}.mi-team strong{font-size:clamp(27px,8.8vw,48px);line-height:1.04}.mi-team span{font-size:9px;margin-bottom:8px}.mi-vs{font-size:23px;margin:0 auto;width:36px}.mi-vs:before{inset:-5px}.mi-match-details{margin-top:25px}.mi-location{font-size:12px}.mi-note{font-size:12px;max-height:11vh}.mi-result{padding:8px 16px;gap:12px}.mi-result strong{font-size:30px}.mi-bottom{left:20px;right:20px;bottom:max(22px,env(safe-area-inset-bottom));display:block;text-align:center}.mi-caption{display:block;margin-bottom:14px;font-size:10px}.mi-controls{justify-content:center}.mi-controls button{font-size:11px;padding:12px 14px}.mi-opening p{font-size:9px;letter-spacing:.17em}.mi-opening h2{font-size:clamp(48px,14vw,80px)}.mi-opening img{width:92px;height:92px}.mi-pitch{top:68%;width:200%;left:-50%;height:50%}}
@media(max-height:560px){.mi-opening img{width:60px;height:60px;margin-bottom:12px}.mi-opening h2{font-size:44px}.mi-opening-line{margin-top:12px}.mi-opening p{font-size:9px}.mi-topline{top:17px}.mi-kicker{margin-bottom:14px}.mi-matchup{top:46%}.mi-teams{grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);gap:16px}.mi-team strong{font-size:clamp(22px,4vw,44px)}.mi-team span{margin-bottom:6px}.mi-vs{font-size:24px}.mi-vs:before{inset:-8px}.mi-match-details{margin-top:17px}.mi-note{max-height:10vh;margin:5px 0}.mi-result{padding:5px 14px;margin-top:2px}.mi-result strong{font-size:26px}.mi-bottom{bottom:14px;display:flex}.mi-caption{margin:0}.mi-controls button{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.match-intro *,.match-intro *:before,.match-intro *:after{animation:none!important;transition:none!important}.mi-stage:after{display:none}}