/* Update 7.5 — the tiers (tiers.mjs): the overall badge ("Generale"), the user's tier pictures behind every player card and behind the
   3D models, the trophy pictures heading the career worlds, the career's GIOCATORE tab, the pre-match face-to-face. Loaded last. */
[data-tier=bronzo]{--tier:#d08a50;--tier-img:url(assets/career/sfondo-bronzo-480.webp);--tier-big:url(assets/career/sfondo-bronzo.webp)}
[data-tier=argento]{--tier:#cfd8e2;--tier-img:url(assets/career/sfondo-argento-480.webp);--tier-big:url(assets/career/sfondo-argento.webp)}
[data-tier=oro]{--tier:#f1c94e;--tier-img:url(assets/career/sfondo-oro-480.webp);--tier-big:url(assets/career/sfondo-oro.webp)}
[data-tier=blu]{--tier:#4f9bff;--tier-img:url(assets/career/sfondo-blu-480.webp);--tier-big:url(assets/career/sfondo-blu.webp)}
[data-tier=viola]{--tier:#c070ff;--tier-img:url(assets/career/sfondo-viola-480.webp);--tier-big:url(assets/career/sfondo-viola.webp)}
[data-tier=nero]{--tier:#e3bd62;--tier-img:url(assets/career/sfondo-nero-480.webp);--tier-big:url(assets/career/sfondo-nero.webp)}

/* ---- the overall badge: bigger than any stat, on the tier picture ---------------------------------------------------------------- */
.ovr{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;min-width:64px;padding:7px 10px 6px;box-sizing:border-box;border-radius:12px;border:2px solid var(--tier);background:#0a1212 var(--tier-img) center/cover no-repeat;box-shadow:0 0 0 1px #000a,0 6px 16px #0008,0 0 18px color-mix(in srgb,var(--tier) 38%,transparent);line-height:1;isolation:isolate;overflow:hidden;text-align:center}
.ovr::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,#00000014 10%,#00000080 100%)}
.ovr b{font:italic 900 34px/.95 var(--fam);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 5px #000,0 0 14px color-mix(in srgb,var(--tier) 70%,transparent)}
.ovr small{margin-top:4px;font:900 7.5px/1 Arial,sans-serif;letter-spacing:.16em;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000}
.ovr.small{min-width:50px;padding:5px 7px 4px;border-radius:10px}.ovr.small b{font-size:25px}.ovr.small small{font-size:6.5px;letter-spacing:.12em}
.ovr.big{min-width:80px;padding:9px 12px 7px;border-radius:14px}.ovr.big b{font-size:44px}.ovr.big small{font-size:8.5px}
/* name + hand on the left, the overall on the right */
.ovr-title{display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap!important}
.ovr-name{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.ovr-name h3{margin:0!important;overflow-wrap:anywhere}
.stats-card .ovr-title h3{margin:0}

/* ---- the stage behind a 3D model: the tier picture, whole height ------------------------------------------------------------------- */
.tier-stage[data-tier]{background:color-mix(in srgb,var(--tier) 24%,#142221) var(--tier-big) center/cover no-repeat!important;background-origin:border-box!important;background-clip:border-box!important;border-radius:14px;overflow:hidden;isolation:isolate}
.tier-stage[data-tier]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 16% at 50% 94%,#00000073,transparent 70%)}
#careerPreview.tier-stage,#playerPreview.tier-stage{position:relative}
#careerPreview.tier-stage canvas,#playerPreview.tier-stage canvas{position:relative;z-index:1;display:block;background:transparent!important;border:0}
.tier-stage .rot-hint{z-index:3}
/* the two halves behind the free play versus stage (a team of two: the pair's average) */
.vs-stage .tier-half{position:absolute;top:0;bottom:0;width:50%;border-radius:0!important}
.vs-stage .tier-half.l{left:0}.vs-stage .tier-half.r{right:0}
.vs-stage #versusPreview{position:relative;z-index:1}
.vs-stage .vs-names{position:relative;z-index:1;padding-top:10px;background:linear-gradient(0deg,#031412f0 0,#031412b3 65%,#03141200)}
.vs-ovr{display:flex;align-items:center;gap:8px}.vs-p.r .vs-ovr{flex-direction:row-reverse}.vs-ovr h3{margin:0!important}
.vs-p{display:flex;flex-direction:column;gap:6px}.vs-p.l{align-items:flex-start}.vs-p.r{align-items:flex-end}

/* ---- player cards on their tier picture ----------------------------------------------------------------------------------------------- */
.alpha-panel .cw-card[data-tier]{background:#0a1212 var(--tier-img) center/100% 100% no-repeat;border-color:color-mix(in srgb,var(--tier) 60%,#00000080)}
.alpha-panel .cw-card.locked[data-tier]{border-color:#ffffff24}
.alpha-panel .cw-card.locked[data-tier]::before{content:"";position:absolute;inset:0;z-index:-1;background:#020b0bb8}
.alpha-panel button.fm-card[data-tier]{background:#0a1212 var(--tier-img) center/100% 100% no-repeat;border-color:color-mix(in srgb,var(--tier) 60%,#00000080)}
.fm-card[data-tier] .fm-name,.fm-card[data-tier] small{position:relative;text-shadow:0 1px 2px #000,0 0 8px #000,0 0 3px #000}
.fm-card[data-tier] small{color:#eef4e8}
.alpha-panel button.fm-card.locked[data-tier]{filter:saturate(.55) brightness(.8)}
.alpha-panel img[data-tier]{background:#0a1212 var(--tier-img) center/cover no-repeat!important;border-radius:14px}
.lobby-player img[data-tier]{border:1px solid color-mix(in srgb,var(--tier) 60%,transparent)}

/* ---- career maps: the world's trophy picture heads its row (shown whole), only the progress bar over its foot ----------------------- */
/* the map is the size container: a row is a sixth of it (less the gaps), the trophy cell as wide as the picture's proportions ask */
@media(min-width:861px){
 .cw-map{container-type:size;--cw-gap:clamp(5px,.75vh,10px);gap:var(--cw-gap)}
 .cw-map .cw-row{grid-template-columns:calc((((100cqh - 5 * var(--cw-gap)) / 6) - 6px) * 1122 / 1402) repeat(5,minmax(0,1fr))}
}
.cw-wlabel.cw-cup{display:block;padding:0;border:1px solid color-mix(in srgb,var(--world) 70%,#ffffff40);background:#050807;container-type:inline-size}
.cw-wlabel.cw-cup::before{display:none}
.cw-cup>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cw-cupbar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:clamp(2px,3cqi,5px);padding:20cqi 5cqi 6cqi;background:linear-gradient(0deg,#000000e6 0,#000000b8 50%,#00000000)}
.cw-cup .cw-pips{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(2px,3cqi,4px)}
.cw-cup .cw-pips i{width:auto;height:clamp(3px,4.5cqi,5px);background:#ffffff38}.cw-cup .cw-pips i.on{background:var(--lime)}
/* two lines: the state (IN CORSO / COMPLETATO / BLOCCATO), then the five pips with the count */
.cw-cupst{display:flex;align-items:center;justify-content:center;gap:.2em;font:normal 900 clamp(6.5px,10cqi,12px)/1.1 Arial,sans-serif;letter-spacing:0;color:#f1f5ea;white-space:nowrap;text-shadow:0 1px 2px #000}
.cw-cupst svg{flex:none;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.cw-cuprow{display:flex;align-items:center;gap:clamp(3px,4cqi,6px)}
.cw-cuprow .cw-pips{flex:1;min-width:0}
.cw-cuprow b{flex:none;font:900 clamp(7px,11cqi,12px)/1 Arial,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
.cw-row.current .cw-cup{box-shadow:none}.cw-row.current .cw-cup::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--lime);pointer-events:none}
.cw-row.current .cw-cupst{color:var(--lime)}
/* no footer on the map any more (only the two buttons of a completed career) */
.career-screen.cw-screen{grid-template-rows:auto minmax(0,1fr);grid-auto-rows:auto}
/* the button: AVANZA / GIOCA, grey when the opponent is locked */
.alpha-panel .cta.cw-cta.is-locked,.alpha-panel .cta.cw-cta:disabled{background:#56615c!important;border-color:#56615c!important;color:#d7ddd9!important;box-shadow:none!important;cursor:not-allowed;opacity:1}
.cw-cta svg{width:15px;height:15px;margin-right:7px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cw-info .ovr-title{margin:2px 0 4px}.cw-info .ovr-title h3{font-size:clamp(20px,1.6vw,30px)}
.cw-duo-one .ovr-title{align-items:center}.cw-duo-one .ovr-name{gap:4px}

/* ---- career · GIOCATORE ------------------------------------------------------------------------------------------------------------ */
body[data-screen=CAREER_PLAYER] .alpha-panel{inset:78px 1.4vw 12px;padding:0;overflow:auto}
body[data-screen=CAREER_PLAYER] .alpha-panel .menu{height:100%;min-height:520px;padding:clamp(12px,1.1vw,22px) clamp(14px,1.3vw,26px);box-sizing:border-box;border-radius:20px}
.cp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,.92fr);gap:clamp(10px,1vw,20px);min-height:0}
.alpha-panel .cp-stage{display:flex;min-height:0;height:100%;box-sizing:border-box;padding:clamp(8px,.7vw,14px);border-radius:17px;border:1px solid var(--line);background:#031a17b3}
.cp-stage #playerPreview{flex:1;height:100%;min-height:0;margin:0;border:0}
.cp-stage #playerPreview canvas{display:block;width:100%!important;height:100%!important}
.alpha-panel .cp-card{display:flex;flex-direction:column;gap:8px;min-height:0;height:100%;box-sizing:border-box;overflow:auto;padding:clamp(12px,1.1vw,22px);border-radius:17px}
.cp-card .ovr-title h3{font-size:clamp(22px,1.9vw,36px)}
.cp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.cp-tags .wallet{margin-left:auto}
.cp-screen .career-heading .wallet{display:none}
.cp-hint{margin:0;font-size:11.5px}
.cp-stats .sline{grid-template-columns:minmax(74px,.75fr) minmax(50px,1.5fr) 56px auto;grid-template-areas:"name bar val buy";gap:10px;margin:2px 0;min-height:30px}
.cp-stats .sl-buy{justify-content:flex-end}
.cp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:10px}
.alpha-panel .cp-actions .cta{width:100%;margin:0}
.alpha-panel .cp-actions .cta.alt{background:#ff8f2e;border-color:#ff8f2e;color:#1d1206}
.alpha-panel .cp-actions .cta.alt:hover:not(:disabled){background:#ffa755;box-shadow:0 10px 28px #ff8f2e44}

/* ---- pre-match: the stage split in two + the two players' numbers side by side -------------------------------------------------------- */
body[data-screen=PREMATCH] .alpha-panel{inset:78px 1.4vw 12px;padding:0;overflow:auto}
body[data-screen=PREMATCH] .alpha-panel .menu{display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,1.3vh,14px);height:100%;min-height:540px;padding:clamp(12px,1.1vw,22px) clamp(14px,1.3vw,26px);box-sizing:border-box;border-radius:20px}
body[data-screen=PREMATCH] .scr-head{margin:0}
.pm2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,1fr);gap:clamp(10px,1vw,20px);min-height:0}
.pm2-stage{position:relative;min-height:0;height:100%;border-radius:17px;overflow:hidden;border:1px solid var(--line);background:#0a1212}
.pm2-half{position:absolute;top:0;bottom:0;width:50%;border-radius:0!important}
.pm2-half.l{left:0}.pm2-half.r{right:0;border-left:2px solid #00000080}
.pm2-stage canvas{position:absolute;inset:0;z-index:1;display:block;width:100%!important;height:100%!important}
.pm2-stage .rot-hint{z-index:3}
.alpha-panel .pm2-info{display:flex;flex-direction:column;gap:10px;min-height:0;height:100%;box-sizing:border-box;overflow:auto;padding:clamp(12px,1.1vw,22px);border-radius:17px}
.pm2-info>*{flex-shrink:0}
.cmp-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);align-items:center;gap:clamp(6px,.7vw,12px);padding-bottom:10px;border-bottom:1px solid var(--line)}
.cmp-p{min-width:0;display:flex;flex-direction:column;gap:5px}.cmp-p.l{align-items:flex-start}.cmp-p.r{align-items:flex-end;text-align:right}
.cmp-p small{font:900 9px/1 Arial,sans-serif;letter-spacing:.18em;color:#b9ccbd}
.cmp-p h3{margin:0;font-size:clamp(15px,1.25vw,24px);line-height:1.05;overflow-wrap:anywhere}
.cmp-p.r .hand-chip{flex-direction:row-reverse;padding:4px 5px 4px 10px}
.cmp-vs{font:italic 900 clamp(14px,1.1vw,20px)/1 var(--fam);color:#a9c0af}
.cmp .ovr.up{outline:2px solid var(--lime);outline-offset:3px}
.pm2-info .cmp{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.cmp-rows{flex:1 1 auto;display:grid;align-content:space-evenly;gap:clamp(2px,.6vh,7px);margin-top:4px;max-height:clamp(230px,46vh,560px)}
.cmp-row{display:grid;grid-template-columns:clamp(34px,2.6vw,52px) minmax(30px,1fr) minmax(80px,auto) minmax(30px,1fr) clamp(34px,2.6vw,52px);align-items:center;gap:8px;min-height:26px}
.cmp-row b{font:900 clamp(15px,1.15vw,24px)/1 var(--fam);color:#e9f2e2;text-align:center}.cmp-row b.up{color:var(--lime)}
.cmp-name{text-align:center;font-size:clamp(11px,.72vw,14px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d3e2d6}
.cmp-bar{display:flex;height:clamp(9px,1vh,13px);border-radius:6px;background:#ffffff14;overflow:hidden}.cmp-bar.l{justify-content:flex-end}
@media(min-width:1500px) and (min-height:900px){.cmp .ovr.big{min-width:96px;padding:11px 14px 8px}.cmp .ovr.big b{font-size:56px}.cmp .ovr.big small{font-size:10px}.cmp-p h3{font-size:clamp(20px,1.5vw,30px)}}
.cmp-bar i{display:block;height:100%;border-radius:6px}
.cmp-bar.l i{background:linear-gradient(270deg,#e2ff86,#94c43c)}.cmp-bar.r i{background:linear-gradient(90deg,#ffbf7a,#e8743f)}
.pm2-info .reward{margin:0}.pm2-info .cta{margin-top:0}

@media(max-height:760px){.cmp-row{min-height:21px}.ovr.big b{font-size:36px}.ovr.big{min-width:68px;padding:7px 10px 6px}.pm2-info{gap:7px}.pm2-info .reward small{display:none}.cp-stats .sline{min-height:25px}}
@media(max-width:1100px){.pm2,.cp-body{grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}.cmp-row{grid-template-columns:30px minmax(20px,1fr) minmax(64px,auto) minmax(20px,1fr) 30px;gap:5px}.cmp-name{font-size:9.5px}}
@media(max-width:860px){.pm2,.cp-body{grid-template-columns:1fr;grid-template-rows:minmax(320px,50vh) auto}body[data-screen=PREMATCH] .alpha-panel .menu,body[data-screen=CAREER_PLAYER] .alpha-panel .menu{height:auto}}