/* Game Film page. Layout: a scorer's-table timeline. One clock runs across every lane (xG race, shots, strength, shifts); the inspector reads that clock. */
.gf{
  --ice:#f6f8fa; --panel:#ffffff; --ink:#0f1720; --ink-2:#47525e; --ink-3:#7a8693; --rule:#dde3e9; --rule-2:#eef2f5;
  --goal-red:#c8312c; --home:#2a78d6; --away:#eb6834; --even:#e3e8ee; --cursor:#0f1720;
  --rink-line:#c9d3dc; --rink-red:#e7a3a1; --rink-blue:#9fc0e6; --crease:#d9e8f7;
  --seq-0:#eef4fc; --seq-1:#1c5cab;
  --f-display:"Space Grotesk",-apple-system,"Segoe UI",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --win:#0f1720;
}
.gf{color:var(--ink);font:15px/1.55 var(--f-body)}
.gf .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:4px 48px}
.gf h1,.gf h2,.gf h3{font-family:var(--f-display);font-weight:700;line-height:1.05;margin:0;text-wrap:balance}
.gf h1{font-size:clamp(40px,6vw,64px);text-transform:uppercase}
.gf h2{font-size:28px;text-transform:uppercase}
.gf h3{font-size:17px;text-transform:uppercase;font-weight:600}
.gf p{margin:0;max-width:72ch}
.gf .eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.gf .lede{color:var(--ink-2);font-size:16.5px}
.gf header.top{display:grid;gap:12px;border-bottom:3px solid var(--goal-red);padding-bottom:20px}
.gf .panel{background:var(--panel);border:1px solid var(--rule);border-radius:6px;min-width:0}
.gf .picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gf select{font:14px var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:7px 9px;max-width:100%}
.gf button{font:500 13px var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:7px 11px;cursor:pointer}
.gf button:focus-visible,.gf select:focus-visible{outline:2px solid var(--home);outline-offset:2px}
.gf .board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:18px 20px}
.gf .side{display:grid;gap:2px}
.gf .side.h{text-align:right}
.gf .tm{font:700 44px/1 var(--f-display)}
.gf .tm i{display:inline-block;width:12px;height:12px;border-radius:2px;margin:0 8px;vertical-align:8px}
.gf .sub{font-size:13px;color:var(--ink-2)}
.gf .score{font:700 64px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-align:center}
.gf .score small{display:block;font:500 12px var(--f-mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin-top:4px}
@media (max-width:620px){.gf .tm{font-size:30px}.gf .score{font-size:44px}.gf .board{gap:10px;padding:14px}}
.gf .facts{display:flex;flex-wrap:wrap;gap:8px 26px;padding:0 20px 16px;font-size:13px;color:var(--ink-2)}
.gf .facts b{font:500 13px var(--f-mono);color:var(--ink)}
.gf .tl-wrap{overflow-x:auto;padding:6px 6px 2px}
.gf #tl{display:block;touch-action:pan-y;user-select:none}
.gf #tl text{font-family:var(--f-body)}
.gf .inspector{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--rule)}
@media (max-width:980px){.gf .inspector{grid-template-columns:1fr}}
.gf .insp{padding:14px 16px;display:grid;gap:8px;align-content:start;border-right:1px solid var(--rule-2)}
.gf .insp:last-child{border-right:0}
.gf .clock{font:700 34px/1 var(--f-display);font-variant-numeric:tabular-nums}
.gf .kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin:0}
.gf .kv div{display:grid}
.gf .kv dt{font:500 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.gf .kv dd{margin:0;font:500 15px var(--f-mono);font-variant-numeric:tabular-nums}
.gf .onice{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13.5px}
.gf .onice li{display:grid;grid-template-columns:22px 1fr auto;gap:6px;align-items:baseline}
.gf .onice .p{font:500 11px var(--f-mono);color:var(--ink-3)}
.gf .onice .s{font:500 12px var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gf .onice .s.long{color:var(--goal-red)}
.gf .hint{font-size:12px;color:var(--ink-3)}
.gf #rink{width:100%;display:block}
.gf .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:900px){.gf .two{grid-template-columns:1fr}}
.gf .sec{display:grid;gap:12px}
.gf .box{padding:14px;display:grid;gap:10px}
.gf .scroll{overflow-x:auto}
.gf table{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;width:100%}
.gf th{font:500 10.5px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:right;padding:6px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
.gf th:first-child,.gf td:first-child{text-align:left}
.gf td{padding:5px 8px;border-bottom:1px solid var(--rule-2);text-align:right;white-space:nowrap}
.gf td.pos{color:var(--ink-3);font:500 11px var(--f-mono)}
.gf td.pos-n{color:var(--div-pos,var(--goal-red))}
.gf .mx{border-collapse:separate;border-spacing:2px;width:auto}
.gf .mx th{text-align:left;padding:2px 4px;border:0;font-size:10px;text-transform:none;letter-spacing:0}
.gf .mx th.col{writing-mode:vertical-rl;transform:rotate(180deg);height:118px;vertical-align:bottom;text-align:left;padding:2px}
.gf .mx td{width:26px;min-width:26px;height:22px;padding:0;border:0;border-radius:3px;text-align:center;font:500 10px/22px var(--f-mono)}
.gf .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ink-2);align-items:center}
.gf .legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.gf .tip{position:fixed;pointer-events:none;background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:6px 8px;font-size:12.5px;line-height:1.35;box-shadow:0 4px 14px rgb(0 0 0 / .14);max-width:260px;z-index:5}
.gf .notes{padding:16px 20px;display:grid;gap:8px}
.gf .notes ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ink-2);font-size:14px;max-width:95ch}
.gf h1{font-size:clamp(34px,5vw,52px);text-transform:none}
.gf h2,.gf h3{text-transform:none}
.gf ul{padding-left:18px}