/* NHL Game Flow Box Scores. Ported from hashtagbasketball's game-flow-box-scores.css (2026-09-25): basketball orange accent swapped for the hockey site blue (#4662aa, --bs-primary in app-assets/css/bootstrap.css; #7289c4 is the psg-styles.css dark-mode text variant). Dark mode = .dark-layout on (OS-driven, main-ad.master). */ .gfd { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--d-tx); line-height: 1.35; --d-card: #ffffff; --d-bd: #ebe9f1; --d-hd: #5e5873; --d-tx: #6e6b7b; --d-ft: #b9b9c3; --d-panel: #f0f1f2; --d-ac: #4662aa; --d-ac08: rgba(70,98,170,.08); --d-ac28: rgba(70,98,170,.28); --d-pos: #28c76f; --d-neg: #ea5455; --d-posbg: rgba(40,199,111,.14); --d-negbg: rgba(234,84,85,.14); --d-track: #eef0f2; --d-grid: rgba(94,88,115,.16); --d-shadow: 0 4px 24px rgba(34,41,47,.10); /* chart: away = orange, home = site blue */ --d-away: #ff9f43; --d-home: #4662aa; --d-awaywin: rgba(255,159,67,.16); --d-homewin: rgba(70,98,170,.14); /* event strip kinds */ --d-ev-g: #28c76f; --d-ev-a: #00cfe8; --d-ev-sog: #4662aa; --d-ev-miss: #b9b9c3; --d-ev-hit: #ff9f43; --d-ev-blk: #7367f0; --d-ev-pen: #ea5455; --d-ev-tk: #e0a800; --d-ev-gv: #82868b; } .dark-layout .gfd { --d-card: #283046; --d-bd: #3b4253; --d-hd: #d0d2d6; --d-tx: #b4b7bd; --d-ft: #676d7d; --d-panel: rgba(0,0,0,.22); --d-ac: #7289c4; --d-ac08: rgba(114,137,196,.10); --d-ac28: rgba(114,137,196,.35); --d-track: rgba(0,0,0,.24); --d-grid: rgba(255,255,255,.10); --d-posbg: rgba(40,199,111,.18); --d-negbg: rgba(234,84,85,.18); --d-shadow: 0 4px 24px rgba(0,0,0,.24); --d-home: #7289c4; --d-awaywin: rgba(255,159,67,.14); --d-homewin: rgba(114,137,196,.18); --d-ev-sog: #7289c4; --d-ev-miss: #676d7d; --d-ev-gv: #a5a3ae; } .gfd *, .gfd *::before, .gfd *::after { box-sizing: border-box; } /* header card */ .gfd .d-head { background: var(--d-card); border: 1px solid var(--d-bd); border-radius: 8px; box-shadow: var(--d-shadow); padding: 14px 14px 12px; margin-bottom: 16px; } .gfd .d-sb-meta { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--d-ft); margin-bottom: 8px; } .gfd .d-sb-row { display: flex; align-items: baseline; justify-content: center; gap: 9px; } .gfd .d-sb-ab { font-size: 15px; font-weight: 700; color: var(--d-hd); letter-spacing: .2px; } .gfd .d-sb-sc { font-size: 30px; font-weight: 800; color: var(--d-hd); font-variant-numeric: tabular-nums; line-height: 1; } .gfd .d-sb-sc.d-win { color: var(--d-ac); } .gfd .d-sb-at { font-size: 13px; font-weight: 600; color: var(--d-ft); margin: 0 2px; } /* team stat line */ .gfd .d-tsl { max-width: 380px; margin: 12px auto 0; } .gfd .d-tsl-row { display: grid; grid-template-columns: minmax(40px, 1fr) repeat(5, 46px); column-gap: 4px; align-items: center; padding: 3px 0; font-size: 12px; } .gfd .d-tsl-row span { text-align: right; color: var(--d-hd); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .gfd .d-tsl-row + .d-tsl-row { border-top: 1px solid var(--d-bd); } .gfd .d-tsl-hd span { color: var(--d-ft); font-weight: 700; font-size: 8.5px; letter-spacing: .4px; text-transform: uppercase; } .gfd .d-tsl-row .d-tsl-tm { text-align: left; font-weight: 700; } @media (min-width: 768px) { .gfd .d-top { display: flex; align-items: center; justify-content: center; gap: 96px; } .gfd .d-top .d-tsl { flex: 0 0 auto; margin: 0; } .gfd .d-top .d-tsl-row { grid-template-columns: 48px repeat(5, 46px); } } /* flow chart */ .gfd .d-spark { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-bd); } .gfd .d-fl-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 8px; font-size: 10.5px; font-weight: 600; color: var(--d-tx); } .gfd .d-fl-li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .gfd .d-fl-ttl { color: var(--d-hd); font-weight: 700; } .gfd .d-fl-sw { width: 16px; height: 3px; border-radius: 2px; flex: 0 0 auto; } .gfd .d-fl-swa { background: var(--d-away); } .gfd .d-fl-swh { background: var(--d-home); } .gfd .d-fl-gdot { width: 9px; height: 9px; border-radius: 50%; background: var(--d-hd); border: 2px solid var(--d-card); box-shadow: 0 0 0 1px var(--d-hd); flex: 0 0 auto; } .gfd .d-fl-box { width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--d-bd); flex: 0 0 auto; } .gfd .d-fl-boxa { background: var(--d-awaywin); } .gfd .d-fl-boxh { background: var(--d-homewin); } .gfd .d-fl-wrap { position: relative; height: 160px; } .gfd .d-fl-svg { width: 100%; height: 100%; display: block; overflow: visible; } .gfd .d-fl-win { stroke: none; } .gfd .d-fl-wa { fill: var(--d-awaywin); } .gfd .d-fl-wh { fill: var(--d-homewin); } .gfd .d-sp-tick { stroke: var(--d-grid); stroke-width: 1; vector-effect: non-scaling-stroke; } .gfd .d-fl-base { stroke: var(--d-ft); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; } .gfd .d-fl-ln { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; } .gfd .d-fl-la { stroke: var(--d-away); } .gfd .d-fl-lh { stroke: var(--d-home); } .gfd .d-fl-g { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--d-card); z-index: 2; cursor: default; } .gfd .d-fl-ga { background: var(--d-away); box-shadow: 0 0 0 1px var(--d-away); } .gfd .d-fl-gh { background: var(--d-home); box-shadow: 0 0 0 1px var(--d-home); } .gfd .d-fl-g:hover { transform: scale(1.3); } .gfd .d-fl-max { position: absolute; left: 2px; top: 0; font-size: 9px; font-weight: 700; color: var(--d-ft); pointer-events: none; z-index: 1; } .gfd .d-axis.d-fl-axis { margin: 5px 0 0; } .gfd .d-sp-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 7px; font-size: 10.5px; } .gfd .d-sp-c1, .gfd .d-sp-c3 { font-weight: 600; color: var(--d-tx); white-space: nowrap; } .gfd .d-sp-c2 { color: var(--d-ft); text-align: center; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; } /* team decks */ .gfd .d-decks { display: grid; grid-template-columns: 1fr; gap: 18px; } .gfd .d-deck { min-width: 0; } .gfd .d-deck-hd { margin-bottom: 10px; } .gfd .d-dh-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 12px; margin-bottom: 9px; } .gfd .d-dh-tag { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--d-ft); line-height: 1; margin-bottom: 4px; } .gfd .d-dh-name { font-size: 15px; font-weight: 600; color: var(--d-hd); } .gfd .d-dh-pts { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; } .gfd .d-dh-ptsv { font-size: 19px; font-weight: 800; color: var(--d-hd); font-variant-numeric: tabular-nums; line-height: 1; } .gfd .d-dh-ptsl { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--d-ft); } .gfd .d-axis { position: relative; height: 15px; margin: 0 12px; } .gfd .d-axis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--d-bd); } .gfd .d-ax-lbl { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--d-ft); white-space: nowrap; } .gfd .d-ax-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--d-bd); } .gfd .d-legend { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 8px 12px 0; font-size: 10px; color: var(--d-ft); } .gfd .d-lg-ev { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .gfd .d-lg-ev .d-ev { position: static; margin: 0; } .gfd .d-lg-sep { width: 1px; height: 10px; background: var(--d-bd); margin: 0 1px; } /* player cards */ .gfd .d-card { background: var(--d-card); border: 1px solid var(--d-bd); border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; } .gfd .d-card + .d-card { margin-top: 8px; } .gfd .d-card:hover, .gfd .d-card.d-open { border-color: var(--d-ac28); box-shadow: var(--d-shadow); } .gfd .d-face { display: block; padding: 9px 12px 10px; cursor: pointer; outline: none; border-radius: 8px; } .gfd .d-face:focus-visible { box-shadow: inset 0 0 0 2px var(--d-ac28); } .gfd .d-idrow { display: flex; align-items: center; gap: 8px; } .gfd .d-pospill { flex: 0 0 auto; min-width: 26px; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--d-tx); background: var(--d-panel); border: 1px solid var(--d-bd); border-radius: 4px; padding: 3px 5px; line-height: 1; } .gfd .d-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--d-hd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gfd .d-tile { display: flex; flex-direction: column; align-items: center; min-width: 0; } .gfd .d-tl { font-size: 8.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--d-ft); line-height: 1; margin-bottom: 2px; } .gfd .d-tv { font-size: 13px; font-weight: 700; line-height: 1; color: var(--d-hd); font-variant-numeric: tabular-nums; white-space: nowrap; } .gfd .d-tv.d-min { color: var(--d-ac); } .gfd .d-tv.d-up { color: var(--d-pos); } .gfd .d-tv.d-down { color: var(--d-neg); } .gfd .d-tv.d-flat { color: var(--d-ft); } .gfd .d-chev { flex: 0 0 auto; display: flex; color: var(--d-ft); transition: transform .2s ease, color .2s ease; margin-left: 1px; } .gfd .d-card.d-open .d-chev { transform: rotate(180deg); color: var(--d-ac); } .gfd .gfb-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 4px; margin-top: 9px; } .gfd .gfb-stats.gfb-gk { grid-template-columns: repeat(5, 1fr); } @media (min-width: 576px) and (max-width: 767.98px) { .gfd .gfb-stats { grid-template-columns: repeat(10, 1fr); } } @media (min-width: 1200px) { .gfd .gfb-stats { grid-template-columns: repeat(10, 1fr); } } /* event strip (replaces the basketball stint gantt) */ .gfd .d-evs { position: relative; height: 14px; margin-top: 8px; background: var(--d-track); border-radius: 5px; } .gfd .d-grid { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--d-card); pointer-events: none; } .gfd .d-ev { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .gfd .d-evs .d-ev:hover { transform: scale(1.4); z-index: 3; } .gfd .d-ev-g { background: var(--d-ev-g); width: 10px; height: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 1.5px var(--d-card); z-index: 2; } .gfd .d-ev-a { background: var(--d-ev-a); } .gfd .d-ev-sog { background: var(--d-ev-sog); } .gfd .d-ev-miss { background: transparent; border: 2px solid var(--d-ev-miss); } .gfd .d-ev-hit { background: var(--d-ev-hit); } .gfd .d-ev-blk { background: var(--d-ev-blk); } .gfd .d-ev-pen { background: var(--d-ev-pen); } .gfd .d-ev-tk { background: var(--d-ev-tk); } .gfd .d-ev-gv { background: var(--d-ev-gv); } /* drawer: EV / PP / SH table */ .gfd .d-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; } .gfd .d-card.d-open .d-drawer { grid-template-rows: 1fr; } .gfd .d-drawer-in { overflow: hidden; } .gfd .d-sttbl { margin: 0 12px 12px; padding: 7px 10px; background: var(--d-panel); border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .gfd .d-strow { display: grid; grid-template-columns: minmax(92px, 1fr) 40px 25px 25px 28px 30px 25px 25px 38px 25px 25px 28px; column-gap: 6px; align-items: center; padding: 4px 0; font-size: 11.5px; min-width: 472px; min-width: max(472px, 100%); } .gfd .d-strow.d-gkrow { grid-template-columns: minmax(92px, 1fr) 34px 34px 44px; min-width: 240px; min-width: max(240px, 100%); } .gfd .d-strow + .d-strow { border-top: 1px solid var(--d-bd); } .gfd .d-c-when { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--d-tx); } .gfd .d-c-num { text-align: right; color: var(--d-hd); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .gfd .d-sthead { padding-top: 0; padding-bottom: 5px; } .gfd .d-sthead span { color: var(--d-ft); font-weight: 700; font-size: 8.5px; letter-spacing: .4px; text-transform: uppercase; } .gfd .d-sttot { border-top: 1px solid var(--d-bd); margin-top: 1px; } .gfd .d-sttot .d-c-when { color: var(--d-hd); font-weight: 700; } @media (min-width: 768px) { .gfd .d-decks { grid-template-columns: 1fr 1fr; gap: 16px; } } /* day picker + game chips (outside .gfd) */ .gfb-daybar{align-items:flex-end;justify-content:space-between;gap:12px} .gfb-dayrow{display:flex;align-items:stretch;gap:6px} .gfb-dayrow .form-select{min-width:240px;border-color:#d8d6de} .psg-toolbar-row select.gfb-season{min-width:110px} .dark-layout .gfb-dayrow select.form-select:not(:focus){border-color:#56607f} .gfb-dayrow .gfb-arrow.btn{display:inline-flex;align-items:center;justify-content:center;height:auto;min-height:0!important;padding:0 .7rem;line-height:1} .gfb-dayrow .gfb-arrow.aspNetDisabled{opacity:.45;pointer-events:none} .gfb-daybar .gfb-count.badge{font-size:.8rem;padding:.45rem .8rem;margin-bottom:.15rem} @media (min-width:576px){.gfb-daybar .gfb-count{margin-left:auto}} .gfb-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 12px;border-top:1px solid #ebe9f1} .dark-layout .gfb-chips{border-top-color:#3b4253} .gfb-chip{display:flex;flex-direction:column;gap:3px;min-width:96px;padding:6px 9px;border:1px solid #ebe9f1;border-radius:8px;background:#fff;color:#6e6b7b;text-decoration:none;font-size:12px;line-height:1.2} .gfb-chip:hover{border-color:rgba(70,98,170,.5);color:#6e6b7b} .gfb-chip.gfb-off{opacity:.55} .gfb-line{display:flex;justify-content:space-between;gap:10px} .gfb-ab{font-weight:600} .gfb-sc{font-variant-numeric:tabular-nums} .gfb-line.gfb-w .gfb-ab,.gfb-line.gfb-w .gfb-sc{color:#5e5873;font-weight:700} .dark-layout .gfb-chip{background:#283046;border-color:#56607f;color:#b4b7bd} .dark-layout .gfb-chip:hover{color:#b4b7bd} .dark-layout .gfb-line.gfb-w .gfb-ab,.dark-layout .gfb-line.gfb-w .gfb-sc{color:#d0d2d6} .gfb-chip.gfb-on,.dark-layout .gfb-chip.gfb-on{border-color:#4662aa;background:#4662aa} .gfb-chip.gfb-on .gfb-line .gfb-ab,.gfb-chip.gfb-on .gfb-line .gfb-sc{color:#fff} .gfb-empty{font-size:.875rem} @media (max-width:575.98px){.gfb-dayrow .form-select{min-width:0;flex:1 1 auto}.gfb-dayrow{width:100%}.gfb-daybar .psg-control-group{flex:1 1 auto;min-width:0}}