/* Update 8.30: "Conferma la sfida" as in the user's picture (match-setup.mjs) - Partita veloce 1v1 / 2v2 and the career's matches */
body:is([data-screen=COURT_SELECT],[data-screen=PREMATCH]) .alpha-panel{inset:94px 2vw 18px;overflow:hidden;scrollbar-gutter:auto}
body:is([data-screen=COURT_SELECT],[data-screen=PREMATCH]) .alpha-panel .menu{height:100%;min-height:0;padding:16px;display:flex;flex-direction:column}
.cs-title em{color:var(--lime);font-style:inherit}
.cs830{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(320px,1fr);gap:16px;flex:1;min-height:0}
.cs-left{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;min-height:0}
.cs-right{display:flex;flex-direction:column;gap:12px;min-height:0}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic .f{fill:currentColor;stroke:none}
/* the two sides */
.cs-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;min-height:330px}
.cs-stage>canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:2;background:transparent!important}
.cs-team{position:relative;border-radius:16px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--tier) 60%,#ffffff22);background-size:cover!important;background-position:center!important;box-shadow:inset 0 -150px 110px -40px #000000d0,0 12px 28px #0009;display:flex;flex-direction:column;justify-content:flex-end}
.cs-team.l{transform:skewX(-2deg);transform-origin:bottom}.cs-team.r{transform:skewX(-2deg);transform-origin:top}
.cs-team>*{transform:skewX(2deg)}
.cs-names{position:relative;z-index:3;display:flex;justify-content:space-evenly;gap:8px;padding:0 10px 10px}
.cs-name{display:flex;align-items:center;gap:9px;background:#08111dd9;border:1px solid #ffffff22;border-radius:9px;padding:5px 6px 5px 12px;box-shadow:0 4px 12px #0007}
.cs-name b{font:800 clamp(11px,.85vw,15px)/1 var(--fam);color:#fff;white-space:nowrap;max-width:11vw;overflow:hidden;text-overflow:ellipsis}
.cs-name i{font:900 clamp(12px,.95vw,16px)/1 var(--fam);font-style:normal;color:#fff;min-width:30px;text-align:center;padding:4px 5px;border-radius:7px;border:2px solid var(--tier);background:color-mix(in srgb,var(--tier) 25%,#06101c)}
.cs-ribbon{position:relative;z-index:3;text-align:center;font:900 italic clamp(13px,1.05vw,18px)/1 'Arial Black',var(--fam);letter-spacing:.05em;color:#fff;padding:7px 0;text-shadow:0 2px 6px #0009}
.cs-team.l .cs-ribbon{background:linear-gradient(90deg,transparent,#1f63e0 18%,#2b7bff 50%,#1f63e0 82%,transparent)}
.cs-team.r .cs-ribbon{background:linear-gradient(90deg,transparent,#c2301c 18%,#e8472c 50%,#c2301c 82%,transparent)}
.cs-rating{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 20px 12px;background:linear-gradient(180deg,#040b16b0,#040b16e8)}
.cs-rating>span{font:800 clamp(11px,.9vw,15px)/1.1 var(--fam);letter-spacing:.06em;color:#e6eef8}
.cs-laurel{position:relative;width:clamp(70px,5.6vw,98px);aspect-ratio:1;flex:none}
.cs-laurel svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tier) 55%,transparent))}
.cs-laurel .lv ellipse{fill:var(--tier)}.cs-laurel .disc{fill:#06101d}.cs-laurel .ring{fill:none;stroke:var(--tier);stroke-width:3}
.cs-laurel b{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(24px,2.1vw,38px)/1 'Arial Black',var(--fam);color:#fff;text-shadow:0 0 10px color-mix(in srgb,var(--tier) 70%,transparent)}
/* the stylised VS */
.cs-vs{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:clamp(110px,9vw,170px);z-index:4;pointer-events:none;filter:drop-shadow(0 0 16px #d4f26a99) drop-shadow(0 4px 6px #000a)}
.cs-vs svg{width:100%;height:auto;overflow:visible}
.cs-vs .bolt{fill:url(#csvsg);opacity:.95}
.cs-vs .vs{font:900 italic 62px 'Arial Black',Arial,sans-serif;fill:#f8ffd8;stroke:#1c2c0c;stroke-width:3;paint-order:stroke;letter-spacing:-2px}
/* the settings */
.cs-sec h5{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:900 12px/1 var(--fam);letter-spacing:.12em;color:#e6efdf}
.cs-sec h5 .ic,.cs-settings h4 .ic{color:var(--lime)}
.alpha-panel .cs-dice{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:0;padding:5px 8px;border-radius:8px;border:1px solid #d4f26a55;background:#d4f26a14;color:var(--lime)}
.alpha-panel .cs-dice .ic{width:17px;height:17px}.alpha-panel .cs-dice small{font:900 10px/1 var(--fam);letter-spacing:.1em}
.alpha-panel .cs-dice:hover:not(:disabled){background:var(--lime);color:#122a20}
.cs-settings{flex:1;min-height:0;overflow:auto;background:linear-gradient(160deg,#0a2a2bee,#06191ae8);border:1px solid #ffffff1c;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 1px 0 #ffffff10}
.cs-settings h4{display:flex;align-items:center;gap:10px;margin:0 0 2px;font:900 italic clamp(15px,1.2vw,20px)/1 'Arial Black',var(--fam);letter-spacing:.02em;color:#fff}
.cs-row{display:grid;gap:8px}.cs-row.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-row.three{grid-template-columns:repeat(3,1fr)}.cs-row.four{grid-template-columns:repeat(4,1fr)}.cs-row.two{grid-template-columns:repeat(2,1fr)}
.cs-row.arenas{grid-template-columns:repeat(6,minmax(0,1fr))}
.alpha-panel .cs-opt{min-height:0;margin:0;color:#e9f2e3;border:2px solid #ffffff1a;border-radius:10px;background:#0b1c22;transition:transform .12s ease,border-color .12s,box-shadow .12s}
.alpha-panel .cs-opt.tile{padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}
.cs-img{display:block;height:clamp(40px,4.4vh,62px);background-size:cover;background-position:center}
.cs-arenas .cs-img{height:clamp(52px,7vh,96px)}
.alpha-panel .cs-opt.tile small{display:block;padding:6px 4px;font:800 clamp(10px,.78vw,13px)/1.1 var(--fam);text-align:center;background:#071318}
.alpha-panel .cs-opt.ico{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;font:800 clamp(10.5px,.8vw,13px)/1 var(--fam)}
.alpha-panel .cs-opt.ico small{font:inherit}
.alpha-panel .cs-opt.on{border-color:var(--lime);box-shadow:0 0 0 3px #d4f26a40,0 6px 16px #0007}
.alpha-panel .cs-opt.ico.on{background:linear-gradient(110deg,#c5f15b,#dbff78);color:#122a20}
.alpha-panel .cs-opt.tile.on small{background:var(--lime);color:#122a20}
.alpha-panel .cs-opt:hover:not(:disabled):not(.on){border-color:#ffffff88;transform:translateY(-1px)}
.cs830.fixed .cs-opt:disabled{opacity:.32;filter:saturate(.5)}
.cs-arenas{background:linear-gradient(160deg,#0a2a2bee,#06191ae8);border:1px solid #ffffff1c;border-radius:16px;padding:12px 14px}
.cs-note{margin:0;font-size:11.5px;line-height:1.35;color:#b9c9bd}
.cs-reward{margin:0}
.alpha-panel .cs-go{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:clamp(14px,2.4vh,24px) 22px clamp(14px,2.4vh,24px) 30px;border-radius:16px;border:0;background:linear-gradient(110deg,#c5f15b,#e3ff8a);color:#122a20;font:900 italic clamp(18px,1.7vw,30px)/1 'Arial Black',var(--fam);letter-spacing:.02em;box-shadow:0 0 30px #d4f26a50,0 10px 24px #0008}
.alpha-panel .cs-go i{display:grid;place-items:center;width:clamp(36px,2.8vw,50px);aspect-ratio:1;border-radius:50%;background:#122a20;color:var(--lime)}
.alpha-panel .cs-go i .ic{width:60%;height:60%;stroke-width:3}
.alpha-panel .cs-go:hover:not(:disabled){transform:translateY(-1px) scale(1.01)}
/* the random pick in the level filter */
.alpha-panel .lv-filter .lvf.lvf-rand{flex:1.1;flex-direction:row;gap:6px;color:var(--lime);border-color:#d4f26a55}
.alpha-panel .lv-filter .lvf.lvf-rand small{color:var(--lime)}
.alpha-panel .lv-filter .lvf.lvf-rand .ic{width:16px;height:16px}

/* (8.30) fixes: the panels are not their own layer (the names stay over the 3D players), the icon choices above the menu's generic button look */
.cs-team.tier-stage{isolation:auto!important;transform:none!important}.cs-team>*{transform:none}
#panel .cs830 button.cs-opt::before,#panel .cs830 button.cs-opt::after{display:none!important}
#panel .cs830 button.cs-opt.ico{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;min-height:40px;width:auto;border:2px solid #ffffff1a;border-radius:10px;background:#0b1c22;color:#e9f2e3;font:800 clamp(10.5px,.8vw,13px)/1.1 var(--fam);letter-spacing:.01em;text-transform:none;box-shadow:none}
#panel .cs830 button.cs-opt.ico.on{background:linear-gradient(110deg,#c5f15b,#dbff78);color:#122a20;border-color:var(--lime);box-shadow:0 0 0 3px #d4f26a40}
#panel .cs830 button.cs-opt.ico .ic{width:18px;height:18px}
#panel .cs830 button.cs-opt.tile{border-radius:10px;padding:0;min-height:0}
#panel .cs830 button.cs-opt.ico.on,#panel .cs830 button.cs-opt.ico.on small,#panel .cs830 button.cs-opt.tile.on small{color:#122a20!important}
.cs-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs830.fixed .cs-settings .cs-img{height:clamp(30px,3.3vh,46px)}
.cs830.fixed .cs-settings{gap:9px}
.cs830.fixed #panel .cs830 button.cs-opt.ico,.cs830.fixed button.cs-opt.ico{min-height:34px;padding:7px 8px}

body[data-screen=ONLINE_LOBBY] .alpha-panel .menu:has(.cs830){height:100%;min-height:0;display:flex;flex-direction:column}
body[data-screen=ONLINE_LOBBY] .alpha-panel:has(.cs830){inset:94px 2vw 18px;overflow:hidden}


/* (8.30) the career's opponent panel as the Partita veloce one: the stage on top (the player on its pedestal), then the name and the overall,
   the level in stars, the stats, the prize and the button */
.alpha-panel .cw-detail.cw827{display:flex;flex-direction:column;gap:0;padding:12px 16px 14px}
.alpha-panel .cw-detail.cw827 #careerPreview{flex:1 1 0;min-height:min(250px,30vh);margin:0 0 10px;border-radius:16px;background-size:cover!important;background-position:50% 50%!important;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -60px 70px -20px #000000a0}
.alpha-panel .cw-detail.cw827 .cw-info{display:flex;flex-direction:column;gap:0}
.alpha-panel .cw-detail.cw827 .detail-reward{margin:6px 0 2px}

/* (8.30) the settings, in sections over the whole screen */
body[data-screen=SETTINGS] .alpha-panel{inset:94px 2vw 18px;overflow:hidden}
body[data-screen=SETTINGS] .alpha-panel .menu{height:100%;min-height:0;display:flex;flex-direction:column}
.st830{display:grid;grid-template-columns:clamp(250px,22vw,380px) minmax(0,1fr);gap:18px;flex:1;min-height:0}
.st-nav{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}
.alpha-panel .st-tab{display:flex;align-items:center;gap:14px;text-align:left;min-height:0;padding:14px 16px;border-radius:14px;border:1px solid #ffffff1c;background:linear-gradient(160deg,#0d2c2bdd,#071a1be0);color:#e9f2e3;flex:1;max-height:110px}
.alpha-panel .st-tab i{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:#d4f26a1a;color:var(--lime)}
.alpha-panel .st-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alpha-panel .st-tab span{display:flex;flex-direction:column;gap:4px;min-width:0}
.alpha-panel .st-tab b{font:900 13px/1.1 var(--fam);letter-spacing:.08em}
.alpha-panel .st-tab small{font:600 11.5px/1.25 var(--fam);color:#a9bdb0;letter-spacing:0}
.alpha-panel .st-tab.on{background:linear-gradient(110deg,#c5f15b,#dbff78);border-color:var(--lime);color:#122a20;box-shadow:0 0 0 3px #d4f26a33}
.alpha-panel .st-tab.on i{background:#122a20;color:var(--lime)}.alpha-panel .st-tab.on small{color:#2c4a35}
.alpha-panel .st-tab.st-quit i{background:#c8473a26;color:#ff9a8a}.alpha-panel .st-tab.st-quit:hover{border-color:#ff9a8a}
.st-body{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding:18px 22px;border-radius:18px;border:1px solid #ffffff1c;background:linear-gradient(160deg,#0a2a2bee,#06191ae8)}
.st-title{display:flex;align-items:center;gap:14px}
.st-title i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--lime);color:#122a20}
.st-title svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-title h3{margin:0;font:900 italic clamp(20px,1.7vw,30px)/1 'Arial Black',var(--fam);color:#fff}.st-title small{font-size:13px;color:#a9bdb0}
.st-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.st-box{border-radius:14px;border:1px solid #ffffff14;background:#00000026;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.st-box h4{margin:0;font:900 11px/1 var(--fam);letter-spacing:.16em;color:var(--lime)}
.st-box.fill{flex:1}
.st-box label{display:flex;flex-direction:column;gap:9px;font-weight:800;font-size:13.5px}
.st-box label.check{flex-direction:row;align-items:center;gap:12px}
.st-songs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-box .binding-grid{flex:1}

.st-body .st-box{flex:none}.st-body .st-box.fill{flex:1}.st-box label.check{font-size:14px}
.st830 .st-box .s-actions{margin-top:auto}

/* (8.31) the confirm screen fuller: the settings spread over the whole height, bigger court pictures and buttons */
.cs-settings{justify-content:space-between;gap:10px}
.cs-settings .cs-img{height:clamp(46px,7.2vh,104px)}
#panel .cs830 button.cs-opt.ico{min-height:clamp(42px,6vh,70px);font-size:clamp(11px,.85vw,14.5px)}
#panel .cs830 button.cs-opt.ico .ic{width:22px;height:22px}
.alpha-panel .cs-opt.tile small{padding:8px 4px;font-size:clamp(10.5px,.85vw,14px)}
.cs-sec h5{font-size:13px;margin-bottom:9px}
.cs-arenas .cs-img{height:clamp(60px,9vh,130px)}
.cs-stage{gap:44px}
.cs830.fixed .cs-settings .cs-img{height:clamp(36px,5.2vh,76px)}

.cs-settings .cs-img{height:clamp(32px,4.6vh,96px)}
#panel .cs830 button.cs-opt.ico{min-height:clamp(36px,4.8vh,66px)}
.cs-settings{gap:6px;padding:12px 16px}
.cs-sec h5{margin-bottom:6px}


/* Update 8.32: the sides as in the user's pictures - see-through, outlined and glowing in the level's colour, names on top, the rating at the foot */
.cs-team{background:linear-gradient(180deg,color-mix(in srgb,var(--tier) 16%,#06121c80),#040b1499 70%,#040b14d0)!important;backdrop-filter:blur(3px);border:2px solid var(--tier)!important;box-shadow:0 0 18px color-mix(in srgb,var(--tier) 55%,transparent),inset 0 0 26px color-mix(in srgb,var(--tier) 22%,transparent)!important;justify-content:space-between!important}
.cs-names{order:-1;padding:12px 12px 0;justify-content:space-around}
.cs-names.n1{justify-content:center}
.cs-names.n1 .cs-name{background:none;border:0;box-shadow:none;padding:0}
.cs-names.n1 .cs-name b{font-size:clamp(16px,1.35vw,24px);max-width:none;text-shadow:0 2px 6px #000}
.cs-name i{border-color:var(--tier)!important;background:color-mix(in srgb,var(--tier) 22%,#06101c)!important;box-shadow:0 0 8px color-mix(in srgb,var(--tier) 50%,transparent)}
.cs-rating{margin:0 12px 12px;border-radius:12px;border:1px solid #ffffff1c;background:#040b14c8!important;padding:10px 14px!important}
.cs-rating>div{display:flex;flex-direction:column;gap:7px}
.cs-stars{display:flex;gap:3px}
.cs-stars i{width:clamp(16px,1.35vw,24px);height:clamp(16px,1.35vw,24px)}
.cs-stars svg{width:100%;height:100%;fill:#ffffff24;stroke:#ffffff3a;stroke-width:1.2}
.cs-stars i.on svg{fill:#f5c84a;stroke:#b8862a;filter:drop-shadow(0 0 3px #f5c84a88)}
.cs-sq{display:grid;place-items:center;min-width:clamp(54px,4.4vw,78px);aspect-ratio:1.15;border-radius:12px;border:2.5px solid var(--tier);background:color-mix(in srgb,var(--tier) 18%,#050c16);font:900 clamp(24px,2.1vw,38px)/1 'Arial Black',var(--fam);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--tier) 60%,transparent),inset 0 0 12px color-mix(in srgb,var(--tier) 30%,transparent)}
.cs-vs{top:46%}
/* the arena pictures closer in: the empty ground round the court stays out */
.cs-arenas .cs-img{background-size:165%!important;background-position:50% 62%!important}

.cs-rating>div>span{font:900 clamp(11px,.95vw,16px)/1.1 var(--fam);letter-spacing:.05em;color:#eef4f8}


/* Update 8.33: the stage see-through - the venue behind shows through the two sides (the box of the screen clear there), each side veiled in
   its level's colour with bold diagonal light streaks, as in the user's picture; the settings column packed at the top */
body:is([data-screen=COURT_SELECT],[data-screen=PREMATCH],[data-screen=ONLINE_LOBBY]) .alpha-panel .menu:has(.cs830){background:linear-gradient(180deg,#03201de6 0,#03201de0 13%,#03201d38 24%,#03201d30 62%,#03201d9a 78%,#03201dd8 100%)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.cs-team{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 background:
  linear-gradient(112deg,transparent 0 9%,color-mix(in srgb,var(--tier) 48%,transparent) 9% 15%,transparent 15% 21%,color-mix(in srgb,var(--tier) 32%,transparent) 21% 23.5%,transparent 23.5% 63%,color-mix(in srgb,var(--tier) 40%,transparent) 63% 70%,transparent 70% 74%,color-mix(in srgb,var(--tier) 26%,transparent) 74% 76%,transparent 76%),
  radial-gradient(ellipse 70% 55% at 50% 42%,color-mix(in srgb,var(--tier) 38%,transparent),transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--tier) 46%,#04101a70) 0%,color-mix(in srgb,var(--tier) 34%,#04101a6a) 55%,#04101ac8 100%)!important}
.cs-settings{justify-content:flex-start!important;gap:12px!important}
.cs-settings .cs-sec{flex:none}
.cs-right .cs-settings{flex:1 1 auto}
.cs-right{justify-content:space-between}

/* (8.33) the arena pictures are close shots now: only a little crop */
.cs-arenas .cs-img{background-size:118%!important;background-position:50% 55%!important}


.cs-team,.cs-team.l,.cs-team.r{transform:none!important}.cs-team>*{transform:none!important}


.cs-team,.cs-team.l,.cs-team.r{transform:none!important}.cs-team>*{transform:none!important}


/* Update 8.34: the names on a darker see-through band across the top of each side, bigger; the players lower (less room under the pedestal) */
.cs-names{margin:0;padding:12px 14px!important;background:linear-gradient(90deg,#03070dd0,#03070da8 50%,#03070dd0);border-bottom:1px solid color-mix(in srgb,var(--tier) 55%,transparent);box-shadow:0 6px 18px #0006}
.cs-names.n1 .cs-name b{font-size:clamp(20px,1.8vw,32px)!important;letter-spacing:.01em}
.cs-names:not(.n1) .cs-name b{font-size:clamp(13px,1.05vw,18px)}
.cs-names:not(.n1) .cs-name i{font-size:clamp(14px,1.1vw,19px)}
.cs-team{border-radius:16px;overflow:hidden}