/* Update 8.17: a more premium layout for the free-match picks, the match setup (court, time, weather, format, venue), the settings and the pause.
   Loaded last: only overrides. Shared look: deep green glass panels with a thin lime-tinted border and an inner highlight, small-caps lime section
   labels with a hairline, segmented controls with a soft lime "on" state; the 3D stages are framed and the figures sit small in the middle. */
:root{--p817-panel:linear-gradient(160deg,#103a34e6 0%,#0a2724ee 55%,#071c1af2 100%);--p817-line:#d4f26a26;--p817-hi:inset 0 1px 0 #ffffff17,0 18px 42px #00000059}

/* (the free-match picks keep their own cards - face over the name, six to a row: Update 8.19 put them back) */
/* the side panel of the pick: framed stage, figure small and centred */
.fm-profile.stat-panel{background:var(--p817-panel);border:1px solid var(--p817-line);box-shadow:var(--p817-hi)}
.fm-profile #playerPreview{border-radius:16px;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -40px 60px #00000040}

/* ---- the match setup ---- */
.fm-versus{gap:18px;align-items:start}
.fm-versus .vs-stage{border:1px solid var(--p817-line);box-shadow:var(--p817-hi);border-radius:20px}
.fm-versus .vs-stage #versusPreview canvas{height:clamp(190px,27vh,290px)!important}
.fm-versus .vs-stage #versusPreview{height:auto!important;min-height:0!important}
.fm-versus .vs-col{display:flex;flex-direction:column;gap:14px;min-height:0}
.fm-versus .vs-names{padding:12px 18px 14px}
.fm-versus .vs-badge{font-size:clamp(26px,2.4vw,40px);text-shadow:0 0 18px #d4f26a66}
.fm-setup,.fm-versus .fm-venue{background:var(--p817-panel);border:1px solid var(--p817-line);border-radius:20px;box-shadow:var(--p817-hi);padding:18px 20px}
.fm-setup{display:flex;flex-direction:column;gap:14px}
.fm-seg>small{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:900 10.5px/1 var(--fam);letter-spacing:.16em;color:var(--lime);text-transform:uppercase}
.fm-seg>small::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#d4f26a40,transparent)}
.fm-seg .segs{gap:8px}
.alpha-panel .fm-seg .seg{min-height:42px;border-radius:11px;border:1px solid #ffffff17;background:linear-gradient(180deg,#ffffff0d,#ffffff04);color:#e3eedb;font-weight:800;letter-spacing:.02em;transition:background .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.alpha-panel .fm-seg .seg:hover:not(:disabled){border-color:#d4f26a66;transform:translateY(-1px)}
.alpha-panel .fm-seg .seg.on{background:linear-gradient(180deg,#e3fb8a,#c7ea55);color:#14301f;border-color:transparent;box-shadow:0 0 0 3px #d4f26a26,0 8px 18px #0006}
/* the courts keep their colour, as a swatch with a soft sheen; the chosen one gets the lime ring */
.alpha-panel .fm-seg .seg[style*="--court"]{background:linear-gradient(180deg,#ffffff24,#ffffff00 55%),var(--court);color:#fff;text-shadow:0 1px 2px #0009;border-color:#ffffff26}
.alpha-panel .fm-seg .seg[style*="--court"].on{box-shadow:0 0 0 3px var(--lime),0 8px 18px #0006;color:#fff}
.fm-setup .hint{margin:2px 0 0;padding:10px 12px;border-radius:12px;background:#00000026;border:1px solid #ffffff0f;font-size:13px;line-height:1.45;color:#c6d5c4}
.fm-setup>.cta{margin-top:4px}
.fm-versus .vs-blurb{margin:10px 2px 0;color:#c6d5c4;font-size:13px}

/* ---- settings: two balanced columns of cards, centred ---- */
body[data-screen=SETTINGS] .settings-grid{display:block;column-count:2;column-gap:18px;max-width:1240px}
body[data-screen=SETTINGS] .settings-grid>.w-sec{break-inside:avoid;display:block;margin:0 0 18px;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] .settings-grid>.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] .settings-grid>.w-sec>h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#d4f26a40,transparent)}
body[data-screen=SETTINGS] .settings-grid label{display:block;margin:0 0 12px;font-weight:800;font-size:13.5px;color:#e6efdf}
body[data-screen=SETTINGS] .settings-grid label.check{display:flex;align-items:center;gap:10px}
body[data-screen=SETTINGS] .settings-grid label>input[type=range]{display:block;width:100%;margin:9px 0 2px}
body[data-screen=SETTINGS] .settings-grid label>select{display:block;width:100%}
body[data-screen=SETTINGS] .settings-grid select{margin-top:7px;border-radius:11px;border:1px solid #ffffff1c;background:#061a18;min-height:42px}
body[data-screen=SETTINGS] .settings-grid .cam-val{float:right;color:var(--lime);font-weight:900}
@media(max-width:900px){body[data-screen=SETTINGS] .settings-grid{column-count:1}}

/* ---- pause: one centred card, menu on the left, the match on the right ---- */
body[data-screen=PAUSED] .alpha-panel{inset:10vh max(6vw,calc(50vw - 640px)) 8vh}
body[data-screen=PAUSED] .alpha-panel .menu{height:auto;min-height:0;max-height:100%;align-self:center;overflow:auto;background:var(--p817-panel);border:1px solid var(--p817-line);border-radius:24px;box-shadow:var(--p817-hi),0 30px 80px #0009;backdrop-filter:blur(14px)}
.pause-layout{align-items:center;gap:clamp(24px,4vw,64px)}
.pause-menu h2{font-size:clamp(46px,5vw,78px);letter-spacing:-.03em;margin:10px 0 22px}
.pause-menu .stack{gap:10px}
.pause-menu .stack button:not(.cta){min-height:52px;border-radius:14px;border:1px solid #ffffff17;background:linear-gradient(180deg,#ffffff0e,#ffffff05);transition:border-color .14s ease,transform .14s ease,background .14s ease}
.pause-menu .stack button:hover:not(:disabled),.pause-menu .stack button:focus-visible{border-color:#d4f26a80;transform:translateX(3px)}
.pause-info{display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px;border-radius:20px;background:#00000024;border:1px solid #ffffff0f}
.pause-info .match-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pause-info .match-meta span{padding:6px 11px;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff14;font-size:12px;font-weight:800;color:#d7e4d2}
.pause-info .hint{margin:0;color:#b7c8b6}

/* low windows (720-800 px): the setup fits without scrolling */
@media(max-height:820px){.fm-setup{gap:9px;padding:14px 16px}.alpha-panel .fm-seg .seg{min-height:34px;padding-top:4px;padding-bottom:4px}.fm-seg>small{margin-bottom:6px}.fm-setup .hint{padding:7px 10px;font-size:12px;line-height:1.35}.fm-setup>.cta{min-height:50px;margin-top:0}.fm-versus .vs-stage #versusPreview canvas{height:clamp(170px,26vh,250px)!important}.fm-versus .fm-venue{padding:12px 16px}.fm-versus .vs-names{padding:8px 14px 10px}}

/* ---- Update 8.19 ---- */
/* the main menu's cinematic: the fade through dark between two venues (alpha.mjs cineTick) */
#cineFade{position:absolute;inset:0;background:#020a09;opacity:0;pointer-events:none;transition:opacity 1.1s ease}
#cineFade.on{opacity:1}
#cineFade.instant{transition:none}
/* a soft letterbox and a gentle shade on the left, under the menu's banners, so they stay readable over the moving venue */
#cineShade{display:none}body[data-screen=MENU] #cineShade{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#020c0bcc 0,#020c0b66 30%,#020c0b00 55%),linear-gradient(180deg,#000000a0 0,#00000000 9%,#00000000 91%,#000000a0 100%)}
/* the small button that closes the game, bottom right of the main menu */
.alpha-panel .hm8-quit{position:fixed;right:22px;left:auto;bottom:18px;z-index:5;display:inline-flex;align-items:center;gap:7px;min-height:0;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid #ffffff2e;background:#03141299;backdrop-filter:blur(8px);color:#e6efdf;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-quit:hover,.alpha-panel .hm8-quit:focus-visible{background:#c8473acc;border-color:#ff9a8a;color:#fff}
/* the frame-rate meter (Impostazioni > Grafica e schermo) */
#fpsMeter{position:fixed;right:84px;top:26px;z-index:9999;padding:6px 10px;border-radius:8px;background:#020c0bcc;border:1px solid #ffffff22;color:#d4f26a;font:800 12px/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;pointer-events:none;font-variant-numeric:tabular-nums}
#fpsMeter[data-level=mid]{color:#ffd166}#fpsMeter[data-level=low]{color:#ff7a6b}
#fpsMeter[hidden]{display:none}
/* ---- Update 8.19b: the main menu's banners - a little smaller, one size of title, slanted and styled like the game's titles ---- */
.hm8-list{--bw:min(48vw,calc(var(--bh)*4.5));--gap:.9vh}
.hm8-title{transform:translateY(-52%) skewX(-10deg) rotate(-2deg);transform-origin:left center;color:#f1f6ea;letter-spacing:.03em;text-shadow:0 .07em 0 #000a,0 0 .55em #0008}
.hm8-title>span:last-child::after{content:"";display:block;width:1.6em;height:.11em;margin-top:.14em;border-radius:2px;background:linear-gradient(90deg,#d4f26a,#d4f26a00)}
.hm8 .hm8-banner.hm-tile:is(:hover,:focus-visible){filter:brightness(1.1) drop-shadow(0 0 .7vw #d4f26a88)}
/* (Update 8.19b: behind the menus the venue now moves: a blurred glass panel would be blurred again every frame - it halved the frame rate. The menus' panels
   are solid instead, a little more opaque; the pause, over a still match, keeps its glass) */
body:not([data-screen=MATCH]):not([data-screen=PAUSED]):not([data-screen=RESULT]) :is(.alpha-panel,.alpha-panel *,#menuBackdrop){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body:not([data-screen=MENU]):not([data-screen=MATCH]):not([data-screen=PAUSED]):not([data-screen=RESULT]) .alpha-panel .menu{background:#03201df2}
/* ---- Update 8.20: the focus. The banners that are not chosen sit back - 75% of their colour under a light dark veil - and only the one under the
   pointer or the controller's focus is in full colour; the title follows. The logo a little smaller (-13%), with more room round it ---- */
.hm8 .hm8-banner .hm8-img{filter:saturate(.75) brightness(.8);transition:filter .22s ease}
.hm8 .hm8-banner .hm8-title{color:#dfe6d8;transition:color .22s ease}
.hm8 .hm8-banner:is(:hover,:focus,:focus-visible) .hm8-img{filter:none}
.hm8 .hm8-banner:is(:hover,:focus,:focus-visible) .hm8-title{color:#fff}
.hm8>.brand-mark.big{transform:scale(.87);transform-origin:top right;top:clamp(30px,5.5vh,66px);right:clamp(34px,4.4vw,90px)}