/* Update 9.63 - the social panel (R2) and the party dock of the main menu. Same language as the other menus: dark glass, lime edge, slanted buttons. */
.sp{overflow:hidden;position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:60;display:flex;flex-direction:column;background:linear-gradient(160deg,#080d10f2,#10181cf2);border-left:2px solid color-mix(in srgb,var(--lime) 60%,transparent);box-shadow:-18px 0 40px #000a;transform:translateX(104%);transition:transform .28s cubic-bezier(.2,.8,.2,1);visibility:hidden;backdrop-filter:blur(6px)}
.sp.open{transform:translateX(0);visibility:visible}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
.sp-head h2{margin:0;font-family:var(--fam);font-size:22px;letter-spacing:.18em;color:var(--lime)}
.sp-close{font-size:11px;padding:6px 10px}
.sp-close b{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:50%;background:#fff2;color:#fff}
.sp-scroll{flex:1;overflow-y:auto;padding:0 14px 24px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.sp-sec h3{margin:6px 2px 8px;font-size:11px;letter-spacing:.2em;color:#b8c7bc;font-weight:700}.sp-sec h3 em{font-style:normal;color:var(--lime);margin-left:4px}
.sp-item{border:1px solid var(--line);border-left:4px solid #5a6a64;border-radius:10px;background:linear-gradient(135deg,#070b0e,#13191d);margin-bottom:7px;overflow:hidden}
.sp-item.sel{border-left-color:var(--lime)}
.sp-row{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:11px;padding:8px 11px;cursor:pointer}
.sp-row:focus-visible,.sp-focus{outline:2px solid var(--lime);outline-offset:-2px;background:#ffffff0d}
.sp-face{width:40px;height:40px;border-radius:9px;object-fit:cover;background:#1c262b;flex:none}
.sp-init{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--lime)}
.sp-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.sp-name b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-name small,.sp-mate small,.sp-card small{font-size:11px;color:#9fb0a8}
.sp-dot{width:10px;height:10px;border-radius:50%;background:#5a6a64;flex:none;box-shadow:0 0 0 2px #0008}
.sp-dot.on{background:#53e07a;box-shadow:0 0 8px #53e07a}.sp-dot.busy{background:#ffb347}.sp-dot.play{background:#ff6a5a}.sp-dot.off{background:#4a5560}
.sp-actions{display:flex;flex-direction:column;gap:6px;padding:4px 11px 11px}
.sp-actions button,.sp-btns button,.sp-card>button,.sp-sec>button{font-size:11px}
.sp-card{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0a1013;margin-bottom:7px}
.sp-card.inv{border-color:var(--lime);box-shadow:0 0 14px #b6ff3b33}.sp-card small{flex:1 0 100%}
.sp-btns{display:flex;gap:8px;flex:1 0 100%}
.sp-mate{display:flex;align-items:center;gap:11px;padding:6px 4px}.sp-mate>span{flex:1;display:flex;flex-direction:column}
.sp-sec.party{border:1px solid var(--lime);border-radius:12px;padding:6px 12px 12px;background:#b6ff3b0f}
.sp-warn{color:#ffb347;font-size:12px;margin:4px 2px}.sp-note{color:#9fb0a8;font-size:12px;margin:2px 0}
.sp-profile{display:flex;gap:11px;align-items:center;padding:8px;border-radius:8px;background:#0006}.sp-profile div{display:flex;flex-direction:column}.sp-profile small{font-size:11px;color:#9fb0a8}
.sp-add{display:flex;flex-direction:column;gap:8px}.sp-add input{width:100%;box-sizing:border-box}
.sp-code{all:unset;cursor:pointer;color:var(--lime);font-family:var(--fam);letter-spacing:.06em;font-size:13px;margin-left:6px}
.pd{position:fixed;right:22px;bottom:62px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.pd>*{pointer-events:auto}
.pd-tiles{display:flex;gap:8px}
.pd-tile{width:92px;height:108px;box-sizing:border-box;padding:8px 6px;border:2px solid color-mix(in srgb,var(--lime) 55%,transparent);border-radius:12px;background:linear-gradient(160deg,#0a1216e6,#162026e6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;animation:pdIn .35s cubic-bezier(.2,.9,.3,1.2)}
.pd-tile .sp-face{width:56px;height:56px;border-radius:10px}.pd-tile b{font-size:12px;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pd-tile small{font-size:9px;letter-spacing:.16em;color:var(--lime)}
.pd-tile.off{opacity:.5;filter:grayscale(.7)}
@keyframes pdIn{from{transform:translateY(14px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.pd.party .pd-tiles::before{content:"";position:absolute;width:10px;height:3px;background:var(--lime);margin:52px 0 0 90px;z-index:1;border-radius:2px;box-shadow:0 0 8px var(--lime)}
.pd-group{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;color:var(--lime)}
.pd-leave{font-size:10px;padding:3px 9px}
.pd-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#0b1317e6;border:1px solid #ffffff30;font-size:12px;letter-spacing:.14em;font-weight:700;color:#e6f0ea;position:relative}
.pd-btn:hover,.pd-btn:focus-visible{border-color:var(--lime);box-shadow:0 0 12px #b6ff3b44}
.pd-key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;border-radius:6px;background:#fff;color:#0a1013;font-size:11px}
.pd-badge{position:absolute;top:-7px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ff6a5a;color:#fff;font-size:11px;font-style:normal;display:flex;align-items:center;justify-content:center}
.pd-invite{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#0b1317f2;border:1px solid var(--lime);box-shadow:0 0 16px #b6ff3b44;font-size:12px;animation:pdIn .3s}
body:not([data-screen="MENU"]) .pd:not(.keep){display:none}
body.sp-open .hm8{filter:saturate(.8)}
.f2{margin:14px 0 6px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);border-radius:12px;background:#0a1013cc}
.f2 h4{margin:0 0 10px;font-size:12px;letter-spacing:.2em;color:var(--lime)}
.f2-slots{display:flex;gap:12px;flex-wrap:wrap}
.f2-slot{all:unset;box-sizing:border-box;cursor:pointer;width:150px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border:2px dashed #ffffff40;border-radius:12px;text-align:center}
.f2-slot:not(.empty){border-style:solid;border-color:color-mix(in srgb,var(--lime) 55%,transparent)}
.f2-slot.on,.f2-slot:focus-visible{border-color:var(--lime);box-shadow:0 0 12px #b6ff3b55}
.f2-slot[disabled]{cursor:default;opacity:.8}
.f2-face{width:64px;height:64px;border-radius:12px;background:#1c262b;display:flex;align-items:center;justify-content:center;overflow:hidden}.f2-face img{width:100%;height:100%;object-fit:cover}.f2-face b{font-size:30px;color:#6b7782}
.f2-slot small{font-size:10px;letter-spacing:.14em;color:var(--lime)}
.f2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:12px;max-height:230px;overflow-y:auto}
.f2-pick{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border:1px solid var(--line);border-radius:10px;background:#0b1317}
.f2-pick:hover,.f2-pick:focus-visible{border-color:var(--lime)}.f2-pick img{width:56px;height:56px;border-radius:9px;object-fit:cover}.f2-pick small{font-size:10px;text-align:center}
.f2-chars{margin-top:10px}
.f2{position:fixed;top:92px;right:44px;width:min(740px,58vw);z-index:5;margin:0;padding:0;border:none;background:none}
.f2-slots{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.f2-slots .f2-slot{flex-direction:row;width:auto;min-width:150px;gap:8px;padding:6px 12px;text-align:left;background:#070d10e6}
.f2-slots .f2-slot .f2-face{width:38px;height:38px;border-radius:9px}.f2-slots .f2-slot b{font-size:12px}.f2-slots .f2-slot small{display:block}
.f2-me{font-size:11px;padding:8px 12px}
.f2-grid{position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);width:min(640px,90vw);max-height:58vh;margin:0;padding:14px;background:#070d10f8;border:1px solid var(--lime);border-radius:14px;z-index:30;box-shadow:0 0 40px #000c}
.f2 .hint{display:none}/* (9.64) the career's discipline tabs */
.cw-disc{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 10px}
.cw-dtab{min-width:150px;font-size:13px;letter-spacing:.14em;padding:8px 16px}
.cw-dtab.on{background:var(--lime);color:#14301f;border-color:var(--lime)}
.cw-disc kbd{padding:2px 8px;border-radius:6px;background:#fff;color:#0a1013;font-size:11px;font-weight:800}

/* (9.64b) the career's header: the discipline buttons take the place of PERCORSO / GIOCATORE (same row, nothing below shrinks) */
.cw-disc{margin:0;gap:8px;align-items:center}
.cw-dtab{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:4px 14px 4px 8px;font-size:12px;letter-spacing:.12em}
.cw-dtab .disc-img{display:inline-flex;width:26px;height:26px}.cw-dtab .disc-img svg{width:100%;height:100%}
.cw-dtab.cw-me{padding:4px 14px;opacity:.85}
.career-heading .scr-title{flex:0 1 auto;min-width:0}.career-heading .scr-title h2{white-space:nowrap;font-size:clamp(15px,1.6vw,23px)}
.cw-disc{flex-wrap:nowrap;margin-left:auto}.cw-dtab{padding:3px 11px 3px 6px;font-size:11px;letter-spacing:.1em}.cw-dtab .disc-img{width:22px;height:22px}.cw-dtab.cw-me{padding:3px 11px}
.career-heading{flex-wrap:nowrap!important;gap:10px}.career-heading .scr-title h2{font-size:clamp(13px,1.3vw,19px)}.career-heading .scr-title .chip{font-size:9px}
.cw-dtab{padding:2px 9px 2px 5px;font-size:10px;letter-spacing:.08em}.cw-dtab .disc-img{width:20px;height:20px}.cw-disc kbd{padding:1px 6px;font-size:10px}.cw-disc{gap:6px}
.career-heading .scr-title{flex:1 1 0!important;overflow:hidden}.career-heading .scr-title h2{overflow:hidden;text-overflow:ellipsis}
.cw-disc{flex:0 0 auto!important}.cw-dtab b{white-space:nowrap}.cw-dtab.on{transform:none}
.career-heading .scr-title h2{display:none}
/* (9.64c) the career's discipline pills, left, beside "CARRIERA - GIOCATORE SINGOLO": the logo's rackets, one colour each */
.cw-titlerow{display:flex!important;flex-direction:row!important;align-items:center;gap:14px;flex:1 1 auto!important;overflow:visible!important}
.cw-titlerow h2{display:none}
.cw-disc{margin:0!important;flex:0 0 auto!important;gap:8px!important}
.cw-dtab{display:inline-flex;align-items:center;gap:7px;min-width:0!important;height:32px;padding:0 14px 0 8px!important;border-radius:9px!important;border:2px solid #0008!important;font-size:12px!important;letter-spacing:.06em!important;font-weight:800;color:#0d1208!important;opacity:.62;filter:saturate(.75);transform:none!important;box-shadow:none}
.cw-dtab b{white-space:nowrap}
.cw-dtab .disc-img{display:inline-flex;width:24px;height:24px}.cw-dtab .disc-img svg{width:100%;height:100%}
.cw-dtab.d-tennis{background:linear-gradient(180deg,#e9fb4f,#b6d40e)!important}
.cw-dtab.d-padel{background:linear-gradient(180deg,#3d9bff,#1456c4)!important;color:#fff!important}
.cw-dtab.d-beach{background:linear-gradient(180deg,#ffb23a,#e2680f)!important;color:#fff!important}
.cw-dtab.on{opacity:1;filter:none;box-shadow:0 0 0 2px #fff6,0 0 16px currentColor}
.cw-dtab.d-tennis.on{box-shadow:0 0 0 2px #fff7,0 0 16px #d9f23a}.cw-dtab.d-padel.on{box-shadow:0 0 0 2px #fff7,0 0 16px #3d9bff}.cw-dtab.d-beach.on{box-shadow:0 0 0 2px #fff7,0 0 16px #ff9b24}
.cw-me{font-size:11px;letter-spacing:.1em;padding:6px 14px;margin-left:auto}
.cw-titlerow .chip{display:inline-block!important;white-space:nowrap}
.career-heading .cw-titlerow{flex:0 0 auto!important;margin-right:6px}
.career-heading .cw-me{flex:0 0 auto;margin-left:auto!important}
.cw-disc kbd{flex:0 0 auto}
.cw-dtab .disc-img{width:28px!important;height:28px!important}
/* (9.64e) the player bands of the quick-match setup: the tag (P1 / P2 / CPU), the name and, on the right, the round "change player" button - which is the "+" while the pedestal is empty. Accent per discipline, the same for both sides */
.cs830{--dc:#c8f21e;--dc2:#7fa100}.cs830.dc-padel{--dc:#3d9bff;--dc2:#1456c4}.cs830.dc-beach{--dc:#ff9b24;--dc2:#e2680f}
/* the screen is patched in place, so the class above can lag behind a change of discipline: the chosen discipline button decides the colour */
.cs830:has(.cs-disc .cs-opt:nth-child(1).on){--dc:#c8f21e;--dc2:#7fa100}.cs830:has(.cs-disc .cs-opt:nth-child(2).on){--dc:#3d9bff;--dc2:#1456c4}.cs830:has(.cs-disc .cs-opt:nth-child(3).on){--dc:#ff9b24;--dc2:#e2680f}
.cs-names .cs-name{position:relative;display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.cs-names.n1 .cs-name{justify-content:flex-start}
.cs-names.n1 .cs-name b{flex:1 1 auto;text-align:center;padding:0 4px}
.cs-tag{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:clamp(28px,2.6vw,40px);min-width:clamp(52px,4.8vw,74px);padding:0 clamp(10px,1vw,16px);border:2px solid var(--dc);border-radius:10px;background:#07130b;color:var(--dc);font:900 clamp(15px,1.6vw,25px)/1 var(--fam);letter-spacing:.02em}
.cs-tag>span{display:inline-block}
.cs-swap{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:clamp(38px,3.4vw,52px);height:clamp(38px,3.4vw,52px);padding:0;border-radius:50%!important;border:3px solid var(--dc)!important;background:radial-gradient(circle at 50% 35%,#16301d,#07130b)!important;color:var(--dc)!important;cursor:pointer;box-shadow:0 0 14px color-mix(in srgb,var(--dc) 55%,transparent),inset 0 0 10px color-mix(in srgb,var(--dc) 25%,transparent);transition:transform .12s,box-shadow .12s}
.cs-swap svg{display:block!important;width:clamp(22px,2.1vw,32px)!important;height:clamp(22px,2.1vw,32px)!important;flex:0 0 auto!important;min-width:clamp(22px,2.1vw,32px)!important;fill:none!important;stroke:currentColor!important;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-names .cs-name b,.cs-names.n1 .cs-name b,.cs-names:not(.n1) .cs-name b{font-size:clamp(14px,1.45vw,25px)!important;max-width:none!important;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cs-swap .pl{font:900 clamp(26px,2.5vw,38px)/1 var(--fam);transform:translateY(-1px)}
.cs-swap:hover,.cs-swap:focus-visible{transform:scale(1.1);box-shadow:0 0 22px var(--dc),inset 0 0 12px color-mix(in srgb,var(--dc) 35%,transparent)}
.cs-name.empty b{color:#ffffffa0;font-weight:700}
.cs-name.empty i{display:none}
.cs-rating.none span{font-weight:600;letter-spacing:.04em;opacity:.7;text-transform:none}

/* (9.64h) every option button of the match settings (Disciplina, Campo, Orario, Meteo, Formato, Regole, Arena and any added later) reacts like the main menu's 1V1 / 2V2 buttons: lit border and a light
   translucent tint over the button - when it is the selected one, and when the pointer, the keys or the pad are on it. The colour is the discipline's (--dc: green / blue / orange); no fill, the icons and previews keep theirs. */
#panel#panel .cs830 button.cs-opt{--c:var(--dc,#c8f21e);border:2px solid #ffffff1a!important;border-radius:10px!important;box-shadow:none!important;transform:none!important;outline:0;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
#panel#panel .cs830 button.cs-opt:is(.on,:hover,:focus-visible):not(:disabled){border-color:var(--c)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 26%,#0d1716),color-mix(in srgb,var(--c) 11%,#050c0b))!important;color:#fff!important;box-shadow:0 0 .55em color-mix(in srgb,var(--c) 85%,transparent),0 0 1.4em color-mix(in srgb,var(--c) 40%,transparent),inset 0 0 .9em color-mix(in srgb,var(--c) 30%,transparent)!important}
#panel#panel .cs830 button.cs-opt:is(.on,:hover,:focus-visible) :is(small,b){color:#fff!important}
#panel#panel .cs830 button.cs-opt.tile:is(.on,:hover,:focus-visible) small{background:#071318!important}
/* (9.64i) the discipline buttons as in the user's picture: three equal, lower buttons, the racket and the name side by side, centred, the name on one line */
#panel#panel .cs830 button.cs-opt.disc{display:flex;align-items:center;justify-content:center;gap:clamp(5px,.6vw,10px);min-height:clamp(46px,6.2vh,66px);padding:4px clamp(6px,.8vw,14px);text-align:center;border-radius:12px!important}
#panel#panel .cs830 button.cs-opt.disc .disc-img{width:clamp(28px,2.7vw,46px);height:clamp(28px,2.7vw,46px);flex:0 0 auto}
#panel#panel .cs830 button.cs-opt.disc .disc-img svg{transform:none;width:100%;height:100%;filter:drop-shadow(0 2px 3px #0008)}
#panel#panel .cs830 button.cs-opt.disc b{font:800 clamp(11px,.95vw,16px)/1.1 var(--fam);white-space:nowrap;letter-spacing:0}
/* (9.64j) 2v2: the two players of a team share the band in two equal halves - tag, name (shortened if needed) and the round button at the end of each half; the second player's half sits against the right edge */
.cs-names.n2{display:flex;gap:10px;justify-content:space-between;padding-left:10px!important;padding-right:10px!important}
.cs-names.n2 .cs-name{flex:1 1 0;min-width:0;gap:6px;overflow:hidden}
.cs-names.n2 .cs-name:last-child{justify-content:flex-end}
.cs-names.n2 .cs-name b{flex:1 1 auto;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-names.n2 .cs-tag{min-width:0;padding:0 clamp(6px,.6vw,10px);margin-right:0;font-size:clamp(11px,1vw,17px);height:clamp(24px,2.2vw,34px)}
.cs-names.n2 .cs-swap{width:clamp(30px,2.8vw,42px);height:clamp(30px,2.8vw,42px);min-width:clamp(30px,2.8vw,42px)}
.cs-names.n2 .cs-swap .pl{font-size:clamp(20px,2vw,30px)}
.cs-names.n2 .cs-name.empty b{display:none}
.cs-names.n2 .cs-name.empty .cs-swap{margin-left:auto}