/* FL5 photographic/matchday visual layer — 2026-11-07.
   Grounded in user-supplied legacy screenshots, with licensed/live content gates.
   Brand tokens are white-label capable; screenshot scores and player photos are NOT assets. */
:root{
 --fl-bg:#08060e; --fl-surface:#100b18; --fl-surface-2:#191023;
 --fl-border:#733a9f80; --fl-border-strong:#b552f4;
 --fl-accent:#c34dff; --fl-purple:#8d22dc; --fl-lilac:#e7b8ff;
 --fl-ink:#fdf8ff; --fl-muted:#b1a5c0; --fl-serif:Georgia,"Times New Roman",serif;
 --fl-radius:24px; --fl-max:1440px; --fl-hairline:1px solid #a748d445;
}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{color:var(--fl-ink);background:radial-gradient(ellipse 62vw 45vw at 95% 4%,#280b40 0%,transparent 78%),radial-gradient(ellipse 40vw 65vw at -10% 65%,#1f0c2d 0%,transparent 80%),var(--fl-bg)}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(100deg,transparent 0%,#38175311 50%,transparent 100%);opacity:.6}
::selection{background:#ad45e8;color:#fff}
:focus-visible{outline:2px solid #f1b5ff!important;outline-offset:4px}
.shell{max-width:var(--fl-max);padding-inline:clamp(18px,3.3vw,46px)}
.site-head{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:#09060aef;border-bottom:1px solid #a63ce93c;box-shadow:0 6px 45px #08040c99}
.head-main{height:90px}
.head-menu{border:1px solid #ae74ce75;border-radius:15px;width:49px;height:49px;background:linear-gradient(140deg,#1b1023,#08040c);box-shadow:inset 0 0 0 1px #ffffff09}
.head-menu span{background:#f4e7fc;border-radius:3px}
.site-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0!important;padding:8px 18px!important;min-width:205px;border-inline:1px solid #9d5ca420;font:400 26px var(--fl-serif);letter-spacing:.09em;text-shadow:0 0 15px #792ca02c}
.site-mark span{font-size:clamp(18px,2.2vw,28px);line-height:1.04}
.site-mark b{font:500 10px Inter,Arial,sans-serif;letter-spacing:.55em;color:#ddc0f2;padding-left:.48em}
.head-actions{align-items:center;gap:13px}
.head-action{display:grid;place-items:center;width:45px;height:45px;border:1px solid #b985dc45;background:#1b1320ba;box-shadow:0 0 22px #6d2c9625;border-radius:50%;font-weight:700;font-size:15px}
.live-indicator{width:9px;height:9px;background:#77627e;box-shadow:0 0 0 4px #77627e20}
.main-nav{gap:clamp(17px,2.5vw,34px);justify-content:center;padding-block:0 15px}
.main-nav a{letter-spacing:.13em;color:#cfc0d6;font-size:10px;transition:color .2s}
.main-nav a:hover{color:var(--fl-lilac)}
.quick-actions{max-width:var(--fl-max);gap:10px;padding-top:18px;padding-bottom:16px}
.quick-actions a{flex:1 0 120px;min-width:115px;padding:15px 20px;border-radius:999px;border:1px solid #9b68b74e;background:linear-gradient(180deg,#28202d,#0c0811);color:#e4dbea;box-shadow:inset 0 1px #ffffff13;letter-spacing:.09em;font-size:10px;transition:background .2s,box-shadow .2s}
.quick-actions a:first-child{background:linear-gradient(140deg,#481361,#16091e)}
.quick-actions a[href="#highlights"]{background:linear-gradient(130deg,#9b30d5,#541478);border-color:#d67aff;box-shadow:0 0 22px #c144ff70}
.quick-actions a:hover,.tab-bar button:hover{box-shadow:0 0 25px #ac36e34b}
.hero.shell{max-width:none;padding-inline:0;padding-top:0}
.hero-head{max-width:var(--fl-max);padding:18px clamp(18px,3.3vw,46px);margin:auto;display:flex;justify-content:space-between}
.hero-head .eyebrow,.dot-label{font-size:10px;letter-spacing:.21em;color:#caa7df}
.hero-panel{border-radius:0;border-inline:0;min-height:clamp(520px,57vw,790px);position:relative;background:radial-gradient(ellipse at 52% 43%,#4c1a7255,#13081d77 39%,#040308 78%),linear-gradient(110deg,#120819,#08050d);grid-template-columns:52% 48%;border-block:1px solid #8443a65e}
.hero-art{position:relative;isolation:isolate;min-height:inherit;background:radial-gradient(ellipse at 40% 57%,#8e30dc43,#38085638 30%,transparent 68%);font-style:normal}
.hero-art:before{content:"";position:absolute;inset:10% 0 0 1%;background:repeating-radial-gradient(ellipse at 47% 60%,#f28fff16 0 1px,transparent 1px 18px);filter:blur(3px);mask-image:linear-gradient(90deg,#000,transparent)}
.hero-art:after{content:"";width:clamp(170px,26vw,380px);aspect-ratio:1;position:absolute;left:22%;top:19%;border:1px solid #bf50ed77;border-radius:50%;box-shadow:0 0 20px #9634d870,0 0 130px 28px #8b24d750,inset 0 0 55px 10px #7819ba43}
.hero-monogram{font:italic clamp(190px,31vw,480px) var(--fl-serif);position:relative;z-index:1;color:#cf83fb;text-shadow:0 0 9px #9d4af7,0 0 80px #9e32ef66;opacity:.68}
.hero-copy{padding:clamp(35px,5vw,110px);position:relative;z-index:2}
.hero-copy h1{font:500 clamp(54px,7.2vw,116px)/.91 var(--fl-serif);letter-spacing:-.062em;max-width:750px;text-wrap:balance}
.hero-copy h1 em{color:#d86dff;text-shadow:0 0 65px #a737f957}
.hero-copy p{max-width:440px;color:#e0d0e8;font-size:clamp(13px,1.2vw,17px);line-height:1.6}
.eyebrow{font-size:10px;letter-spacing:.21em;color:#c26dfa}
.btn,.btn-primary,.btn-outline{padding:15px 24px;border-radius:999px;border:1px solid #9e51e270;letter-spacing:.1em;font-size:11px;font-weight:800;color:#fff;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 22px #9436e855}
.btn-primary{background:linear-gradient(100deg,#8032bb,#bb48f4);box-shadow:0 4px 26px #8424c247}
.btn-outline{background:#110919bb}
.hero-media{max-width:var(--fl-max);margin:18px auto;padding:19px 28px;border:1px solid #7945a257;background:linear-gradient(110deg,#150d1f,#1e0c31);border-radius:17px}
.hero-panel.has-video{min-height:clamp(520px,57vw,790px)}
.hero-panel.has-video .hero-art{background:#09050e}
.hero-panel.has-video .hero-copy{min-height:clamp(520px,57vw,790px);padding-inline:clamp(25px,5vw,110px)}
.hero-panel.has-video .hero-copy h1{font:500 clamp(34px,4.1vw,65px)/1 var(--fl-serif);text-shadow:0 2px 25px #040209}
.hero-video-trigger{position:relative}
.hero-video-trigger:after{content:"▶";font:800 24px Arial,sans-serif;color:#fff;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#9b2adae8;box-shadow:0 0 0 10px #8e36d935,0 0 35px #801acb88;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);pointer-events:none}
.section,.match-module{padding-top:clamp(60px,8vw,112px)}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:1px solid #933bb23c;padding-bottom:15px;margin-bottom:22px}
.section-title h2{font:500 clamp(33px,4.2vw,62px)/1.02 var(--fl-serif);margin:10px 0 0;letter-spacing:-.045em}
.section-title h2 em{font-style:normal;color:#ca65fd}
.section-title .eyebrow{display:block}
.story-card,.panel,.player-card,.formation-field,.match-card{border:1px solid var(--fl-border);background:linear-gradient(155deg,#1b1127,#0b0710 70%);border-radius:var(--fl-radius);box-shadow:0 10px 45px #03010577;overflow:hidden}
.story-card{transition:transform .2s,border-color .2s;min-height:260px}
.story-card:hover{transform:translateY(-3px);border-color:#c86bff}
.story-top{height:160px;display:grid;place-items:center;font:italic 66px var(--fl-serif);background:radial-gradient(circle at 60% 30%,#572079,#120b1e 70%);color:#bb74f6}
.story-top:has(img){height:260px}
.story-top img{transition:transform .45s}
.story-card:hover .story-top img{transform:scale(1.045)}
.story-copy{padding:clamp(18px,2.4vw,29px);gap:13px}
.story-copy h3{font:500 clamp(19px,2vw,27px)/1.14 var(--fl-serif);letter-spacing:-.022em}
.story-copy small{order:-1;text-transform:uppercase;letter-spacing:.15em;color:#b87cda}
.story-copy p{line-height:1.58}
.story-copy a{width:max-content;border-bottom:1px solid #b961e2;padding-bottom:4px;letter-spacing:.12em;font-size:10px}
#news .story-card:first-child{grid-column:span 2;grid-row:span 2;min-height:520px}
#news .story-card:first-child .story-top{height:clamp(260px,24vw,400px)}
#news .story-card:first-child .story-copy h3{font-size:clamp(28px,3.2vw,43px)}
#vvv .story-card:first-child{grid-column:span 2;grid-row:span 2;min-height:520px}
#vvv .story-card:first-child .story-top{height:clamp(260px,24vw,400px)}
#vvv .story-card:first-child .story-copy h3{font-size:clamp(27px,3vw,42px)}
.tab-bar{gap:9px;padding:3px 2px 18px;scrollbar-width:thin;scrollbar-color:#7a478f transparent}
.tab-bar button{border:1px solid #a477b74d;color:#e2d6eb;background:linear-gradient(#29202f,#100b16);border-radius:999px;padding:14px 18px;letter-spacing:.075em;box-shadow:inset 0 1px #ffffff13}
.tab-bar button[aria-selected=true]{background:linear-gradient(#45225b,#160d22);border:1px solid #f5d8ff;color:#fff;box-shadow:0 0 0 2px #9d51da52,0 0 28px #bb44ff80}
.match-module{position:relative}
.match-card{min-height:clamp(340px,33vw,470px);background:linear-gradient(0deg,#071122ad,#07152d45),radial-gradient(ellipse at 50% 70%,#45649b,#172c52 45%,#0a1027 76%),repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 42px);border-color:#bd58e4;border-radius:25px 25px 0 0;position:relative}
.match-card:before{content:"MATCHDAY · DATI VERIFICATI";position:absolute;top:24px;left:26px;font-size:10px;letter-spacing:.18em;color:#efc7ff}
.match-card:after{content:"";position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,#ac31e9,#e493ff,#8127b0);opacity:.8}
.match-team{font:600 clamp(18px,2.8vw,37px) var(--fl-serif)}
.match-score{font-size:clamp(36px,6vw,94px);font-weight:900;letter-spacing:-.035em;text-shadow:0 7px 20px #060211aa}
.match-clock{font-size:12px;letter-spacing:.16em;color:#e5bbff;text-transform:uppercase}
.match-live-grid{max-width:950px;gap:clamp(12px,3vw,50px)}
.match-strip{margin-top:0;padding:18px 12px;background:#0e0b16;border:1px solid #8541ad75;border-top:0;border-radius:0 0 20px 20px}
.mini-match{background:linear-gradient(#23132e,#0c0914);min-width:210px;padding:18px;border-color:#8d4c9f50}
.fl5-match-tabs{margin-top:18px}
.fl5-match-panel{margin-top:0;border:1px solid #7a3fa263;border-radius:19px;background:linear-gradient(150deg,#190e27,#0c0813);padding:clamp(17px,2vw,30px);color:#cfc1da}
.fl5-match-panel strong{font:500 clamp(20px,2.8vw,32px) var(--fl-serif);display:block;margin-bottom:6px;color:#f7e8ff}
.fl5-match-panel p{margin:7px 0 0;font-size:13px;line-height:1.6}
.fl5-match-panel[hidden]{display:none}
.fl5-side-rail{position:fixed;top:69%;z-index:20;padding:15px 10px;background:linear-gradient(170deg,#23102c,#0a0710);color:#f8e7ff;border:1px solid #9f43d4;border-radius:0 18px 18px 0;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);text-orientation:mixed;letter-spacing:.14em;font-weight:800;font-size:9px;min-height:137px;display:flex;gap:12px;align-items:center;justify-content:center;box-shadow:0 0 26px #a03bce38}
.fl5-side-rail:before{content:"";width:9px;height:9px;border-radius:50%;background:#a962f1;box-shadow:0 0 14px #a962f1}
.fl5-side-rail--left{left:0}
.fl5-side-rail--right{right:0;transform:translateY(-50%);border-radius:18px 0 0 18px}
.fl5-side-rail--right:before{background:#59dab0;box-shadow:0 0 14px #59dab0}
.fl5-copilot{border:1px solid #a55ae2;border-radius:28px;padding:clamp(19px,3vw,38px);background:radial-gradient(ellipse at 65% -30%,#68238777,transparent 60%),linear-gradient(#200d2e,#0b0710);box-shadow:0 15px 50px #0008,0 0 40px #62217b2d}
.fl5-copilot-header{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #af6cc34c;padding-bottom:18px;margin-bottom:18px}
.fl5-copilot-header h2{font:500 clamp(30px,3vw,48px) var(--fl-serif);margin:0}
.fl5-copilot-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.21em;color:#cb88f2}
.fl5-copilot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fl5-copilot-card{display:flex;gap:15px;align-items:center;min-height:110px;border:1px solid #ad67cd59;border-radius:19px;background:linear-gradient(120deg,#25112f,#0e0915);padding:17px;color:#fff;text-decoration:none}
a.fl5-copilot-card:hover{border-color:#d480ff;background:#352044}
.fl5-copilot-icon{flex:0 0 60px;height:65px;border:1px solid #9e5db06e;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle,#69279e,#160e20);font:500 31px var(--fl-serif);color:#dba0ff}
.fl5-copilot-card strong{font-size:13px;display:block;line-height:1.45}
.fl5-copilot-card small{font-size:9px;display:block;color:#d699f1;letter-spacing:.12em;margin-bottom:5px}
.fl5-copilot-card[aria-disabled=true]{opacity:.54}
.fl5-copilot-empty{color:#bdacd0;font-size:13px;line-height:1.7;margin:10px 0 0}
.fl5-copilot-action{display:flex;justify-content:center;padding-top:20px}
.fl5-copilot-action .btn{min-width:240px;text-align:center}
.formation-field{border-radius:24px;background:radial-gradient(ellipse at center,#193b2f85,#0b171a 70%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 40px),#0b1215;position:relative;isolation:isolate}
.formation-field:before{content:"";position:absolute;pointer-events:none;inset:18px;border:1px solid #d8f4ed30;border-radius:4px;z-index:-1}
.formation-field:after{content:"";position:absolute;pointer-events:none;inset:18px 50%;width:1px;background:#d8f4ed26;z-index:-1}
.formation-slots{max-width:none;margin:25px 0 30px}
.formation-slot{min-height:40px;border-radius:50%;border:1px solid #c990f3a5;background:radial-gradient(circle,#602a91a6,#28163bba);box-shadow:0 0 13px #8e42d72f}
.formation-slot.is-filled{background:#a62ceb;box-shadow:0 0 22px #a33bdf}
.player-card{min-height:260px}
.player-card .portrait{height:190px;border-radius:14px;background:radial-gradient(circle at 45% 30%,#783c96,#2d0e42 57%,#09050e);font:italic 80px var(--fl-serif)}
#market-body .panel{min-height:140px}
.fl5-vote-status{margin-top:18px;padding:22px 26px;border:1px solid #824bb162;border-radius:22px;background:linear-gradient(135deg,#21102c,#0c0814)}
.fl5-vote-status h3{font:500 clamp(21px,2.8vw,34px) var(--fl-serif);margin:0 0 8px}
.fl5-vote-status p{font-size:12px;color:#beafcb;line-height:1.7;margin:0}
#fan .panel{min-height:160px}
#highlights .story-card{min-height:260px}
#highlights .story-top{height:160px}
#legends .unavailable{min-height:230px;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 0%,#3d1559,#0c0813 68%)}
.footer{background:#07040a;border-top:1px solid #913bca4a;padding:75px 0 35px}
.footer .site-mark{border:0}
.footer .site-mark span{font-size:26px}
@media (min-width:1400px){.story-grid{gap:19px}.surface-grid,.player-grid{gap:18px}}
@media (max-width:960px){
 .hero-panel{grid-template-columns:42% 58%;min-height:540px}
 .hero-copy{padding:40px}
 .hero-copy h1{font-size:65px}
 .fl5-copilot-grid{grid-template-columns:1fr}
 .fl5-copilot-card{min-height:92px}
 #news .story-card:first-child,#vvv .story-card:first-child{grid-column:1/-1;grid-row:auto}
 .story-top:has(img){height:220px}
}
@media (max-width:600px){
 .shell{padding-inline:16px}
 html{scroll-padding-top:86px}
 .head-main{height:78px;grid-template-columns:1fr auto 1fr}
 .site-mark{min-width:140px;padding:3px 8px!important}
 .site-mark span{font-size:19px}
 .site-mark b{font-size:8px;letter-spacing:.37em}
 .head-menu{width:47px;height:47px}
 .head-actions{gap:8px}
 .head-action{width:37px;height:37px;font-size:12px}
 .main-nav{padding:0;justify-content:flex-start}
 .site-head.menu-open .main-nav{padding:14px 17px;max-height:240px;gap:12px}
 .quick-actions{padding-block:16px 12px;gap:7px}
 .quick-actions a{flex:0 0 auto;min-width:104px;padding:13px 15px;font-size:9px}
 .hero-head{display:flex;padding:13px 18px;gap:8px}
 .hero-head .eyebrow,.dot-label{font-size:8px;letter-spacing:.11em}
 .hero-panel{grid-template-columns:1fr;min-height:630px}
 .hero-art{position:absolute;inset:0 0 35%;min-height:420px;opacity:.83}
 .hero-art:after{top:13%;left:23%;width:53vw;max-width:245px}
 .hero-monogram{font-size:clamp(170px,55vw,280px)}
 .hero-copy{padding:26px 24px 39px;min-height:630px;justify-content:end;background:linear-gradient(to top,#08040def 4%,transparent 78%)}
 .hero-copy h1{font-size:clamp(55px,12.2vw,73px);line-height:.93;margin:10px 0}
 .hero-copy p{font-size:13px;max-width:330px}
 .hero-buttons .btn{padding:13px 17px;font-size:10px}
 .hero-media{margin:14px 16px;padding:17px}
 .hero-panel.has-video,.hero-panel.has-video .hero-copy{min-height:520px}
 .hero-panel.has-video .hero-copy{padding:25px}
 .hero-panel.has-video .hero-copy h1{font-size:35px}
 .section,.match-module{padding-top:70px}
 .section-title{padding-bottom:10px;margin-bottom:14px}
 .section-title h2{font-size:37px}
 .section-title .eyebrow{font-size:9px}
 .story-grid,.surface-grid,.player-grid{grid-template-columns:1fr;gap:14px}
 #news .story-card:first-child,#vvv .story-card:first-child{grid-column:1/-1;min-height:350px}
 #news .story-card:first-child .story-top,#vvv .story-card:first-child .story-top{height:235px}
 #news .story-card:first-child .story-copy h3,#vvv .story-card:first-child .story-copy h3{font-size:28px}
 .story-card{min-height:unset}
 .story-top{height:115px}
 .story-top:has(img){height:190px}
 .story-copy h3{font-size:22px}
 .story-copy p{display:block;font-size:12px}
 .match-card{min-height:340px;border-radius:17px 17px 0 0}
 .match-card:before{font-size:8px;top:14px;left:14px}
 .match-score{font-size:39px}
 .match-team{font-size:19px}
 .match-live-grid{grid-template-columns:1fr auto 1fr;gap:9px}
 .match-strip{padding:12px 7px}
 .mini-match{min-width:178px}
 .fl5-match-tabs{margin-top:20px}
 .fl5-match-panel{padding:17px}
 .fl5-side-rail{top:73%;min-height:100px;font-size:8px;padding:10px 6px;opacity:.85}
 .fl5-copilot{padding:20px 15px;border-radius:20px}
 .fl5-copilot-header h2{font-size:30px}
 .fl5-copilot-grid{gap:10px}
 .fl5-copilot-card{padding:12px;min-height:88px}
 .fl5-copilot-icon{height:56px;flex-basis:54px}
 .formation-field{padding:15px;min-height:290px}
 .formation-field:before{inset:13px}
 .formation-field:after{inset:13px 50%}
 .formation-slot{min-height:25px}
 .player-card .portrait{height:155px}
 .footer{margin-top:68px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-card,.story-top img,.btn,.quick-actions a{transition:none!important}.hero-art:before{display:none}}