/* The pitch and its formation share a coordinate system. The reserve occupies
   its own document row and never participates in the pitch's height calculation. */
.home-grid{--squad-pitch-height:max(520px,calc(100svh - 68px));--squad-scene-height:max(100svh,calc(var(--squad-pitch-height) + 20px));--squad-scene-width:100%}
/* Fix the scene to the pitch coordinates, not the expandable reserve's height.
   Show both penalty areas; cover would crop the near box on wide screens. */
.home .lineup-panel{
 position:relative;isolation:isolate;background:none;
}
.home .lineup-panel::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background-color:#0e2915;
 background-image:linear-gradient(180deg,#020a1633,transparent 28%,#020a161a 88%,#0e2915),var(--squad-stadium-image,url('assets/stadium-original-plus-v6.png'));
 background-position:center top;
 background-repeat:no-repeat;
 background-size:100% var(--squad-scene-height),var(--squad-scene-width) var(--squad-scene-height);
 box-shadow:inset 0 0 60px #02081126;
}
/* Shade green turf only; the original raster, white lines and stadium stay intact. */
html:not([data-stadium]) .home .lineup-panel::before,
html[data-stadium="original-plus"] .home .lineup-panel::before{filter:url(#squad-grass-shade)}
.home .lineup-panel .pitch{background:none;box-shadow:none}
.home .lineup-panel .pitch::before{background:none}
.home .reserve-bench{
 position:relative;inset:auto;isolation:isolate;
 background:linear-gradient(120deg,#101c25,#0a141c 65%);
 border-color:#8caec12e;border-radius:12px;
 box-shadow:0 12px 32px #0005,inset 0 1px 0 #dfedff08;
}
.home .reserve-bench::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#8eb6d47a,transparent);pointer-events:none}
/* The same display/body hierarchy as the navigation and section headings. */
.home .reserve-heading{min-height:56px;gap:12px;font-family:var(--font-ui)}
.home .reserve-heading h3{margin:0;font:700 22px/1 var(--font-display);letter-spacing:.055em;text-transform:uppercase;color:#f1f5fa}
.home .reserve-heading>span{font:500 11px/1.4 var(--font-ui);letter-spacing:.015em;font-variant-numeric:tabular-nums;white-space:nowrap;color:#a0b2bf}
.home .reserve-heading #reserve-hint{font:400 12px/1.4 var(--font-ui);letter-spacing:0;color:#a0b2bf}
.home .reserve-heading .reserve-toggle{color:#b4c9d9}
.home .reserve-heading .reserve-toggle:hover{background:#b4d7f212}
.home .reserve-navigation button{display:grid;place-items:center;width:30px;height:30px;padding:0;border-color:#8caec12e;color:#c3d4e1}
.home .reserve-navigation button svg{display:block;width:16px;height:16px;flex-shrink:0}
.home .reserve-navigation button:disabled{opacity:.35}
@media(max-width:680px){.home .reserve-heading h3{font-size:20px}.home .reserve-heading{gap:10px}}
.home .reserve-bench .reserve-list{scroll-padding-inline:4px;padding:7px 4px 18px}
.home .reserve-bench.drop-ok{border-color:#91b95e;background:#15261b}
.home .reserve-bench.drop-hover{border-color:#c8f25a;background:#20341f}

@media(min-width:901px){
 .home-grid{height:auto;min-height:100svh;background:none}
 .home .lineup-panel{position:relative;inset:auto;border-radius:0;min-height:100svh}
 /* Paint through the header offset without shifting the formation. */
 .home .lineup-panel::before{inset-block-start:-20px}
 .home .lineup-panel .elf-stage{height:var(--squad-pitch-height);min-height:0}
 .home .lineup-panel .pitch{height:100%;border:0;border-radius:0}
 /* Add 6px per gap: strikers stay fixed; goalkeeper moves down 18px. */
 .home .lineup-panel .formation-row[data-line],
 html[data-cards=c1] .home .lineup-panel .formation-row[data-line]{
  --shield-width:min(170px,16.8cqh,10.5cqw);
  --squad-column:clamp(128px,14.6cqw,232px);
  position:absolute;left:50%;bottom:auto;top:calc(16.8% + var(--squad-row) * (19.5% + 6px));
  width:min(var(--squad-row-width),calc(var(--line-count) * var(--squad-column)));
  min-height:0;margin:0;gap:0;flex-wrap:nowrap;align-items:flex-start;justify-content:space-around;
  transform:translateX(-50%);
 }
 .home .lineup-panel .formation-row[data-line=TW]{--squad-row:3;--squad-row-width:30%}
 .home .lineup-panel .formation-row[data-line=ABW]{--squad-row:2;--squad-row-width:74%}
 .home .lineup-panel .formation-row[data-line=MF]{--squad-row:1;--squad-row-width:62%}
 .home .lineup-panel .formation-row[data-line=ST]{--squad-row:0;--squad-row-width:56%}
 .home .reserve-bench{margin:0 24px 16px;padding:0 18px}
 .home .lineup-panel .lineup-list{height:100%;padding-bottom:28px}
 .home-grid>.news-handle{top:calc(var(--squad-pitch-height) / 2)}
 .news-drawer-open .home-grid>.news-handle{top:50svh}
}

/* Keep the same four lines on tablets while the shared background crops to fit. */
@media(min-width:681px) and (max-width:900px){
 .home-grid{--squad-pitch-height:660px;--squad-scene-height:var(--squad-pitch-height);--squad-scene-width:140%}
 .home .lineup-panel .elf-stage{height:var(--squad-pitch-height)}
 .home .lineup-panel .pitch{height:100%}
 .home .lineup-panel .formation-row[data-line],
 html[data-cards=c1] .home .lineup-panel .formation-row[data-line]{
  --shield-width:112px;position:absolute;left:50%;top:calc(17% + var(--squad-row) * 19.5%);bottom:auto;
  width:88%;margin:0;gap:0;flex-wrap:nowrap;justify-content:space-around;align-items:flex-start;transform:translateX(-50%);
 }
 .home .lineup-panel .formation-row[data-line=TW]{--squad-row:3}
 .home .lineup-panel .formation-row[data-line=ABW]{--squad-row:2}
 .home .lineup-panel .formation-row[data-line=MF]{--squad-row:1}
 .home .lineup-panel .formation-row[data-line=ST]{--squad-row:0}
 .home .lineup-panel .formation-row:is([data-count="1"],[data-count="2"]),html[data-cards=c1] .home .lineup-panel .formation-row:is([data-count="1"],[data-count="2"]){width:44%}
 .home .reserve-bench{margin:12px 0 16px}
}

/* Narrow screens retain readable cards. A dense five/six-player line gets its
   own second row instead of overlapping the neighbours or reserve. */
@media(max-width:680px){
 .home-grid{--squad-pitch-height:580px;--squad-scene-height:var(--squad-pitch-height);--squad-scene-width:200%}
 .home-grid:has(.pitch .formation-row:is([data-count="5"],[data-count="6"])){--squad-pitch-height:680px}
 .home .lineup-panel .pitch:has(.formation-row:is([data-count="5"],[data-count="6"])){height:var(--squad-pitch-height);min-height:0}
 .home .lineup-panel .elf-stage{height:auto}
 .home .lineup-panel .pitch{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:12px;height:var(--squad-pitch-height);padding:calc(var(--squad-pitch-height) * .17) 8px calc(var(--squad-pitch-height) * .065);overflow:hidden}
 .home .lineup-panel .formation-row[data-line],
 html[data-cards=c1] .home .lineup-panel .formation-row[data-line]{
  --shield-width:min(91px,calc((100vw - 58px) / 4));position:relative;inset:auto;transform:none;width:100%;margin:0;
  display:flex;flex-wrap:nowrap;justify-content:space-evenly;align-items:center;gap:2px;
 }
 html[data-cards=c1] .home .lineup-panel .formation-row[data-count="4"] .shield-card{width:var(--shield-width)}
 html[data-cards=c1] .home .lineup-panel .formation-row:is([data-count="5"],[data-count="6"]){flex-wrap:wrap;width:min(100%,310px);column-gap:8px;row-gap:8px;justify-content:center}
 html[data-cards=c1] .home .lineup-panel .formation-row:is([data-count="5"],[data-count="6"]) .shield-card{width:var(--shield-width);max-width:none}
 .home .lineup-panel .formation-row[data-count="2"],html[data-cards=c1] .home .lineup-panel .formation-row[data-count="2"]{width:64%}
 .home .reserve-bench{margin:12px 0 16px;padding-inline:12px}
 .home .reserve-bench .reserve-list{padding-bottom:14px}
}
.home .lineup-panel .pitch[hidden]{display:none}