/* Site-specific additions to gwb.css. Keep the design system file untouched so it can be updated from design-mockup/. */

/* Planned pages: visible in the menu, not clickable yet (pointer-events off also disables the hover marker). */
.rail .nl.soon{pointer-events:none;color:rgba(255,255,255,.45)}
.rail .nl.soon.sub small{color:rgba(255,255,255,.35)}

/* Plain content pages (no tabs): constrain prose, keep tables full width. */
.prose p{max-width:64ch}
.prose p+p{margin-top:12px}

/* Three-figure KPI ledger (gwb.css assumes six). */
.kpi.k3{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.kpi.k3{grid-template-columns:1fr}.kpi.k3>div,.kpi.k3>div:nth-child(even){border-left:0}.kpi.k3>div:nth-child(n+2){border-top:1px solid var(--line)}}

/* Season detail page */
tr[hidden]{display:none}
td.nm a{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
.mkb.t{background:var(--ink-3)}
.split i.t{background:var(--ink-3)}
.strip .c.t .sb{background:var(--ink-3)}
/* Playoff share of goals/assists: lighter shade of the same colour (.gp / .ap next to .g / .a). */
:root{--green-l:#4DB37A;--blue-l:#5DAEE0}
.stack .gp{background:var(--green-l)}.stack .ap{background:var(--blue-l)}
.stack.o{filter:saturate(0) brightness(1.5) contrast(.8)}
.stack.o i{background:var(--loss-m)}
/* Pager and year bar are links here (gwb.css styles buttons). */
.pager .pn a,.pager .pn .off{padding:9px 14px;font-weight:600;font-size:14px;transition:background-color 120ms ease,color 120ms ease,transform 140ms var(--ease-out)}
.pager .pn a+a,.pager .pn .off+a,.pager .pn a+.off{border-left:1px solid var(--ink)}
.pager .pn a:active{transform:scale(.97)}
.pager .pn .off{color:var(--line)}
@media (hover:hover) and (pointer:fine){.pager .pn a:hover{background:var(--ink);color:#fff}}
.years a{font:600 13px/1 var(--disp);letter-spacing:.04em;padding:6px 8px;color:var(--ink-3);border-bottom:2px solid transparent;flex:none;transition:color 120ms ease,border-color 120ms ease}
.years a.cur{color:var(--green);border-color:var(--green)}
@media (hover:hover) and (pointer:fine){.years a:not(.cur):hover{color:var(--ink);border-color:var(--ink)}}
/* Variable column counts (gwb.css assumes three rounds/steps); --n is set inline. */
.bracket.rn{grid-template-columns:repeat(var(--n),minmax(200px,1fr))}
.path.pn{grid-template-columns:repeat(var(--n),1fr)}
/* Rounds that do not halve (byes, qualification rounds): no connector lines. */
.bracket.loose{min-height:0}
.bracket.loose .slot{flex:none;margin-bottom:12px}
.bracket.loose .slot::before,.bracket.loose .slot::after{display:none}
@media (max-width:900px){.bracket.rn{grid-template-columns:repeat(var(--n),240px)}}
@media (max-width:560px){.path.pn{grid-template-columns:1fr}}
/* Keep the hero height when a season has no honors. */
.hero .honors{min-height:31px}

/* Sold-out home game: filled blue tag next to the attendance figure. */
td.zb-c .tag.so{background:var(--blue);color:#fff;margin-left:8px;white-space:nowrap}

/* Player list: labelled selects next to the chips. */
label.sel{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
label.sel select{font:500 14px/1 var(--text);letter-spacing:0;text-transform:none;color:var(--ink);padding:8px 10px;border:1px solid var(--ink);border-radius:0;background:var(--white);max-width:200px;transition:border-color 120ms ease,box-shadow 160ms ease}
label.sel select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}
@media (max-width:560px){label.sel{width:100%;justify-content:space-between}.chips{flex-wrap:wrap}}

/* Client-side pagination under the player list. */
.pg{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-top:16px}
.pg[hidden]{display:none}
.pg button{min-width:38px;padding:9px 12px;font:600 14px/1 var(--text);border:1px solid var(--ink);margin-left:-1px;background:var(--white);transition:background-color 120ms ease,color 120ms ease,transform 140ms var(--ease-out)}
.pg button:active:not(:disabled){transform:scale(.97)}
.pg button[aria-current=page]{background:var(--ink);color:#fff}
.pg button:disabled{color:var(--line);cursor:default}
.pg .gap{padding:0 8px;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.pg button:not(:disabled):not([aria-current=page]):hover{background:var(--green-t)}}
@media (max-width:560px){.pg{justify-content:center}}

/* Player profile: previous/next links in the breadcrumb row are anchors, the design system styled buttons. */
.phero .tp a{color:var(--ink-3);transition:color 120ms ease}
@media (hover:hover) and (pointer:fine){.phero .tp a:hover{color:var(--green)}}
td.nm a:hover{color:var(--blue)}

/* Player profile "Bei den Steelers": one block per season (total row), phases as indented rows below. */
.pt tbody.ps tr.sr td{border-top:2px solid var(--ink);font-weight:700;background:var(--white)}
.pt tbody.ps:first-of-type tr.sr td{border-top:0}
.pt tr.sr td.sn a{font:700 22px/1 var(--disp);letter-spacing:.04em;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color 120ms ease}
.pt td.sn small,.pt td.phn small{display:block;font:500 11px/1.2 var(--text);letter-spacing:.06em;color:var(--ink-3);margin-top:4px}
.pt td.phn{font-weight:500}
.pt tr.sr td.phn{font-weight:700}
.pt td.dim,.pt .dim{color:var(--ink-3);font-weight:500}
.pt tr.pr td{font-size:14px;color:var(--ink-2);background:var(--paper);border-bottom:1px solid var(--line-2)}
.pt tr.pr td.phn{padding-left:28px;position:relative;color:var(--ink)}
.pt tr.pr .br{position:absolute;left:14px;top:0;bottom:50%;width:8px;border-left:2px solid var(--line);border-bottom:2px solid var(--line)}
.pt tr.pr:not(:last-child) .br{bottom:0;border-bottom:0}
.pt tr.pr:not(:last-child) .br::after{content:"";position:absolute;left:-2px;top:50%;width:8px;border-top:2px solid var(--line)}
.pt tr.pr .pbar .track{height:6px}
@media (hover:hover) and (pointer:fine){.pt tr.sr td.sn a:hover{color:var(--blue)}.pt tr.pr:hover td{background:var(--green-t)}}

/* Player profile "Karriere": the Elite Prospects widget only takes colours, so shape and type are forced to the design system from outside. */
.epw{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--green);overflow-x:clip;padding:12px 14px 6px;min-height:120px}
.epw .ep-widget > *{max-width:none !important}
.epw,.epw *{font-family:var(--text) !important;border-radius:0 !important;font-variant-numeric:tabular-nums}
.epw .ep-widget,.epw [class*="ep-widget"]{box-shadow:none !important;border-color:var(--line) !important}
/* Name, flag and current team above the table repeat the page hero: hide the block right before the table wrapper. */
.epw .ep-widget > div > div:has(+ .mt-2){display:none}
/* Team logos are noise next to the own tables. */
.epw table td span:has(> img){display:none !important}
/* The widget's table looks like table.t / the "Bei den Steelers" table: hairlines instead of zebra and a green header, numbers right-aligned. */
.epw table{border-collapse:collapse}
.epw thead,.epw thead tr{background:transparent !important}
.epw th{font:600 11px/1 var(--text) !important;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3) !important;background:var(--white) !important;padding:14px 8px 10px !important;border-bottom:2px solid var(--ink);text-align:left}
.epw td{padding:10px 8px !important;border-bottom:1px solid var(--line-2);font-size:15px !important;color:var(--ink) !important;background:transparent !important}
.epw tbody tr{background:var(--white) !important;height:auto !important;transition:background-color 100ms ease}
.epw tbody tr:last-child td{border-bottom:0}
.epw th:nth-child(n+4),.epw td:nth-child(n+4){text-align:right !important}
.epw td:first-child{font:700 20px/1 var(--disp) !important;letter-spacing:.04em}
.epw td a{color:var(--ink) !important;font-weight:500}
@media (hover:hover) and (pointer:fine){.epw tbody tr:hover{background:#F0F6F2 !important}.epw td a:hover{color:var(--blue) !important}}

/* Player hero: outbound profile link at the end of the honors row (same height as .honor). Elite Prospects blue for frame and text, their red only as a small accent ("Elite" and the arrow); a hairline separates it from the honors. */
.honors .sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.honors a.ext{--ep-blue:#043950;--ep-red:#bf272d;font:600 14px/1 var(--disp);letter-spacing:.08em;text-transform:lowercase;padding:7px 10px 6px;border:1.5px solid var(--ep-blue);color:var(--ep-blue);display:inline-flex;gap:6px;align-items:center;transition:background-color 120ms ease,color 120ms ease}
.honors a.ext b,.honors a.ext .ar{font-weight:inherit;color:var(--ep-red);transition:color 120ms ease}
@media (hover:hover) and (pointer:fine){.honors a.ext:hover{background:var(--ep-blue);color:#fff}.honors a.ext:hover b,.honors a.ext:hover .ar{color:#fff}}

/* Photo header for list/overview pages (templates/_layout/_image_hero.html.twig): photo behind the whole header, white fade over the top where crumb and kicker sit. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero.img{position:relative;display:block;min-height:260px;padding:0;background:var(--ink);overflow:hidden;isolation:isolate}
/* Photo on its own layer so it can drift: slow ambient zoom/pan (transform only, compositor), reversing so it never jumps. */
.hero.img::after{content:"";position:absolute;inset:0 -6%;z-index:-2;background:var(--hero-img) center center/cover no-repeat;animation:hero-drift 24s linear infinite alternate;will-change:transform}
@keyframes hero-drift{from{transform:translate3d(-5%,0,0)}to{transform:translate3d(5%,0,0)}}
@media (prefers-reduced-motion:reduce){.hero.img::after{animation:none}}
.hero.img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,.92) 22%,rgba(255,255,255,0) 70%)}
.hero.img .top{padding:26px 40px 0;display:flex;flex-direction:column;gap:12px}
.hero.img .crumb{color:var(--ink-2,var(--ink-3))}
.hero.img .kicker{color:var(--ink-3)}
.hero.img .credit{position:absolute;right:12px;bottom:8px;font-size:11px;line-height:1;color:rgba(255,255,255,.8);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero.img .credit a:hover{color:#fff;text-decoration:underline}
@media (max-width:900px){.hero.img{min-height:200px}.hero.img .top{padding:18px 18px 0}}

/* ---------- Game detail page (templates/game/show.html.twig) ---------- */
/* Hero: scoreboard. Team names flank the score, the own club in green; the winner's digit is dark, the loser's grey (own club: green on a win). */
.hero.gh{display:block;position:relative;padding-bottom:18px}
.gh .crumb{margin-bottom:14px}
.gh .pager{position:absolute;right:40px;top:26px;padding:0}
.gh-board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0 clamp(14px,2.4vw,36px);margin-top:16px}
.gh-team{min-width:0;padding-bottom:6px;animation:rise 300ms var(--ease-out) both}
.gh-team.home{text-align:right}
.gh-team .k{font:600 11px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.gh-team .n{display:block;margin-top:8px;font:700 clamp(26px,3.4vw,50px)/.95 var(--disp);letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere}
.gh-team.own .n{color:var(--green)}
.gh .score{margin:0;justify-content:center}
.gh .score .d{display:inline-block;animation:rollup 420ms var(--ease-out) both}
.gh .score .sl+.d{animation-delay:110ms}
.gh .score .d.lose{color:var(--loss-m)}
.gh .score .d.win.own{color:var(--green)}
.gh .score small{margin-left:14px}
.gh-verdict{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--ink-2);min-height:22px}
.gh-verdict b{color:var(--ink)}
.gh .facts{margin-top:22px}
.gh .facts .v.sm{font-size:24px;line-height:1.1;text-wrap:balance;margin-top:12px}
.gh .facts>div{animation:rise 300ms var(--ease-out) both}
.gh .facts>div:nth-child(2){animation-delay:40ms}.gh .facts>div:nth-child(3){animation-delay:80ms}.gh .facts>div:nth-child(4){animation-delay:120ms}
@media (max-width:900px){.gh .pager{position:static;align-items:flex-start;margin:14px 0 0}}
@media (max-width:700px){
    .gh-board{grid-template-columns:1fr 1fr;grid-template-areas:"sc sc" "h a";gap:6px 16px}
    .gh-board .score{grid-area:sc;justify-content:flex-start}
    .gh-team.home{grid-area:h;text-align:left}.gh-team.away{grid-area:a;text-align:right}
    .gh .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
    .gh .facts>div:nth-child(odd){padding-left:0;border-left:0}
    .gh .facts>div:nth-child(n+3){border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
}

/* Stacked grid columns (1fr = minmax(auto, 1fr)) must not grow with a wide table inside. */
.grid2>*,.grid2e>*{min-width:0}

/* Sections rise in once, staggered (functional: content is never hidden for longer than ~0.5 s). */
.gs{animation:rise 340ms var(--ease-out) both;animation-delay:calc(var(--s,0)*70ms)}

/* Time axis: home lane above, away lane below, goals as chips on stems, penalties as bars next to the axis. */
.tlw{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--green)}
.tl{--gut:140px;position:relative;min-width:700px;padding:18px 22px 12px 0}
.tl .lane,.tl .axis,.tl .scale{display:grid;grid-template-columns:var(--gut) 1fr;position:relative;z-index:1}
.tl .trk{position:relative}
.tl .lab{padding-left:18px;align-self:center;font:600 11px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);overflow-wrap:anywhere;padding-right:8px}
.tl .lane.own .lab{color:var(--green)}
.tl .lane{height:calc(var(--pr)*14px + var(--gl)*34px + 14px);min-height:34px}
.tl .axis .trk{height:0;border-top:2px solid var(--ink)}
.tl .grid{position:absolute;z-index:0;inset:18px 22px 12px var(--gut)}
.tl .grid .trk{height:100%}
.tl .grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2)}
.tl .scale{margin-top:6px}
.tl .scale .trk{height:96px}
.tl .scale .tk{position:absolute;top:0;transform:translateX(-50%);font:700 15px/1 var(--disp);letter-spacing:.04em}
.tl .scale .tk.first{transform:none}.tl .scale .tk.last{transform:translateX(-100%)}
/* Period score under the axis: name, goals, shots. */
.tl .scale .pd{position:absolute;top:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;white-space:nowrap;animation:rise 300ms var(--ease-out) 250ms both}
.tl .scale .pd em{font:600 10.5px/1 var(--text);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tl .scale .pd .r{font:700 28px/1 var(--disp);letter-spacing:.02em}
.tl .scale .pd small{font-size:11.5px;line-height:1;color:var(--ink-3)}
/* penalties */
.tl .pb{position:absolute;height:12px;font:600 10.5px/12px var(--text);color:#fff;text-align:center;overflow:hidden;background:var(--loss-m);transform-origin:left;animation:grow 360ms var(--ease-out) both;animation-delay:calc(160ms + var(--i,0)*30ms)}
.tl .lane.own .pb{background:var(--ink-2)}
.tl .lane.home .pb{bottom:calc(var(--r)*14px)}
.tl .lane.away .pb{top:calc(var(--r)*14px)}
/* goals */
.tl .mk{--off:calc(var(--pr)*14px + 8px + var(--lv)*34px);position:absolute;z-index:2;transform:translateX(-50%);min-width:36px;height:26px;padding:0 6px;text-align:center;font:700 16px/23px var(--disp);letter-spacing:.03em;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);transition:box-shadow 140ms var(--ease-out),transform 140ms var(--ease-out);animation:mkin 300ms var(--ease-out) backwards;animation-delay:calc(200ms + var(--i,0)*50ms)}
.tl .lane.own .mk{background:var(--green);border-color:var(--green);color:#fff}
.tl .lane.home .mk{bottom:var(--off)}
.tl .lane.away .mk{top:var(--off)}
.tl .mk::after{content:"";position:absolute;left:calc(50% - .75px);width:1.5px;height:calc(8px + var(--lv)*34px + 2px);background:var(--ink)}
.tl .lane.own .mk::after{background:var(--green)}
.tl .lane.home .mk::after{top:100%}
.tl .lane.away .mk::after{bottom:100%}
.tl .mk:active{transform:translateX(-50%) scale(.96)}
@media (hover:hover) and (pointer:fine){.tl .mk:hover{box-shadow:3px 3px 0 var(--ink);transform:translateX(-50%) translateY(-2px)}.tl .lane.away .mk:hover{transform:translateX(-50%) translateY(2px)}}
@keyframes mkin{from{opacity:0;transform:translateX(-50%) translateY(6px) scale(.92)}}
.lg .lg-mk{display:inline-block;width:18px;height:12px;border:1.5px solid var(--ink);background:var(--white)}
.lg .lg-mk.own{background:var(--green);border-color:var(--green)}
/* The goal row a timeline chip jumps to is highlighted. */
.ev tr{scroll-margin-top:120px}
.ev tr:target td{background:var(--blue-t)}
.ev tr:target td:first-child{box-shadow:inset 4px 0 0 var(--blue)}

/* Goals and penalties in one list; the kind tag tells them apart. */
.ev .tag.k-goal{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default}
.ev .tag.k-goal.own{background:var(--green);border-color:var(--green)}
.ev .tag.k-pen{border-color:var(--loss-m);color:var(--ink-3);cursor:default}
.ev td.as .tag{margin-left:6px}
.ev tr.mon td span{font:600 15px/1 var(--disp);letter-spacing:.04em;color:var(--ink)}
.ev td.tm{font:700 17px/1 var(--disp);letter-spacing:.03em;color:var(--ink-2);width:1%}
.ev td.stand{font:700 20px/1 var(--disp);letter-spacing:.02em;width:1%}
.ev td.stand span{color:var(--ink-3);font-weight:500}
.ev td.stand span.b{color:var(--ink);font-weight:700}
.ev tr.goal td{background:var(--white);font-weight:600}
.ev tr[data-type=penalty] td{background:var(--paper)}
.ev tr.goal td.stand span.b{color:var(--green)}
.ev tr.goal:target td{background:var(--blue-t)}
.ev td.as{font-size:13.5px;white-space:normal;min-width:150px}
.ev td.pm{font:700 17px/1 var(--disp)}
.ev td.empty{padding:14px 12px}
.ev .tag{cursor:help}

/* Team comparison: values at the edges, label and split bar between them */
.vs{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--green);padding:14px 20px 8px}
.vs-h{display:flex;justify-content:space-between;font:600 11px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.vs-h i{display:inline-block;width:10px;height:10px;margin-right:7px;background:var(--blue)}
.vs-h .own i,.vs-h .h i{background:var(--green)}
.vs-r{display:grid;grid-template-columns:78px 1fr 78px;grid-template-areas:"h l a" "h b a";align-items:center;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line-2);animation:rise 300ms var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms + 200ms)}
.vs-r:last-child{border-bottom:0}
.vs-r .v{font:700 clamp(26px,3vw,36px)/1 var(--disp);letter-spacing:-.005em}
.vs-r .v.h{grid-area:h}.vs-r .v.a{grid-area:a;text-align:right}
.vs-r .lab{grid-area:l;text-align:center;font:600 11px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.vs-r .bar2{grid-area:b;display:flex;gap:3px;height:10px;background:var(--line-2)}
.vs-r .bar2:not(:has(i)){background:transparent}
.vs-r .bar2 i{display:block;min-width:2px;transform-origin:left;animation:grow 600ms var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms + 320ms)}
.vs-r .bar2 i.ab{transform-origin:right}
.vs-r .bar2 i.own{background:var(--green)}.vs-r .bar2 i.opp{background:var(--blue)}
@media (max-width:560px){.vs-r{grid-template-columns:62px 1fr 62px}}

/* Line-ups: the goalie group header carries its own column labels (shots against, save %, goals against). */
.ro tr.gk td{color:var(--ink-3)}
.ro tr.gk td.r{text-align:right}
.ro .pbar .pv.w{width:62px}
.ro .pbar .pv.w+.track{width:calc(100% - 70px)}
.ro .cap{display:inline-block;margin-left:4px;font:700 11px/1 var(--disp);letter-spacing:.06em;padding:2px 4px 1px;border:1px solid var(--ink-3);color:var(--ink-2);vertical-align:2px}
.ro td.nr{color:var(--ink-3);font:600 13px/1 var(--text);width:1%}
.ro td.z,.ro td.z .pv{color:#B6BFB9;font-weight:400}
.ro tr.sc td.nm{font-weight:600}
.ro td.pbar{width:170px;min-width:150px}
.ro tfoot td{font-size:14px}