/* Update 8.38: the stats as boxed rows (the user's picture) - every panel that shows a player's stats. Icon in an orange-framed square, name, lime
   bar, value; the +1 / +5 buttons only where PA can be spent. Scoped to .st838 and !important to win over the older per-screen rules. */
.st838{display:flex!important;flex-direction:column!important;gap:var(--st-gap,5px)!important;margin:6px 0 0!important;width:100%;min-width:0;--st-h:clamp(28px,4.4vh,46px)}
.st838.st838 .sline.sline{display:grid!important;grid-template-columns:var(--st-h) minmax(64px,.95fr) minmax(40px,1.7fr) 30px!important;grid-template-areas:none!important;grid-template-rows:auto!important;align-items:center!important;
 gap:0 clamp(7px,.8vw,12px)!important;min-height:var(--st-h)!important;margin:0!important;padding:4px clamp(7px,.7vw,11px) 4px 4px!important;box-sizing:border-box;
 border-radius:10px;border:1px solid #ffffff17;background:linear-gradient(180deg,#183229cc,#0f2019d9);box-shadow:inset 0 1px 0 #ffffff0d,0 2px 6px #00000040;font-size:inherit}
.st838.st838.buy .sline.sline{grid-template-columns:var(--st-h) minmax(64px,.95fr) minmax(40px,1.5fr) 30px auto!important}
.st838.st838 .sline.sline>*{grid-area:auto!important;grid-row:1!important;margin:0!important;position:static!important}
.st838 .sl-icobox{width:calc(var(--st-h) - 6px);height:calc(var(--st-h) - 6px);display:grid;place-items:center;border-radius:7px;box-sizing:border-box;
 border:1.5px solid #e88a3a;background:radial-gradient(circle at 50% 35%,#2a2a1c,#101a14);box-shadow:0 0 6px #ff8f2e55,inset 0 0 6px #ff8f2e22}
.st838 .sl-icobox .sl-ico{width:62%;height:62%;stroke:#d4f26a;stroke-width:2.2;filter:drop-shadow(0 0 3px #d4f26a66)}
.st838 .sl-name{display:flex!important;align-items:center;line-height:1.2;font-family:var(--fam);font-weight:900!important;font-style:normal;font-size:clamp(10px,.78vw,13px)!important;letter-spacing:.04em;text-transform:uppercase;color:#f1f5ea!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st838 .sl-bar{display:flex!important;height:clamp(8px,1vh,11px)!important;border-radius:99px!important;background:#ffffff14!important;overflow:hidden;box-shadow:inset 0 1px 2px #00000066}
.st838 .sl-bar i{background:linear-gradient(90deg,#9fd13a,#d4f26a)!important;box-shadow:0 0 8px #d4f26a88;border-radius:99px}
.st838 .sl-bar u{background:linear-gradient(90deg,#e0b040,var(--gold))!important}
.st838.st838 .sline.sline strong{font-family:var(--fam);font-weight:900;font-style:normal!important;font-size:clamp(13px,1.05vw,18px)!important;text-align:right;color:#fff;white-space:nowrap}
.st838.st838 .sline.sline strong em{font-size:.7em}
.st838 .sl-buy{display:flex!important;flex-direction:row!important;gap:6px!important;justify-content:flex-end}
.st838 .sl-buy button,.alpha-panel .st838 .sl-buy button{min-width:0!important;width:clamp(28px,2.3vw,38px)!important;height:calc(var(--st-h) - 10px)!important;min-height:0!important;padding:0!important;margin:0!important;
 border-radius:7px!important;font-size:clamp(10px,.75vw,12px)!important;font-weight:800;border:1px solid #ffffff24!important;background:#ffffff0d!important;color:#e9f2df!important;box-shadow:none!important}
.st838 .sl-buy button:not(:disabled):hover,.st838 .sl-buy button:not(:disabled):focus-visible{border-color:#d4f26a!important;color:#d4f26a!important;background:#d4f26a1a!important}
.st838 .sl-buy button:disabled{color:#ffffff55!important;background:#ffffff08!important;border-color:#ffffff14!important;opacity:1!important}
/* the panel title: bars icon | STATISTICHE GIOCATORE ... | PA DISPONIBILI [n] */
.st-head{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:1px solid #ffffff17;background:linear-gradient(180deg,#183229cc,#0f2019d9);min-width:0}
.st-head .st-hico{width:22px;height:22px;flex:none;fill:none;stroke:#d4f26a;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px #d4f26a77)}
.st-head .st-sep{width:1px;align-self:stretch;background:#ffffff26;flex:none}
.st-head h5{margin:0!important;font-family:var(--fam);font-weight:900;font-size:clamp(12px,1vw,16px);letter-spacing:.03em;color:#fff;white-space:nowrap;display:block!important}
.st-head h5 b{color:#d4f26a}
.st-head .st-pa{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#c9d7c6;white-space:nowrap}
.st-head .st-pa b{display:grid;place-items:center;min-width:30px;height:28px;padding:0 6px;box-sizing:border-box;border-radius:7px;border:1.5px solid #e88a3a;background:#101a14;color:#fff;font-size:14px;box-shadow:0 0 6px #ff8f2e55}
.cp-stats .st-head,.rk-stats .st-head{margin-bottom:2px}
/* side panels (picks, career opponent, ranked): the same rows, shorter, so all seven fit under the 3D model */
.st838 .sl-name{text-align:left!important;justify-self:stretch!important}
.pick827 .st838{--st-h:clamp(22px,3.3vh,36px);--st-gap:3px}
.pick827 .st838.st838 .sline.sline{grid-template-columns:var(--st-h) minmax(84px,.9fr) minmax(30px,1.6fr) 28px!important;border-radius:8px;padding:2px 8px 2px 3px!important;column-gap:8px!important}
.pick827 .st838.st838.buy .sline.sline{grid-template-columns:var(--st-h) minmax(84px,.9fr) minmax(30px,1.4fr) 28px auto!important}
.pick827 .st838 .sl-icobox{border-radius:6px}
.pick827 .st838 .sl-name{font-size:clamp(10px,.68vw,12px)!important}
.pick827 .st838 .sline strong{font-size:clamp(12px,.95vw,16px)!important}
.pick827 .st838 .sl-buy{gap:4px!important}.pick827 .st838 .sl-buy button{width:clamp(24px,1.9vw,32px)!important;height:calc(var(--st-h) - 8px)!important;font-size:10px!important}
.pick827 .st-head{gap:8px;padding:5px 9px;border-radius:9px}.pick827 .st-head h5{font-size:clamp(11px,.85vw,14px)}.pick827 .st-head .st-hico{width:17px;height:17px}
.pick827 .st-head .st-pa{gap:6px;font-size:9px}.pick827 .st-head .st-pa b{min-width:24px;height:22px;font-size:12px}
.st-head h5{min-width:0;overflow:hidden;text-overflow:ellipsis}.st-head .st-pa{flex:none}
@media(max-height:800px){.rk-left .cs-team.cw835{min-height:min(240px,32vh)!important}.rk-stats .st838{--st-h:21px;--st-gap:2px}.rk-stats .st-head{padding:3px 8px}.rk-stats .st-head .st-pa b{height:19px}}
@media(max-height:800px){.pick827 .st838{--st-h:20px;--st-gap:2px}.fm-profile.pick827 #playerPreview{min-height:min(270px,23vh)}}
@media(max-height:800px){.fm-profile.pick827 #playerPreview{min-height:min(270px,19vh)}.fm-profile.pick827 .fm-tags{flex-wrap:nowrap;overflow:hidden}.fm-profile.pick827 .fm-tags .chip{flex:none;font-size:8.5px}}
.pick827 .st838{--st-h:clamp(20px,2.75vh,32px);--st-gap:2px}.fm-profile.pick827 #playerPreview{min-height:min(270px,27vh)}
.fm-profile.pick827 #playerPreview{min-height:min(260px,23vh)}
@media(max-height:800px){.pick827 .st838{--st-h:19px}.fm-profile.pick827 #playerPreview{min-height:min(260px,17vh)}}
/* the pad icon right of the sound button, where the user put it (the sound button: 3.5vw / 0.5vh off its place, 42px wide) */
#controllerStatus{left:calc(3.5vw + 80px)!important;top:calc(.5vh + 26px)!important}
/* the player cards' level picture calmer (less saturated, a touch darker) behind the face; the face itself untouched */
.alpha-panel button.fm-card[data-tier],.alpha-panel .cw-card[data-tier]{background:#0a1212!important;isolation:isolate}
.alpha-panel button.fm-card[data-tier]::before,.alpha-panel .cw-card[data-tier]::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--tier-img) center/100% 100% no-repeat;filter:saturate(.45) brightness(.82);pointer-events:none}
/* the pick panel: the stage like the match confirmation's */
.pk838 .fm-tags{margin-top:6px}
.pk838 .fm-tags{display:none!important}
.pk838 .cs-rating :is(h4,h5,b,span,small,strong):first-child{white-space:nowrap}
.alpha-panel button.fm-card[data-tier]::before,.alpha-panel .cw-card[data-tier]::before{filter:saturate(.55) brightness(.88)}
/* Update 8.40: the welcome of a new player (no save) - the user's picture */
.modal.wl840{z-index:60;background:#020a08b0;backdrop-filter:blur(6px)}
.wl840 .wl-card{position:relative;overflow:hidden;width:min(740px,92vw);box-sizing:border-box;padding:30px clamp(24px,6vw,168px) 30px;border-radius:14px;text-align:center;display:flex;flex-direction:column;align-items:center;
 background:linear-gradient(118deg,transparent 0 9%,#ffffff07 9% 17%,transparent 17% 78%,#ffffff06 78% 88%,transparent 88%),radial-gradient(120% 90% at 50% 0%,#18302acc,#0b1814f2 70%),#0c1914;
 border:1.5px solid #d4f26ab3;box-shadow:0 0 0 1px #00000080,0 0 26px #d4f26a26,0 30px 80px #000c;animation:wl-in .22s ease-out}
@keyframes wl-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.wl840 .wl-slash{position:absolute;width:2px;height:260px;background:linear-gradient(#d4f26a00,#d4f26a 20% 80%,#d4f26a00);box-shadow:0 0 8px #d4f26a88;transform:rotate(38deg);pointer-events:none}
.wl840 .wl-slash.a{left:52px;top:-52px}.wl840 .wl-slash.b{right:52px;bottom:-60px}
.wl840 .wl-brand{font:600 11px/1 var(--fam);letter-spacing:.32em;color:#a9b8b0}
.wl840 .wl-rule{display:block;width:20px;height:2px;margin:10px 0 0;background:#d4f26a;border-radius:2px}
.wl840 .wl-rule.wide{width:34px;margin:16px 0 18px;height:2.5px}
.wl840 h3{margin:26px 0 4px!important;font:900 clamp(38px,4.2vw,50px)/1 var(--fam)!important;letter-spacing:.04em;color:#fff;text-shadow:0 2px 14px #0008}
.wl840 .wl-lead{margin:6px 0 0;font-size:clamp(15px,1.25vw,18px);color:#f2f5ef}
.wl840 .wl-text{margin:0 0 26px;font-size:clamp(13px,1.05vw,15px);line-height:1.55;color:#cfd8d2}
.wl840 .wl-card button{width:100%;max-width:405px;box-sizing:border-box;margin:0;font-family:var(--fam)}
.alpha-panel .wl840 .wl-cta,.wl840 .wl-cta{position:relative;display:flex;align-items:center;justify-content:center;height:54px;border-radius:9px;border:0;background:linear-gradient(90deg,#c4ef4f,#e1fb8a);color:#0d1b12;
 font-weight:900;font-size:16px;letter-spacing:.06em;box-shadow:0 0 22px #d4f26a59,inset 0 1px 0 #ffffffa0;cursor:pointer;transition:filter .12s,transform .12s}
.wl840 .wl-cta:hover,.wl840 .wl-cta:focus-visible{filter:brightness(1.07);transform:translateY(-1px);outline:none;box-shadow:0 0 30px #d4f26a88,inset 0 1px 0 #ffffffa0}
.wl840 .wl-go{position:absolute;right:16px;width:20px;height:20px;fill:none;stroke:#0d1b12;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.alpha-panel .wl840 .wl-back,.wl840 .wl-back{margin-top:10px!important;height:46px;border-radius:9px;border:1px solid #ffffff2e;background:#0b1512cc;color:#d5ddd8;font-weight:700;font-size:12px;letter-spacing:.14em;cursor:pointer}
.wl840 .wl-back:hover,.wl840 .wl-back:focus-visible{border-color:#d4f26a99;color:#fff;outline:none}
.alpha-panel .wl840 .wl-back,.wl840 .wl-back{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;font-size:11.5px;letter-spacing:.16em}
.wl840 .wl-brand{font-weight:500;letter-spacing:.3em}.wl840 .wl-lead,.wl840 .wl-text{font-family:inherit;font-weight:400}
/* Update 8.41: the player editor - the stage as on the confirm screens (name band on top, rating at the foot), the view buttons under it */
.pe823 .pe-stage{gap:8px;padding:8px;background:transparent}
.pe823 .pe-stage .cs-team{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pe823 .pe-stage .cs-team #playerPreview{flex:1 1 auto;min-height:0}
.pe823 .pe-stage .pe-view{position:static!important;pointer-events:auto;flex:none;margin:0}
/* the colours as squares, not dots (every colour picker of the editor) */
.alpha-panel .sw,.alpha-panel .pe823 .pe-sw button.sw,.alpha-panel .wp-sw button.sw{border-radius:6px!important}
.alpha-panel .sw.auto{border-radius:6px!important}
.alpha-panel .pe823 button.pk.pk-text{display:grid;place-items:center;min-height:70px;padding:10px 6px}.pe823 .pk.pk-text .pk-name{position:static;font-size:13px}
/* Update 8.41: Orario and Meteo - their icons are coloured, so the one chosen lights up at its edge only (no lime fill) */
.alpha-panel button.cs-opt.tw.on,.alpha-panel button.cs-opt.tw.on:hover{background:#ffffff0a!important;color:#fff!important;border-color:var(--lime)!important;box-shadow:0 0 0 1px var(--lime),0 0 14px #d4f26a59,inset 0 0 10px #d4f26a1f!important}
.alpha-panel button.cs-opt.tw.on small{color:#fff!important}
#panel .cs830 button.cs-opt.ico.tw.on,#panel button.cs-opt.ico.tw.on{background:#ffffff0a!important;color:#fff!important;border-color:var(--lime)!important;box-shadow:0 0 0 1px var(--lime),0 0 14px #d4f26a59,inset 0 0 10px #d4f26a1f!important}
#panel .cs830 button.cs-opt.ico.tw.on small,#panel button.cs-opt.ico.tw.on small{color:#fff!important}

/* Keep the racket bonus on the same visual line as the ability name, at every panel size. */
.st838 .sl-name .sl-rk{flex:none;align-items:center;gap:.25em!important;margin:0!important;font-size:1em!important;line-height:inherit;letter-spacing:inherit}
.st838 .sl-name .sl-rk svg{display:block;flex:none;width:1.25em;height:1.25em}
