/* A small touchline bench, using the same live metallic cards as the squad. */
html body .home .reserve-bench{
 --bench-card:236px;--bench-width:500px;
 position:relative;inset:auto;z-index:10;isolation:isolate;
 display:flex;flex-direction:column-reverse;gap:8px;
 width:min(var(--bench-width),calc(100% - 48px));max-width:100%;
 margin:12px 24px 22px;padding:0;border:0;border-radius:0;
 background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
html body .home .reserve-bench::before{
 content:none;display:none;
}
html body .home .reserve-bench.is-collapsed{width:216px}
html body .home .reserve-bench.is-collapsed::before{display:none}
html body .home .lineup-panel .pitch-lineup-summary{
 background:#080f13e8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html body .home .reserve-bench .reserve-heading{
 position:relative;display:flex;align-items:center;gap:9px;
 height:48px;min-height:48px;margin:0;padding:0 12px;
 border:1px solid #c4d6dc26;border-radius:9px;background:#080f13e8;
 box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html body .home .reserve-bench .reserve-heading h3{
 gap:0;margin:0;color:#f4f7f5;font:italic 750 22px/1 var(--font-display,'Barlow Condensed',sans-serif);
 text-transform:uppercase;letter-spacing:.035em;pointer-events:none;
 /* The condensed capitals sit lower inside their line box than the count. */
 transform:translateY(-.09em);
}
html body .home .reserve-bench .reserve-heading h3::before{display:none}
html body .home .reserve-bench .reserve-heading>span{
 padding:0 0 0 9px;border-left:1px solid #a5b8c02b;
 color:#9facb2;font:500 11px/1 Inter,Arial,sans-serif;white-space:nowrap;pointer-events:none;
}
html body .home .reserve-bench .reserve-toggle{
 position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;
 width:100%;height:100%;margin:0;padding:0 13px;border:0;border-radius:8px;
 color:#afbec5;background:none;transform:none;cursor:pointer;
}
html body .home .reserve-bench.has-overflow:not(.is-collapsed) .reserve-toggle{width:calc(100% - 84px);padding-right:12px}
html body .home .reserve-bench .reserve-toggle svg{width:17px;height:17px;transform:rotate(180deg);transition:transform .18s ease}
html body .home .reserve-bench.is-collapsed .reserve-toggle svg{transform:none}
html body .home .reserve-bench .reserve-toggle:hover{background:#ffffff06;color:#cdff5f}
html body .home .reserve-bench .reserve-toggle:focus-visible{outline:2px solid #cdff5f;outline-offset:3px}
html body .home .reserve-bench #reserve-hint{
 position:absolute;left:8px;bottom:calc(100% + var(--bench-card) / 2 + 20px);
 display:block;max-width:calc(var(--bench-width) - 16px);margin:0;padding:4px 7px;
 border-radius:4px;background:#06100ca6;color:#c5d1d0;
 font:400 10px/1.35 Inter,Arial,sans-serif;text-align:left;white-space:normal;
 pointer-events:none;text-shadow:0 1px 3px #000;
}
html body .home .reserve-bench .reserve-navigation{position:relative;z-index:2;margin-left:auto;gap:6px}
html body .home .reserve-bench.has-overflow .reserve-navigation{display:flex;margin-left:auto}
html body .home .reserve-bench .reserve-navigation button{
 width:29px;height:29px;border:1px solid #b6c9d12b;border-radius:6px;background:#ffffff06;color:#d6e2e5;
}
html body .home .reserve-bench .reserve-navigation button:hover:not(:disabled){border-color:#cdff5f80;color:#cdff5f;background:#cdff5f0d}
html body .home .reserve-bench .reserve-navigation button:focus-visible{outline:2px solid #cdff5f;outline-offset:2px}
html body .home .reserve-bench .reserve-list{
 display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:var(--bench-card);
 justify-content:start;gap:12px;min-height:0;margin:0;padding:6px 8px 2px;
 overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:8px;
 overscroll-behavior-x:contain;scrollbar-width:none;
}
html body .home .reserve-bench .reserve-list>.reserve-player-card,
html body .home .reserve-bench .reserve-list>.reserve-player-card:first-child{
 width:var(--bench-card);max-width:var(--bench-card);height:calc(var(--bench-card) / 2);min-height:calc(var(--bench-card) / 2);
 scroll-snap-align:start;scroll-snap-stop:always;
}
html body .home .reserve-bench.is-collapsed :is(.reserve-list,.reserve-navigation,#reserve-hint){display:none}
html body .home .reserve-bench.drop-ok{background:none;border:0;box-shadow:none}
html body .home .reserve-bench.drop-ok .reserve-heading{border-color:#cdff5f88;box-shadow:0 0 0 1px #cdff5f26;background:#122018f2}
html body .home .reserve-bench.drop-hover{background:none;border:0;box-shadow:none}
html body .home .reserve-bench.drop-hover .reserve-heading{border-color:#cdff5f;box-shadow:0 0 24px #cdff5f26}
html body .home .reserve-bench.drop-hover::after{display:none}
html body .home .reserve-bench .reserve-list:has(.reserve-empty){grid-auto-columns:100%}
html body .home .reserve-bench .reserve-empty{width:100%;padding:18px 12px;color:#c4d0d1;background:#071014d9;border:1px dashed #a7c4d14d;border-radius:10px;font-size:12px}
html body .home .reserve-bench .reserve-empty strong,html body .home .reserve-bench .reserve-empty span{display:block}
html body .home .reserve-bench .reserve-empty span{margin-top:7px;font-size:11px;color:#91a7af;line-height:1.5}
@media(min-width:901px) and (min-height:680px){
 html body .home .lineup-panel{--pitch-controls-bottom:44px}
 html body .home .reserve-bench{position:absolute;left:24px;right:auto;bottom:var(--pitch-controls-bottom);width:var(--bench-width);margin:0}
 html body .home .reserve-bench.is-collapsed{width:216px}
 /* The pitch is shorter than its panel. Place its badge on the reserve's
    bottom row and allow that badge to extend beyond the formation area. */
 html body .home .lineup-panel .pitch{overflow:visible}
 html body .home .lineup-panel .pitch-lineup-summary{
  left:auto;right:24px;top:auto;
  bottom:calc(var(--pitch-controls-bottom) + var(--squad-pitch-height) - 100svh);
  height:48px;min-height:48px;
 }
}
@media(min-width:901px) and (max-width:1199px) and (min-height:680px){
 html body .home .reserve-bench{--bench-width:300px}
}
@media(max-width:900px){
 html body .home .reserve-bench{--bench-card:244px;--bench-width:520px;width:min(100%,var(--bench-width));margin:20px 0 14px}
 html body .home .reserve-bench::before{inset-inline:-10px}
 html body .home .reserve-bench.is-collapsed{width:216px}
 html body .home .reserve-bench .reserve-list{scroll-snap-type:x proximity}
 html body .home .reserve-bench #reserve-hint{display:none}
}
@media(prefers-reduced-motion:reduce){html body .home .reserve-bench .reserve-toggle svg{transition:none}}