/* Update 8.22. Loaded last: only overrides.
   1. The main menu's choices: a banner opens a row of small slanted buttons beside it, with a neon edge in the banner's colour (menu-navigation.mjs HOME_SUBS)
   2. The logo top right on every menu screen, where it stands in the main menu (alpha.mjs .corner-brand)
   3. The controller: an icon that lights up, no words
   4. Impostazioni in two columns, with the menu's music; the camera tried out live (CAM_TUNE) */

/* ---- 1. the choices beside a banner ---- */
.hm8-row{position:relative}
.hm8-row-career{--c:#ffb83d}.hm8-row-free{--c:#7be04a}.hm8-row-ranked{--c:#2fd8ec}.hm8-row-profile{--c:#ff4f63}
.hm8-row.open .hm8-img{filter:none!important}
.hm8-row.open .hm8-title{color:#fff!important}
.hm8-subs{position:absolute;left:calc(100% + 1.1vw);top:50%;transform:translateY(-50%);display:flex;gap:calc(var(--bw)*.022);z-index:3;pointer-events:none}
.alpha-panel .hm8 button.hm8-sub{pointer-events:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75em;height:calc(var(--bw)*.118);min-width:calc(var(--bw)*.27);margin:0;padding:0 1.6em;
 border:2px solid var(--c);border-radius:7px;background:linear-gradient(180deg,#0d1716ee,#050c0bf2);color:#fff;font:900 clamp(11px,calc(var(--bw)*.021),19px)/1 "Arial Black","Segoe UI Black",Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
 transform:skewX(-14deg);box-shadow:0 0 .55em color-mix(in srgb,var(--c) 70%,transparent),0 0 1.4em color-mix(in srgb,var(--c) 32%,transparent),inset 0 0 .9em color-mix(in srgb,var(--c) 22%,transparent);
 opacity:0;animation:hm8-sub-in .3s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:calc(var(--i)*65ms);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
.alpha-panel .hm8 button.hm8-sub>*{transform:skewX(14deg)}
.hm8-sub-ico{width:1.65em;height:1.65em;flex:none;color:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 60%,transparent))}
.alpha-panel .hm8 button.hm8-sub:is(:hover,:focus-visible,:focus):not(:disabled){outline:none;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,#0d1716),color-mix(in srgb,var(--c) 14%,#050c0b));transform:skewX(-14deg) translateY(-2px);
 box-shadow:0 0 .7em var(--c),0 0 2em color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 1.1em color-mix(in srgb,var(--c) 35%,transparent)}
.alpha-panel .hm8 button.hm8-sub:disabled{filter:saturate(.35) brightness(.7);cursor:not-allowed}
/* (9.54) a locked entry: the padlock and the small "PROSSIMAMENTE" tag, readable even dimmed */
.alpha-panel .hm8 button.hm8-sub.locked{filter:saturate(.25) brightness(.62);border-style:dashed}
.alpha-panel .hm8 button.hm8-sub.locked .hm8-lock{width:1.15em;height:1.15em;flex:none;color:#ffd24a;fill:currentColor;filter:drop-shadow(0 0 4px rgba(255,210,74,.55))}
.alpha-panel .hm8 button.hm8-sub.locked .hm8-soon{font-size:.5em;letter-spacing:.14em;font-weight:900;color:#ffd24a;border:1px solid rgba(255,210,74,.6);border-radius:3px;padding:.2em .5em;white-space:nowrap}
@keyframes hm8-sub-in{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.alpha-panel .hm8 button.hm8-sub{animation:none;opacity:1}}

/* ---- 2. the logo in the corner of every menu screen (the main menu's own stays as it is) ---- */
.corner-brand{position:fixed;top:clamp(30px,5.5vh,66px);right:clamp(34px,4.4vw,90px);z-index:0;pointer-events:none;transform:scale(.87);transform-origin:top right;filter:drop-shadow(0 4px 18px #000a)}
.corner-brand .brand-mark.big{margin:0}
.corner-brand .brand-mark.big .bm-icon{width:clamp(66px,6.2vw,124px);height:clamp(66px,6.2vw,124px)}
.corner-brand .brand-mark.big .bm-text>b{font-size:clamp(35px,3.8vw,74px)}
.corner-brand .brand-mark.big .bm-text>span{font-size:clamp(18px,1.9vw,38px)}
.corner-brand .brand-mark.big .bm-text small{font-size:clamp(8px,.62vw,12px);letter-spacing:.27em}
body:not([data-screen=MATCH]):not([data-screen=PAUSED]):not([data-screen=RESULT]):not([data-screen=CAM_TUNE]) #game>header .brand{display:none}
/* the screens' own headers keep clear of it */
body:not([data-screen=MENU]) .alpha-panel .scr-head{padding-right:clamp(230px,21vw,420px)}

/* ---- 3. the controller icon ---- */
.controller-status{width:118px;height:30px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;display:flex;align-items:center;justify-content:flex-start;font-size:0!important}
.controller-status svg{width:34px;height:26px;overflow:visible;transition:filter .3s ease}
.controller-status .pad-body{fill:#0a1a18cc;stroke:#6f817b;stroke-width:1.8;stroke-linejoin:round;transition:stroke .3s ease,fill .3s ease}
.controller-status .pad-cross{fill:none;stroke:#6f817b;stroke-width:1.9;stroke-linecap:round}
.controller-status .pad-btn{fill:#6f817b}
.controller-status[data-st=on] .pad-body{stroke:#d4f26a;fill:#16301ccc}
.controller-status[data-st=on] :is(.pad-cross){stroke:#d4f26a}.controller-status[data-st=on] .pad-btn{fill:#d4f26a}
.controller-status[data-st=on] svg{filter:drop-shadow(0 0 5px #d4f26acc) drop-shadow(0 0 12px #d4f26a66)}
.controller-status[data-st=odd] .pad-body,.controller-status[data-st=odd] .pad-cross{stroke:#ffb347}.controller-status[data-st=odd] .pad-btn{fill:#ffb347}

/* ---- 4. Impostazioni ---- */
body[data-screen=SETTINGS] .settings-grid.s822{display:grid;column-count:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;max-width:1320px}
body[data-screen=SETTINGS] .s822>.w-sec{grid-column:1/-1;margin:0}
body[data-screen=SETTINGS] .s822 .s-col{display:flex;flex-direction:column;gap:18px;min-width:0}
body[data-screen=SETTINGS] .s822 .w-sec{display:block;margin:0;background:var(--p817-panel);border:1px solid var(--p817-line);border-radius:18px;box-shadow:var(--p817-hi);padding:18px 22px 20px}
body[data-screen=SETTINGS] .s822 .w-sec>h4{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:900 11px/1 var(--fam);letter-spacing:.16em;color:var(--lime)}
body[data-screen=SETTINGS] .s822 .w-sec>h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#d4f26a40,transparent)}
.s822 .s-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.s822 .s-actions .cta{min-height:46px}
.s822 .hint{margin:0 0 12px;color:#b9c9b6;font-size:12.5px;line-height:1.45}
.song-list{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--lime) #0d2f2a}
.song-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:6px 8px;border-radius:12px;background:#ffffff07;border:1px solid #ffffff10;transition:background .15s ease,border-color .15s ease}
.song-row.playing{background:#d4f26a14;border-color:#d4f26a66}
.song-row.off .song-name{color:#7f8f88}
.alpha-panel .song-row button.song-play{width:34px;height:34px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:#ffffff12;border:1px solid #ffffff22;color:#eef5e4}
.alpha-panel .song-row button.song-play svg{width:15px;height:15px;margin-left:2px}
.alpha-panel .song-row button.song-play:is(:hover,:focus-visible){background:var(--lime);color:#14301f;border-color:transparent}
.song-row.playing button.song-play{background:var(--lime)!important;color:#14301f!important}
.song-name{font-weight:800;font-size:14px;color:#eef5e4;display:flex;align-items:center;gap:10px;min-width:0}
.song-name em{font-style:normal;font:900 9.5px/1 var(--fam);letter-spacing:.14em;color:#14301f;background:var(--lime);padding:4px 7px;border-radius:999px}
.alpha-panel .song-row button.song-switch{display:inline-flex;align-items:center;gap:8px;min-height:0;padding:5px 10px 5px 6px;border-radius:999px;background:#00000033;border:1px solid #ffffff1c;font:900 9.5px/1 var(--fam);letter-spacing:.12em;color:#9fb09a}
.song-switch i{position:relative;width:30px;height:16px;border-radius:999px;background:#ffffff1f;transition:background .15s ease}
.song-switch i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#c9d6c4;transition:left .15s ease,background .15s ease}
.alpha-panel .song-row button.song-switch.on{color:#e6f5c9}.song-switch.on i{background:#d4f26a66}.song-switch.on i::after{left:16px;background:var(--lime)}
@media(max-width:900px){body[data-screen=SETTINGS] .settings-grid.s822{grid-template-columns:1fr}}

/* ---- the camera tried out live: a small card bottom left over the court ---- */
body[data-screen=CAM_TUNE] .alpha-panel{inset:auto auto 26px 26px;width:min(430px,92vw);overflow:visible;padding:0;background:none}
body[data-screen=CAM_TUNE] .alpha-panel .menu{max-width:none;padding:20px 22px;background:var(--p817-panel);border:1px solid var(--p817-line);border-radius:20px;box-shadow:var(--p817-hi),0 20px 50px #0008}
.camtune h2{margin:10px 0 6px;font-size:28px}.camtune .hint{margin:0 0 14px;color:#b9c9b6;font-size:13px;line-height:1.45}
.camtune label{display:block;margin:0 0 12px;font-weight:800;font-size:13.5px;color:#e6efdf}.camtune .cam-val{float:right;color:var(--lime);font-weight:900}
.camtune input[type=range]{display:block;width:100%;margin:8px 0 2px}
.camtune .s-actions{display:flex;gap:10px;margin-top:8px}

/* while a row is open, only its own banner is in full colour (the focus moved to the row's first choice) */
.hm8.has-open .hm8-row:not(.open) .hm8-img{filter:saturate(.75) brightness(.8)!important}
.hm8.has-open .hm8-row:not(.open) .hm8-title{color:#dfe6d8!important}
.hm8.has-open .hm8-row:not(.open) .hm8-banner:hover .hm8-img{filter:saturate(.95) brightness(.95)!important}

/* the TEST menu, small, bottom right of the main menu */
.alpha-panel .hm8 button.hm8-test{position:fixed;right:22px;bottom:18px;z-index:5;display:inline-flex;align-items:center;gap:7px;min-height:0;margin:0;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid #ffffff2e;background:#031412b3;color:#cfdac9;font:900 11px/1 var(--fam);letter-spacing:.14em;box-shadow:0 6px 18px #0006;transition:background .14s ease,border-color .14s ease,color .14s ease}
.alpha-panel .hm8 button.hm8-test:is(:hover,:focus-visible){background:#ff8f2ecc;border-color:#ffc08a;color:#fff;outline:none}

/* (Update 8.25: no logo over the player editor - creation, Profilo > Modifica giocatore, TEST > Giocatori: it stays in the main menu) */
body:is([data-screen=EDITOR],[data-screen=TEST_PLAYER]) .corner-brand,.alpha-panel:has(.pe823) .corner-brand{display:none}
body:is([data-screen=EDITOR],[data-screen=TEST_PLAYER]) .alpha-panel .scr-head,.alpha-panel .menu:has(.pe823) .scr-head{padding-right:0}

/* Update 8.27: the player picks (Partita veloce: you, your opponent, the 2v2 partner and second opponent) as in the user's picture - the
   cards keep their size and their 8 a row; the picture fills the card, the name on a dark band at its foot, the hand on top; the level
   filter over the grid; the side panel: a tall stage (the tier picture, the player on a pedestal), the name and the overall, the level in
   six stars, the chips, the stats with their icons, the button */
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .fm-left{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .fm-left .fm-grid{flex:1;min-height:0}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .alpha-panel button.fm-card{position:relative;display:block;min-height:150px;padding:0;overflow:hidden}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .fm-card img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 34%;margin:0}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .fm-card .fm-name{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 8px 6px;text-align:left;font:900 12px/1.12 var(--fam);letter-spacing:-.01em;color:#fff;background:linear-gradient(180deg,transparent,#000000b8 46%,#000000d9);text-shadow:0 1px 2px #000}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .fm-card small{position:absolute;left:8px;top:7px;z-index:1;padding:0;font-size:9px;color:#eef4e8;text-shadow:0 1px 2px #000}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .fm-card .fm-hand{z-index:1}
:is(body[data-screen=CHARACTER_SELECT],body[data-screen=OPPONENT_SELECT],body[data-screen=PARTNER_SELECT],body[data-screen=OPPONENT2_SELECT]) .alpha-panel button.fm-card.on::after{content:'';position:absolute;right:7px;bottom:30px;z-index:2;width:20px;height:20px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23122a20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 2px 6px #0008}
/* the level filter */
.lv-filter{display:flex;align-items:stretch;gap:8px;padding:2px 6px 0;flex-wrap:nowrap}
.lv-filter .lv-pad{align-self:center;font:900 10px/1 var(--fam);letter-spacing:.06em;color:#0f241d;background:#e6efdf;border-radius:6px;padding:5px 6px}
.alpha-panel .lv-filter .lvf{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 6px;border-radius:11px;border:1px solid color-mix(in srgb,var(--tier,#ffffff) 45%,#ffffff1c);background:linear-gradient(160deg,color-mix(in srgb,var(--tier,#2a3d36) 30%,#0b1f1b),#071613);color:#e9f2e3;box-shadow:inset 0 1px 0 #ffffff12;transition:transform .12s ease,border-color .12s ease}
.alpha-panel .lv-filter .lvf b{font:900 13px/1 var(--fam);letter-spacing:.05em}
.alpha-panel .lv-filter .lvf small{font:800 9px/1 var(--fam);letter-spacing:.08em;color:#c7d6c4}
.alpha-panel .lv-filter .lvf.lvf-all{flex:1.5}
.alpha-panel .lv-filter .lvf.on{background:var(--lime);border-color:var(--lime);color:#122a20;box-shadow:0 0 0 3px #d4f26a33}
.alpha-panel .lv-filter .lvf.on small{color:#24402f}
.alpha-panel .lv-filter .lvf:hover:not(.on),.alpha-panel .lv-filter .lvf:focus-visible:not(.on){border-color:#ffffffa0;transform:translateY(-1px)}
.lvf-stars{display:flex;gap:1px;justify-content:center}
.lvf .lv-star{width:14px;height:14px}
.lv-star{fill:#ffffff22;stroke:#ffffff40;stroke-width:1.2}
.lv-star.on{fill:var(--tier,#f1c94e);stroke:color-mix(in srgb,var(--tier,#f1c94e) 60%,#000);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tier,#f1c94e) 55%,transparent))}
.lvf.on .lv-star.on{fill:#122a20;stroke:#122a20;filter:none}
/* the side panel */
.fm-profile.pick827{gap:0}
.fm-profile.pick827 #playerPreview{flex:1 1 0;height:auto;min-height:170px;margin-bottom:10px;background-position:center 30%!important;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -60px 70px -20px #000000a0}
.fm-profile.pick827 #playerPreview canvas{height:100%!important}
.lv-stars{display:flex;align-items:center;gap:10px;margin:6px 0 8px;padding:7px 10px;border-radius:10px;background:#00000038;border:1px solid color-mix(in srgb,var(--tier) 40%,#ffffff14)}
.lv-stars .lv-label{font:900 10px/1 var(--fam);letter-spacing:.14em;color:#c9d7c6}
.lv-stars .lv-row{display:flex;gap:3px;flex:1}
.lv-stars .lv-star{width:19px;height:19px}
.lv-stars .lv-num{font:900 12px/1 var(--fam);color:var(--tier)}
.stat-panel .sl-name{display:flex;align-items:center;gap:7px}
.sl-ico{width:15px;height:15px;flex:none;fill:none;stroke:var(--lime);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #d4f26a44)}/* (8.27) room for the stage: the stats a little tighter, the button on one line, a long name smaller; the tier picture framed lower, off its
   dark top corners */
.fm-profile.pick827{padding:12px 16px 14px}
.fm-profile.pick827 #playerPreview{min-height:min(270px,30vh);background-size:cover!important;background-position:50% 50%!important}
.fm-profile.pick827 .ovr-name h3{font-size:clamp(18px,1.5vw,26px);line-height:1.02;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fm-profile.pick827 .ovr-title{margin:0 0 2px}
.fm-profile.pick827 .lv-stars{margin:4px 0 6px;padding:5px 10px}
.fm-profile.pick827 .fm-tags{margin:0 0 6px}
.fm-profile.pick827 .sline{min-height:0!important;padding:2px 0!important;margin:0!important}
.fm-profile.pick827 .sl-name{font-size:11.5px}
.fm-profile.pick827 .cta{margin-top:8px!important;padding:11px 16px!important;font-size:13px!important;white-space:nowrap;min-height:0}
.fm-profile.pick827 .cta br{display:none}

/* Update 8.28: the corner logo behind the screen's box (the box above it), as in the main menu */
#panel>.menu{position:relative;z-index:1}

/* (8.28) the stat icons everywhere: a little space before the name */
.sl-name{display:inline-flex;align-items:center;gap:7px}


/* Update 8.30: the back button's arrow, a drawn chevron in the middle of its disc */
.alpha-panel .back-pill span{padding:0}.alpha-panel .back-pill span svg{width:14px;height:14px;display:block}


/* Update 8.30: the ranked lobbies - your player (3D on its pedestal, level, stats) on the left, the rank and the search on the right */
.lobby-grid.rk830{display:grid;grid-template-columns:minmax(300px,25vw) minmax(0,1fr);gap:18px;align-items:stretch;min-height:min(640px,66vh)}
.lobby-grid.rk830 .rk-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-content:start}
.lobby-grid.rk830 .rk-col>*{margin:0}
.lobby-grid.rk830 .rk-player{height:auto}