/* Update 7.2 — the menus' moving backdrop (menu-backdrop.mjs) and the main menu's picture cards (menu-navigation.mjs). Loaded last. */
/* ---- backdrop: two layers cross-fade; the visible one drifts with a slow, light zoom ------------------------------------------------ */
#menuBackdrop{position:absolute;inset:0;overflow:hidden;background:#06120f;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
#menuBackdrop.show{opacity:1;visibility:visible;transition:opacity .45s ease}
#menuBackdrop .mb-layer{position:absolute;inset:0;background:#06120f center/cover no-repeat;opacity:0;transition:opacity 1.1s ease;will-change:transform,opacity;backface-visibility:hidden}
#menuBackdrop .mb-layer.on{opacity:1}
#menuBackdrop .mb-layer.run{animation:mb-drift 26s ease-in-out infinite alternate}
@keyframes mb-drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.2%,-.9%,0)}}
/* a light shade: the top for the logo bar, the edges, a little more on the screens with panels to read */
#menuBackdrop .mb-shade{position:absolute;inset:0;background:linear-gradient(180deg,#03141299 0,#0314121a 20%,#03141200 55%,#0314128c 100%),radial-gradient(ellipse at 50% 45%,#02100e00 55%,#02100e80 100%)}
body:not([data-screen=MENU]) #menuBackdrop .mb-shade{background:linear-gradient(180deg,#031412a6 0,#03141259 24%,#03141240 60%,#031412a6 100%),radial-gradient(ellipse at 50% 45%,#02100e00 50%,#02100e99 100%)}
@media(prefers-reduced-motion:reduce){#menuBackdrop .mb-layer.run{animation:none;transform:scale(1.03)}}

/* ---- main menu -------------------------------------------------------------------------------------------------------------------- */
body[data-screen=MENU] #panel.alpha-panel.home-panel{inset:0;padding:0;overflow:hidden;background:none}
body[data-screen=MENU] .controller-status{top:31px;right:78px}
/* the logo is back in the top bar (the old artwork carried its own) */
body[data-screen=MENU] header .brand{visibility:visible}
.hm7{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(80px,11.5vh,104px) 24px clamp(14px,3vh,30px)}
/* the grid is as wide as fits both the width and the height of the window: Carriera (3:1) + the middle row (two 3:1) + the bottom row
   (three 16:9) stack to 0.6875 of the width, plus the gaps */
.hm7-grid{--g:clamp(10px,1.15vw,20px);width:min(calc(100vw - 48px),calc((100vh - clamp(80px,11.5vh,104px) - clamp(14px,3vh,30px) - 1.46 * var(--g)) / .6875));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
.alpha-panel button.hm-tile{position:relative;display:block;width:100%;height:auto;min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;border:1px solid #cfe8bd40;border-radius:clamp(8px,.9vw,14px);background:#0a2724;color:#fff;text-align:left;cursor:pointer;container-type:inline-size;box-shadow:0 10px 26px #00100e8c;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}
.hm7-career{grid-column:1/-1}.hm7-free,.hm7-ranked{grid-column:span 3}.hm7-profile,.hm7-tutorial,.hm7-settings{grid-column:span 2}
/* the picture: the card has the picture's own proportions, so it is shown whole (contain = exact fit) */
.hm7-art{position:absolute;inset:0;display:block}
.hm7-art img,.hm7-art svg{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;filter:brightness(var(--menu-art-exposure,.86)) saturate(.94)}
/* shade for the words: from the left on the wide cards (their subjects stand on the right), from the bottom on the others */
.hm7-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#021714e6 0,#021714a6 24%,#02171433 46%,#02171400 62%)}
.hm7-profile .hm7-shade,.hm7-tutorial .hm7-shade,.hm7-settings .hm7-shade{background:linear-gradient(0deg,#021714f0 0,#021714b3 26%,#02171400 58%)}
.hm7-copy{position:absolute;left:4.2cqi;bottom:12%;right:30%;display:flex;flex-direction:column;gap:.5em;pointer-events:none}
.hm7-profile .hm7-copy,.hm7-tutorial .hm7-copy,.hm7-settings .hm7-copy{left:6.5cqi;right:6.5cqi;bottom:7.5cqi}
.hm7-copy strong{display:flex;align-items:center;gap:.28em;font:italic 900 clamp(18px,5.6cqi,68px)/1 "Segoe UI Black","Arial Black",Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-shadow:0 3px 14px #000a}
.hm7-copy strong::before{content:"";flex:none;width:.2em;height:.86em;border-radius:2px;background:var(--lime,#d4f26a);transform:skewX(-18deg);box-shadow:0 0 12px #d4f26a88}
.hm7-free .hm7-copy strong::before,.hm7-profile .hm7-copy strong::before,.hm7-settings .hm7-copy strong::before{background:#ff8f2e;box-shadow:0 0 12px #ff8f2e88}
.hm7-copy small{font:700 clamp(9px,1.55cqi,17px)/1.25 "Segoe UI",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e1eee4;text-shadow:0 2px 8px #000c;padding-left:.2em}
.hm7-free .hm7-copy strong,.hm7-ranked .hm7-copy strong{font-size:clamp(17px,7.4cqi,52px)}.hm7-free .hm7-copy small,.hm7-ranked .hm7-copy small{font-size:clamp(9px,2.6cqi,15px)}
.hm7-profile .hm7-copy strong,.hm7-tutorial .hm7-copy strong,.hm7-settings .hm7-copy strong{font-size:clamp(16px,9.6cqi,44px)}.hm7-profile .hm7-copy small,.hm7-tutorial .hm7-copy small,.hm7-settings .hm7-copy small{font-size:clamp(8px,3.9cqi,14px);letter-spacing:.1em}
/* the round arrow, bottom right */
.hm7-go{position:absolute;right:3cqi;bottom:3cqi;display:grid;place-items:center;width:clamp(22px,3.2cqi,40px);aspect-ratio:1;border:2px solid #ffffffcc;border-radius:50%;background:#02171466;color:#fff;font:700 clamp(14px,2.2cqi,26px)/1 Arial,sans-serif;padding-bottom:.08em;transition:background .2s ease,color .2s ease,border-color .2s ease}
.hm7-free .hm7-go,.hm7-ranked .hm7-go{width:clamp(22px,5.4cqi,38px);font-size:clamp(14px,3.8cqi,24px)}
.hm7-profile .hm7-go,.hm7-tutorial .hm7-go,.hm7-settings .hm7-go{width:clamp(20px,8cqi,36px);font-size:clamp(13px,5.6cqi,22px);right:5cqi;bottom:auto;top:5cqi}
/* Focus is shown by the frame and arrow; artwork keeps the same exposure in every interaction state. */
.alpha-panel button.hm-tile:is(:hover,:focus-visible){transform:translateY(-2px);outline:none;border-color:var(--lime,#d4f26a);box-shadow:0 0 0 2px var(--lime,#d4f26a),0 0 32px #d4f26a59,0 14px 30px #00100e99;background:#0a2724}
.alpha-panel button.hm-tile:is(:hover,:focus-visible) .hm7-go{background:var(--lime,#d4f26a);border-color:var(--lime,#d4f26a);color:#0b2320}
.alpha-panel button.hm-tile:active{transform:translateY(0) scale(.992);transition-duration:.08s}
@media(prefers-reduced-motion:reduce){.alpha-panel button.hm-tile{transition:none}.alpha-panel button.hm-tile:is(:hover,:focus-visible){transform:none}}
/* narrow or very short windows: the grid scrolls instead of shrinking the cards below readability */
@media(max-width:700px){.hm7{align-items:flex-start;overflow:auto}.hm7-grid{width:calc(100vw - 32px)}.hm7-free,.hm7-ranked{grid-column:1/-1}.hm7-profile,.hm7-tutorial,.hm7-settings{grid-column:span 3}}
@media(max-height:520px){.hm7{align-items:flex-start;overflow:auto}}

/* ---- the other menu screens: the panels' glass lets the moving picture show through a little more (same blur, same inner cards) ---- */
body:not([data-screen=MENU]):not([data-screen=MATCH]):not([data-screen=PAUSED]):not([data-screen=RESULT]) .alpha-panel .menu{background:#03201dc4;backdrop-filter:blur(12px)}
/* ---- Update 7.3: the section screens (Carriera, Partita libera, Competitiva, Profilo): a row of upright picture cards ----------------- */
/* each card has its picture's proportions (shown whole); the row is as tall as the screen allows, narrower only if the width runs out */
.pc-row{--pg:clamp(12px,1.6vw,28px);flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center;gap:var(--pg)}
.alpha-panel button.hm-tile.pc-card{flex:none;width:auto;height:min(100cqh,calc((100cqw - (var(--n) - 1) * var(--pg)) / (var(--n) * var(--ar))))}
.pc-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#021714f2 0,#021714b8 20%,#02171400 46%)}
.pc-copy{position:absolute;left:7cqi;right:7cqi;bottom:6.5cqi;display:flex;flex-direction:column;gap:.45em;pointer-events:none}
.pc-copy strong{display:flex;align-items:center;gap:.28em;font:italic 900 clamp(17px,9.6cqi,46px)/1.02 "Segoe UI Black","Arial Black",Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-shadow:0 3px 14px #000a}
.pc-copy strong::before{content:"";flex:none;align-self:stretch;width:.2em;min-height:.86em;border-radius:2px;background:var(--lime,#d4f26a);transform:skewX(-18deg);box-shadow:0 0 12px #d4f26a88}
.pc-card:nth-child(2) .pc-copy strong::before{background:#ff8f2e;box-shadow:0 0 12px #ff8f2e88}
.pc-copy small{font:700 clamp(9px,3.9cqi,16px)/1.25 "Segoe UI",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#e1eee4;text-shadow:0 2px 8px #000c;padding-left:.2em}
.pc-card .hm7-go{width:clamp(22px,9cqi,42px);font-size:clamp(14px,6cqi,26px);right:6cqi;top:6cqi;bottom:auto}
.pc-card.is-soon .hm7-art img{filter:brightness(var(--menu-art-exposure,.86)) saturate(.4);opacity:.72}
.alpha-panel button.hm-tile.pc-card.is-soon{cursor:default}
.alpha-panel button.hm-tile.pc-card.is-soon:hover{transform:none;border-color:#cfe8bd40;box-shadow:0 10px 26px #00100e8c}
.pc-card .menu-lock{right:6cqi;top:6cqi}
.navigation-hub.pic-hub .scr-head{margin:0}

/* ---- Update 7.3: career cards — the name and the hand on top, the state at the bottom left, the character centred -------------------- */
.alpha-panel .cw-card .cw-face.cw-mid{left:0;width:auto}
.cw-face.cw-mid img{object-fit:contain;object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
.cw-faces.cw-mid{left:0;width:auto;justify-content:center;-webkit-mask-image:none;mask-image:none}
.cw-faces.cw-mid img{width:48%}.cw-faces.cw-mid img:first-child{margin-right:-8%}
.cw-face.cw-mid::after,.cw-faces.cw-mid::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#031614db 0,#03161466 30%,#03161400 48%,#03161400 64%,#031614c9 100%)}
.cw-txt.cw-v2{max-width:none;width:100%;justify-content:space-between}
.cw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;min-width:0}
.cw-head .cw-name{min-width:0;-webkit-line-clamp:2}.cw-head .cw-name i{font-style:normal;color:var(--lime)}
.cw-hand{flex:none;margin-top:1px;padding:1px 4px;border-radius:4px;background:#021412c4;font:normal 900 clamp(8px,.62vw,11px)/1.25 Arial,sans-serif;letter-spacing:.06em;color:var(--lime);text-shadow:none}
.cw-hand.left{color:#ffb45e}

/* ---- Update 7.3: the single career's tabs beside its title (the path / the player's editor) --------------------------------------- */
.cw-tabs{flex:none;align-self:center;display:flex;gap:4px;padding:4px;border-radius:99px;background:#021a17c7;border:1px solid var(--line,#a0c5ad38)}
.alpha-panel .cw-tab{display:inline-flex;align-items:center;gap:7px;min-height:0;margin:0;padding:9px 16px;border:0;border-radius:99px;background:transparent;color:#cfe0d4;font:900 clamp(10px,.8vw,12px)/1 Arial,sans-serif;letter-spacing:.08em;box-shadow:none;white-space:nowrap}
.alpha-panel .cw-tab:hover:not(.on){background:#ffffff14;color:#fff;transform:none}
.alpha-panel .cw-tab.on{background:var(--lime,#d4f26a);color:#10251e}
.cw-tab kbd{min-width:0;padding:2px 5px;font-size:9px;border-bottom-width:2px}
.alpha-panel .cw-tab.on kbd{background:#10251e;color:var(--lime,#d4f26a);border-color:#10251e}
@media(max-width:1100px){.cw-tabs{order:5;flex-basis:100%;justify-content:center;background:none;border:0;padding:0}}
/* the section screens keep their cards straight over the backdrop (no glass panel behind them) */
body:not([data-screen=MENU]):not([data-screen=MATCH]):not([data-screen=PAUSED]):not([data-screen=RESULT]) .alpha-panel .menu:has(>.navigation-hub){background:none;backdrop-filter:none;border:0;box-shadow:none}