/* Phone layout (Oct 4, 2026). Everything here sits inside one screen-only max-width:700px query, so a desktop window never matches it and the desktop layout is untouched. "screen" matters: a letter-size print is under 700px wide and would otherwise pick up the phone layout. Loaded last in index.html so it wins ties with the base rules; !important only where the base value is an inline style attribute. Phones in landscape (Oct 11): ~850-930px wide, so the width test alone gave them the desktop layout. The second query takes any touch screen under 500px tall -- every phone on its side, never a desktop window (fine pointer) or an iPad (768px+ tall). The third (Oct 16) is an iPad held upright (744-1032px wide, touch): the phone layout too, Noah's call; an iPad in landscape keeps the desktop layout. Scripts that need to know use PHONE_LAYOUT_MQ (index.html), the same three queries. See CLAUDE.md "Phone layout" for what each section covers. */ @media screen and (max-width: 700px), screen and (max-height: 500px) and (pointer: coarse), screen and (orientation: portrait) and (pointer: coarse) and (max-width: 1100px) { /* No rubber-band scrolling anywhere on a phone: the page, every page window and every scroll box inside one stop at their edges instead of stretching into blank space. */ html, body, .trend-modal-overlay, .trend-modal-overlay * { overscroll-behavior: none; } /* iOS Safari enlarges text in some blocks and not others ("text inflation", strongest in landscape), so rows meant to match didn't -- the recap Lineups' goalies read smaller than the skaters above them. Every row keeps its designed size; pinch zoom still works. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── Header ────────────────────────────────────────────────────────────── Two rows instead of one: brand / status / Admin + Log Out on top, the tabs below as a single swipeable strip. --hdr-h is measured by a ResizeObserver, so the page overlays move down to match on their own. */ #main-header { grid-template-columns: auto 1fr auto; grid-template-areas: "brand status right" "tabs tabs tabs"; column-gap: 0.5rem; row-gap: 0.3rem; padding: 0.35rem 0.6rem 0.4rem; } #main-header .hdr-brand { grid-area: brand; } #main-header .hdr-statusbox { grid-area: status; margin-left: 0; align-items: flex-start; } #main-header .hdr-right { grid-area: right; gap: 0.35rem; } #main-header .hdr-tabs { grid-area: tabs; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.3rem; margin: 0 -0.6rem; padding: 0 0.6rem; } #main-header .hdr-tabs::-webkit-scrollbar { display: none; } #main-header .hdr-tabs > * { flex-shrink: 0; } #main-header .header-btn { font-size: 0.74rem; padding: 0.32rem 0.6rem; } #main-header .hdr-logo { height: 26px; width: 26px; } /* Logo alone (still the Home button): with the title, the top row is ~410px and pushes the whole page wider than the phone. */ #main-header .hdr-title { display: none; } /* xG settings popup: full width less the 16px gutters, rather than hanging off the cog (left is set inline from the cog's position). */ .xg-settings-popup { left: 16px !important; right: 16px; width: auto; max-width: none; } /* ── Home page ───────────────────────────────────────────────────────── One scrolling column: the graph first, then the sidebar (season, team, dates, stat cards), then the Compare panel when it's open. The canvas fills #chart-container and a ResizeObserver redraws it, so giving the container a fixed height is all the graph needs. max-width/overflow also keep anything wide from widening the page -- a phone zooms the whole page out to fit, overlays included. */ #app-layout.visible { flex-direction: column; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; max-width: 100vw; } #app-layout > .chart-area { order: -1; flex: none; padding: 0.75rem 0.6rem 0.5rem; overflow: visible; } #app-layout .chart-header { flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-bottom: 0.35rem; } #app-layout .chart-view-toggle { flex-wrap: wrap; } #app-layout .chart-container { flex: none; height: min(118vw, 560px); } #app-layout > .sidebar { width: auto; min-width: 0; border-right: none; border-top: 1px solid var(--border); padding: 1rem 0.9rem 1.5rem; overflow: visible; } #app-layout > .compare-panel.visible { width: auto; min-width: 0; border-left: none; border-top: 1px solid var(--border); overflow: visible; } #app-layout > .prescout-rail { width: auto; min-width: 0; border-left: none; border-top: 1px solid var(--border); } #app-layout > .prescout-rail .psr-body { overflow: visible; flex: none; } #app-layout > .prescout-rail.psr-collapsed { width: auto; min-width: 0; } #app-layout > .prescout-rail .psr-toggle { display: none !important; } #app-layout > .prescout-rail.psr-collapsed > .psr-head, #app-layout > .prescout-rail.psr-collapsed > .psr-body { display: flex; } #app-layout > .prescout-rail.psr-collapsed > .psr-body { display: block; } /* ── Page shell, for the two pages done so far ───────────────────────── */ #schedule-overlay > .trend-modal, #edm-stats-overlay > .trend-modal, #standings-overlay > .trend-modal, #stat-rank-overlay > .trend-modal, #team-overview-overlay > .trend-modal, #goal-cats-overlay > .trend-modal, #lineup-tool-overlay > .trend-modal, #player-talks-overlay > .trend-modal { width: 100vw !important; max-width: none !important; height: calc(100vh - var(--hdr-h, 0px)) !important; height: calc(100dvh - var(--hdr-h, 0px)) !important; border-radius: 0; padding: 0.6rem 0.6rem 0 !important; gap: 0.5rem; } /* ── Scores ──────────────────────────────────────────────────────────── */ #schedule-overlay .trend-modal-header { gap: 0.4rem !important; } /* Schedule and Scores scroll as one page: the controls and the season summary scroll away instead of keeping 40% of the screen. The content is as tall as its rows (its overflow-y is inline, hence !important); scheduleScroller() in index.html points jump-to-date and Scores' open-on-today at whichever element scrolls. */ #schedule-overlay > .trend-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #schedule-overlay > .trend-modal > * { flex-shrink: 0; } #schedule-content { flex: none !important; overflow: visible !important; height: auto !important; } /* One line, one fixed height. The headers all stick at the top while scrolling and later ones cover earlier ones; a header that wrapped to two lines (the dates with a Challenges button) left its second line showing under every shorter header after it -- Challenges on dates without any. Buttons that don't fit swipe sideways inside the header. */ /* top: the page window scrolls here and has 0.6rem of top padding, which a sticky element respects: at top:0 the bar stopped 0.6rem short of the header and cards showed through above it. */ .lg-date-header { top: -0.6rem; flex-wrap: nowrap; height: 36px; padding: 0 0.6rem; gap: 0.4rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; font-size: 0.78rem; } .lg-date-header::-webkit-scrollbar { display: none; } .lg-date-header > * { flex-shrink: 0; } .lg-date-header .lg-date-count { font-size: 0.66rem; } .lg-date-header .lg-all-goals-btn, .lg-date-header .lg-challenges-btn { font-size: 0.64rem; padding: 2px 6px; } .lg-day-grid { padding: 0.5rem 0; } /* One card per line. The opened game drops in directly under its own card (see scoresDetailAnchor in index.html) rather than under the whole row of four. */ .lg-card-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } /* Wider screens (Oct 11, 16): two games per line on a phone in landscape or an iPad in portrait, three on a 12.9" iPad; an opened game's panel (inserted after the line's last card by scoresDetailAnchor) spans the line. */ @media (min-width: 700px) { .lg-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .lg-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg-card-row > :not(.lg-card-wrapper) { grid-column: 1 / -1; } .lg-card-inner { padding: 0.5rem 0.75rem 0; } .lg-team-logo { width: 24px; height: 24px; } .lg-team-name { font-size: 0.92rem; } /* Right edge, like a scoreboard. The OT/SO badge rides along with it; on a card with xG pills those already take the free space, so this is a no-op there. */ .lg-team-name { margin-right: auto; } .lg-score { font-size: 1.2rem; min-width: 26px; } /* A team's ES/AS xG pills don't fit beside the name, so they drop to a line of their own under it, lined up with the name. */ .lg-team-row { flex-wrap: wrap; row-gap: 0.15rem; } .lg-team-xg { order: 5; flex: 0 0 100%; justify-content: flex-start; padding-left: calc(24px + 0.4rem); overflow: visible; } .lg-xg-pill { font-size: 0.66rem; padding: 1px 4px; } .lg-card-footer .sched-chevron { display: none; } .lg-goal-play-btn { width: 26px; height: 26px; font-size: 0.6rem; margin-left: 4px; } .lg-card-footer { font-size: 0.74rem; padding: 0.45rem 0 0.55rem; flex-wrap: wrap; gap: 0.3rem; } .lg-card-footer > span { flex-wrap: wrap; } .lg-card-footer .nhl-report-link, .lg-card-footer .lg-psf-btn { font-size: 0.72rem; padding: 3px 8px; } .lg-detail-panel { padding: 0 0 0.75rem; } /* ── Game recap (a finished, ingested game opened from Scores) ───────── Its stat sections are 5- and 3-across grids, two of them set inline. */ .sched-detail-row { padding: 0.7rem 0.6rem; } .sched-detail-row .sched-detail-grid, .sched-detail-row [style*="grid-template-columns"]:not([id^="lineup-panel-"] *):not(#cc-content *) { grid-template-columns: minmax(0, 1fr) !important; gap: 0.9rem !important; } /* Lineups (renderLineupSide): the two teams one above the other. Each line or pair keeps its names on the left, one per line (LW / C / RW, or LD / RD), with ES TOI and xG% to their right on the first name's row and the CF-CA buttons under those -- the printed sheet's shape. The desktop row is six cells (three names -- a pair's middle one is a spacer -- then TOI, xG%, buttons); the header rows have the same six, so "ES TOI" / "XG%" land over their columns. */ [id^="lineup-panel-"] > div[style*="grid-template-columns:1fr 1fr;"] { grid-template-columns: minmax(0, 1fr) !important; gap: 1.25rem !important; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] { grid-template-columns: minmax(0, 1fr) 56px 60px !important; grid-template-areas: "n1 toi xg" "n2 btn btn" "n3 . ."; gap: 1px 6px !important; align-items: center; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(1) { grid-area: n1; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(2) { grid-area: n2; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(3) { grid-area: n3; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(4) { grid-area: toi; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(5) { grid-area: xg; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(6) { grid-area: btn; justify-content: center; } /* Names read down a left edge, not right/centre/left across the row. */ :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(-n+3) { text-align: left !important; } /* A pair's middle cell is the desktop spacer: drop it and move RD up. */ :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="1fr 32px 1fr 54px"] { grid-template-areas: "n1 toi xg" "n3 btn btn"; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="1fr 32px 1fr 54px"] > :nth-child(2):empty { display: none; } /* Single-cell rows (goalies, a 7th D, an odd extra forward) span the names column and stay centred, as on desktop. */ :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > [style*="grid-column:1 / 4"] { grid-area: auto !important; grid-column: 1 / -1 !important; text-align: center !important; } /* Header rows: nothing in the name cells, so no blank rows above. */ :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"][style*="text-transform:uppercase"] { grid-template-areas: "n1 toi xg"; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"][style*="text-transform:uppercase"] > :nth-child(-n+3) { display: none; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"][style*="text-transform:uppercase"] > :nth-child(6) { display: none; } /* 5v5 ice tilt (7th cell, recap Lineups only when the game has it): its own row under the names' TOI/xG and buttons. */ :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px 52px"] { grid-template-areas: "n1 toi xg" "n2 btn btn" "n3 tlt tlt"; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="1fr 32px 1fr 54px 40px 130px 52px"] { grid-template-areas: "n1 toi xg" "n3 btn btn" ". tlt tlt"; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"] > :nth-child(7) { grid-area: tlt; white-space: normal !important; margin-left: 0 !important; width: auto !important; text-align: center !important; } :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"][style*="text-transform:uppercase"] > :nth-child(7) { display: none; } /* A line or pair reads as one unit, units separated by a rule. */ :is([id^="lineup-panel-"], #team-overview-lineup-body) div[style*="54px 40px 130px"][style*="padding:2px 0"] { padding: 0.35rem 0 !important; border-bottom: 1px solid var(--border); } .sched-detail-row .sched-bar-label { white-space: normal; flex-shrink: 1; } /* ── Game preview (opens under a Scores or Schedule card) ────────────── */ .gp-panel .gp-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "centre centre" "away home"; row-gap: 0.6rem; gap: 0.6rem 0.5rem; } .gp-panel .gp-head > .gp-side-away { grid-area: away; } .gp-panel .gp-head > .gp-center { grid-area: centre; } .gp-panel .gp-head > .gp-side-home { grid-area: home; } .gp-panel .gp-side { gap: 0.45rem; } .gp-panel .gp-logo { width: 30px; height: 30px; } .gp-panel .gp-team-name { font-size: 0.88rem; } .gp-panel .gp-wrapper, .gp-panel .gp-wrapper.gp-wrapper-wide, .gp-panel .gp-gk-split { grid-template-columns: minmax(0, 1fr); } .gp-panel .h2h-overview-grid { grid-template-columns: minmax(96px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); } .gp-panel .gp-gk-col { overflow-x: auto; } /* Same eight columns, tighter, so a goalie table fits a phone's width with ~95px left for the name. */ .gp-panel .gp-gk-row { grid-template-columns: minmax(70px, 1fr) 20px 20px 46px 48px 32px 34px 20px; gap: 0 4px; } /* Value and rank on one line, the raw counts (PP 4/7, faceoff OZ/DZ) under them, instead of all three wrapping into each other. */ .gp-panel .h2h-ov-cell { flex-wrap: wrap; row-gap: 0; gap: 0 0.3rem; padding: 0.28rem 0.3rem; } .gp-panel .h2h-ov-rank { white-space: nowrap; } .gp-panel .h2h-ov-cell > .gp-raw { order: 3; flex-basis: 100%; white-space: nowrap; line-height: 1.2; } /* LEADERS keeps its 1040px floor (see game-preview.css) and scrolls sideways, so the category column stays pinned and every name keeps its label in view. */ .gp-panel .gp-leader-grid { grid-template-columns: 92px repeat(4, minmax(0, 1fr)); min-width: 980px; } .gp-panel .gp-leader-grid > .gp-lead-corner, .gp-panel .gp-leader-grid > .h2h-ov-header:not(.gp-lead-sub), .gp-panel .gp-leader-grid > .h2h-ov-label { position: sticky; left: 0; z-index: 1; background: var(--surface2); white-space: normal; } /* A line's three names: wrap them rather than ellipsise the third. */ .gp-panel .gp-unit-players { white-space: normal; overflow: visible; } .gp-panel .gp-pl { white-space: nowrap; } /* ── EDM Tools > Scoring Chances ───────────────────────────────────────── The page is three side-by-side sections on desktop (summary | totals | chance types, then For log | Against log | roster); on a phone each one gets the full width, one under the other. The hooks are the renderer's inline grid styles, since those blocks carry no classes of their own. */ #edm-stats-overlay .trend-modal-header { padding-left: 0; padding-right: 0; } #edm-chance-print-inner > div[style*="grid-template-columns"], #edm-chances-individual-wrap > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; } #edm-chances-filter-row { flex-wrap: wrap !important; gap: 0.5rem 0.9rem !important; } /* Phone reading order (Noah, Oct 4): the logos/totals block (with its 5v5 chance summary) first, then Chance Summary, then Goal Summary; below the filters, the Roster before the For/Against chance logs. Only order changes -- desktop keeps summary | totals | goals and For | Against | Roster. The multi-game bottom grid (type summary + roster, no logs) has a different template and is left as it is. */ #edm-chance-print-inner > div[style*="1fr 1.15fr 1fr"] > :nth-child(2) { order: -1; } #edm-chances-individual-wrap > div[style*="1.3fr 1.3fr 1fr"] > :last-child { order: -1; } /* Column headers wrap ("5v5 Chance Summary" was most of a table's width on its own). */ #edm-chances-main-wrap .gc-rank-table th { white-space: normal; } #edm-chances-main-wrap .gc-rank-table th, #edm-chances-main-wrap .gc-rank-table td { padding: 0.4rem 0.3rem; } /* The For/Against logs are seven columns; a size down lets them fit. */ #edm-chances-individual-wrap .gc-rank-table { font-size: 0.74rem; } #edm-chances-individual-wrap .gc-rank-table th { font-size: 0.6rem; letter-spacing: 0.02em; } #edm-chances-individual-wrap .gc-rank-table th, #edm-chances-individual-wrap .gc-rank-table td { padding: 0.35rem 0.2rem; } /* Filter dropdowns open from the left edge of their button; near the right edge of a phone that runs off-screen. */ #edm-stats-overlay .cc-dd-panel { max-width: calc(100vw - 1.5rem); } /* ── Intermission report / Match-ups window (js/intermission-report.js) ── intermission-report.css already goes full-screen below 760px; this makes it usable at phone width. Header and tabs shrink to one swipeable row each so the numbers start near the top. */ #intermission-overlay .ir-modal { padding: 0.5rem 0.6rem 0.4rem !important; gap: 0.4rem; } #intermission-overlay .ir-head { gap: 0.25rem; } /* The modal is a flex column; without this the rows above the table get squeezed and the tab pills are clipped. */ #intermission-overlay .ir-head, #intermission-overlay .ir-tabs, #intermission-overlay .ir-key { flex-shrink: 0; } #intermission-overlay .ir-title { font-size: 1.05rem; gap: 0.35rem; } #intermission-overlay .ir-title .ir-logo { width: 1.35rem; height: 1.35rem; } #intermission-overlay .ir-status-label { font-size: 0.85rem; } #intermission-overlay .ir-status-meta { font-size: 0.7rem; white-space: normal; } #intermission-overlay .ir-actions, #intermission-overlay .ir-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -0.6rem; padding: 0 0.6rem; } #intermission-overlay .ir-actions::-webkit-scrollbar, #intermission-overlay .ir-tabs::-webkit-scrollbar { display: none; } #intermission-overlay .ir-actions > *, #intermission-overlay .ir-tabs > * { flex-shrink: 0; } #intermission-overlay .ir-btn { min-height: 2.1rem; font-size: 0.78rem; padding: 0 0.7rem; } #intermission-overlay .ir-tab { min-height: 2.2rem; font-size: 0.8rem; padding: 0 0.85rem; } #intermission-overlay .ir-key { font-size: 0.7rem; } /* Each unit is a card: its chips across the top (a match-up adds "vs" and the other side's chips on the next line), then two rows of labelled numbers that line up card to card: TOI SA For SA Ag SA% GF xGF xGA xGF% GA The column-header rows are hidden; every cell carries its own label (data-l). The team band stays as the table's title. Keyed on :has(td[data-l]) so a browser still holding the previous intermission-report.js (no labels) keeps the old scrolling table instead of unlabelled cards. */ #intermission-overlay .ir-table:has(td[data-l]), #intermission-overlay .ir-table:has(td[data-l]) thead, #intermission-overlay .ir-table:has(td[data-l]) tbody { display: block; width: 100%; } #intermission-overlay .ir-table:has(td[data-l]) .ir-sub { display: none; } #intermission-overlay .ir-table:has(td[data-l]) .ir-band { display: flex; border-radius: 8px 8px 0 0; } #intermission-overlay .ir-table:has(td[data-l]) .ir-band th:not(.ir-band-team) { display: none; } #intermission-overlay .ir-table:has(td[data-l]) .ir-band-team { flex: 1; padding: 0.5rem 0.6rem !important; font-size: 0.92rem !important; } #intermission-overlay .ir-table:has(td[data-l]) tbody tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-areas: "us us us us us" "toi cf ca sap gf" ". xgf xga xgp ga"; column-gap: 4px; padding: 0.45rem 0.3rem 0.4rem; border-bottom: 1px solid var(--grid); } #intermission-overlay .ir-matchups:has(td[data-l]) tbody tr { grid-template-areas: "us us us us us" "vs them them them them" "toi cf ca sap gf" ". xgf xga xgp ga"; } #intermission-overlay .ir-table:has(td[data-l]) tbody tr:nth-child(even) { background: var(--surface2); } #intermission-overlay .ir-table:has(td[data-l]) tbody td { display: block; padding: 0.1rem 0 !important; border: none !important; background: none !important; min-width: 0 !important; } #intermission-overlay .ir-table:has(td[data-l]) tbody.ir-sep { border-top: 3px solid var(--navy); } #intermission-overlay .ir-table:has(td[data-l]) tbody:first-of-type { border-top: none; } #intermission-overlay td.ir-us { grid-area: us; padding-bottom: 0.3rem !important; } #intermission-overlay td.ir-them { grid-area: them; padding-bottom: 0.3rem !important; } #intermission-overlay td.ir-vs { grid-area: vs; align-self: center; text-align: left; padding-left: 0.2rem !important; } #intermission-overlay td[data-l="TOI"] { grid-area: toi; } #intermission-overlay td[data-l="SA For"] { grid-area: cf; } #intermission-overlay td[data-l="SA Ag"] { grid-area: ca; } #intermission-overlay td[data-l="SA%"] { grid-area: sap; } #intermission-overlay td[data-l="GF"] { grid-area: gf; } #intermission-overlay td[data-l="xGF"] { grid-area: xgf; } #intermission-overlay td[data-l="xGA"] { grid-area: xga; } #intermission-overlay td[data-l="xGF%"] { grid-area: xgp; } #intermission-overlay td[data-l="GA"] { grid-area: ga; } /* Lines & Pairs with 5v5 ice tilt: a fourth row under the xG row. */ #intermission-overlay .ir-table.ir-has-tilt:has(td[data-l]) tbody tr { grid-template-areas: "us us us us us" "toi cf ca sap gf" ". xgf xga xgp ga" ". tlt tlt tlp ."; } #intermission-overlay td[data-l="5v5 Tilt (Sig)"] { grid-area: tlt; } #intermission-overlay td[data-l="Tilt %"] { grid-area: tlp; } #intermission-overlay td[data-l] { font-size: 0.86rem; } #intermission-overlay td[data-l]::before { content: attr(data-l); display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text3); line-height: 1.3; } #intermission-overlay td.ir-empty { grid-column: 1 / -1; } #intermission-overlay .ir-chips { flex-wrap: wrap; gap: 0.25rem; } #intermission-overlay .ir-chip { min-width: 0; font-size: 0.74rem; padding: 0.26rem 0.3rem 0.26rem 0.5rem; } #intermission-overlay .ir-pill { min-width: 0; width: 100%; max-width: 3.6rem; font-size: 0.76rem; padding: 0.14rem 0.2rem; } /* DJ Info: already three columns (road / stat / home); just tighter. */ #intermission-overlay .ir-dj-note { font-size: 0.76rem; } #intermission-overlay .ir-table.ir-dj { font-size: 0.86rem; } /* Ice Tilt tab: five columns kept, tightened to fit 375px; headers wrap. */ #intermission-overlay .ir-tilt { margin: 0.2rem 0; } #intermission-overlay .ir-tilt-toggle .ir-btn { flex: 1; } #intermission-overlay .ir-tilt-lead strong { font-size: 1.1rem; } #intermission-overlay .ir-tilt-lead span { font-size: 0.78rem; } #intermission-overlay .ir-tilt-table { font-size: 0.8rem; table-layout: fixed; } #intermission-overlay .ir-tilt-table th, #intermission-overlay .ir-tilt-table td { padding: 0.38rem 0.15rem; } #intermission-overlay .ir-tilt-table thead th { white-space: normal; font-size: 0.68rem; line-height: 1.2; vertical-align: bottom; } #intermission-overlay .ir-tilt-table th:first-child { width: 2.9rem; } #intermission-overlay .ir-tilt-table .ir-tilt-pct { width: 3.2rem; } #intermission-overlay .ir-tilt-table thead th:nth-child(3), #intermission-overlay .ir-tilt-table thead th:nth-child(5) { width: 3.2rem; } #intermission-overlay .ir-tilt-per th { padding-left: 0.4rem; } #intermission-overlay .ir-tilt-sig { font-size: 0.72rem; } #intermission-overlay .ir-tilt-foot { font-size: 0.68rem; line-height: 1.4; } #intermission-overlay .ir-dj th.ir-dj-team { width: 28%; padding: 0.45rem 0.3rem; font-size: 0.78rem; white-space: normal; } #intermission-overlay .ir-dj th.ir-dj-team .ir-logo { display: block; margin: 0 auto 0.2rem; } #intermission-overlay .ir-dj td { padding: 0.5rem 0.3rem; } #intermission-overlay .ir-dj td.ir-dj-label { white-space: normal; font-size: 0.8rem; } #intermission-overlay .ir-dj td.ir-dj-val { font-size: 0.95rem; } /* Team Stats. The summaries are already stacked (below 1100px); they get tighter, with each faceoff % under its won-total. The player tables keep every column and scroll sideways inside their own box, with #, position and surname pinned on the left; the team band row is replaced by .ir-ts-title above the box, so the name never scrolls away. */ #intermission-overlay .ir-ts-summary { gap: 0.6rem; } #intermission-overlay .ir-ts-sum { font-size: 0.78rem; } #intermission-overlay .ir-ts-sum th, #intermission-overlay .ir-ts-sum td { padding: 0.24rem 0.22rem; } #intermission-overlay .ir-ts-sum .ir-ts-sub th { padding-left: 0.6rem; } #intermission-overlay .ir-ts-sum .ir-band-team { white-space: normal; font-size: 0.86rem !important; } #intermission-overlay .ir-ts-sum .ir-band-team .ir-logo { margin-right: 0.35rem; } #intermission-overlay .ir-ts-fopct, #intermission-overlay .ir-ts-carry { display: block; font-size: 0.66rem; color: var(--text3); line-height: 1.15; } #intermission-overlay .ir-ts-tabs .ir-tab { min-height: 2.1rem; padding: 0 0.8rem; font-size: 0.8rem; } #intermission-overlay .ir-ts-wrap { margin-bottom: 1rem; } #intermission-overlay .ir-ts-title { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 0.9rem; } #intermission-overlay .ir-ts-wrap:has(.ir-ts-title) { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; } #intermission-overlay .ir-ts-wrap:has(.ir-ts-title) .ir-ts-title { position: sticky; left: 0; } #intermission-overlay .ir-ts-wrap .ir-ts-players { width: auto; min-width: 100%; margin-bottom: 0; font-size: 0.78rem; } #intermission-overlay .ir-ts-wrap .ir-ts-players .ir-band { display: none; } #intermission-overlay .ir-ts-players th, #intermission-overlay .ir-ts-players td { padding: 0.32rem 0.38rem; } #intermission-overlay .ir-ts-players .ir-sub th { position: static; font-size: 0.66rem; } #intermission-overlay .ir-ts-first { display: none; } #intermission-overlay .ir-ts-wrap .ir-ts-players tr:not(.ir-ts-total) > :nth-child(-n+3):not([colspan]), #intermission-overlay .ir-ts-wrap .ir-ts-players tr.ir-ts-total > td:first-child { position: sticky; z-index: 2; box-sizing: border-box; } #intermission-overlay .ir-ts-wrap .ir-ts-players tr:not(.ir-ts-total) > :nth-child(1):not([colspan]) { left: 0; width: 2rem; min-width: 2rem; max-width: 2rem; } #intermission-overlay .ir-ts-wrap .ir-ts-players tr:not(.ir-ts-total) > :nth-child(2):not([colspan]) { left: 2rem; width: 1.5rem; min-width: 1.5rem; max-width: 1.5rem; padding-left: 0; padding-right: 0; } #intermission-overlay .ir-ts-wrap .ir-ts-players tr:not(.ir-ts-total) > :nth-child(3):not([colspan]) { left: 3.5rem; max-width: 6.4rem; overflow: hidden; text-overflow: ellipsis; box-shadow: 2px 0 0 var(--border); } #intermission-overlay .ir-ts-wrap .ir-ts-players tr.ir-ts-total > td:first-child { left: 0; box-shadow: 2px 0 0 var(--border); } #intermission-overlay .ir-ts-wrap .ir-ts-players tbody tr:nth-child(odd) > td:nth-child(-n+3) { background: var(--surface); } /* ── Standings ─────────────────────────────────────────────────────────── Nineteen columns (~1040px) were squeezed into the phone's width with table-layout:fixed until every column was a few pixels wide. Here the tables keep their natural width and #standings-content (already overflow:auto) scrolls them sideways together, with the Team column pinned so every row keeps its name. Long names wrap to two lines. */ #standings-overlay .trend-modal-header { gap: 0.4rem; } #standings-overlay .trend-modal-controls { gap: 0.4rem; } /* Close sits beside the Standard / Expected / Charts toggle: the controls box dissolves into the header's own wrapping row, then title, toggle + Close, filters. */ #standings-overlay .trend-modal-header { justify-content: flex-start; } #standings-overlay .trend-modal-header > h2 { flex-basis: 100%; } #standings-overlay .trend-modal-controls { display: contents; } #standings-overlay .trend-modal-header .chart-view-toggle { order: 1; } #standings-close { order: 2; } #standings-filter-controls { order: 3; flex-basis: 100%; } #standings-filter-controls > span:first-child { margin-left: 0 !important; } /* The tables scroll sideways and down in one box; a diagonal drag past an edge rubber-banded the whole table off into blank space. */ #standings-content, #standings-overlay > .trend-modal { overscroll-behavior: none; } #standings-overlay .chart-view-toggle { flex-wrap: wrap; } #standings-content .standings-tbl { width: max-content; min-width: 100%; table-layout: auto; } #standings-content .standings-tbl col { width: auto !important; } #standings-content .standings-tbl th, #standings-content .standings-tbl td { padding: 0.45rem 0.4rem; overflow: visible; } #standings-content .standings-tbl .col-team { position: sticky; left: 0; z-index: 1; width: 84px; min-width: 84px; max-width: 84px; white-space: nowrap; line-height: 1.2; background: var(--surface); box-shadow: 1px 0 0 var(--border); } #standings-content .standings-tbl tr:nth-child(even) td.col-team { background: var(--surface2); } #standings-content .standings-tbl tr.standings-selected td.col-team { background: var(--accent-light); } /* Logo + abbreviation instead of the full name (standingsTeamName()). */ #standings-content .standings-tbl .st-name-full { display: none; } #standings-content .standings-tbl .st-name-short { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; vertical-align: middle; } #standings-content .standings-tbl .st-name-logo { width: 20px; height: 20px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } #standings-content .standings-tbl .standings-pos { min-width: 1.1rem; margin-right: 0.2rem; } /* Conference and division headings stay put while the tables scroll. */ #standings-content .standings-conf-label, #standings-content .standings-group-label { position: sticky; left: 0; width: fit-content; } /* ── Playoff bracket (Standings > Playoffs and Schedule > Playoffs) ────── Seven columns squeezed to ~47px each overlapped their 1.56rem team names. Smaller text and a floor per round; .po-bracket is already overflow:auto, so the bracket scrolls sideways inside its box. */ .po-bracket .po-round { min-width: 92px; } .po-bracket .po-cup-center { min-width: 104px; } .po-bracket .po-series { left: 6%; right: 6%; padding: 0.4rem 0.4rem; gap: 2px; } .po-bracket .po-team-name, .po-bracket .po-wins { font-size: 1.05rem; } .po-bracket .po-wins { min-width: 16px; } .po-bracket .po-round-label { font-size: 0.78rem; letter-spacing: 0.06em; } /* ── Schedule (team view) ──────────────────────────────────────────────── Each game row is an 11-column grid ~1015px wide. On a phone it is three lines on a 12-track grid: date / opponent / result / score, then the six xG numbers in equal columns, then the video and report buttons. The header row has the same 11 cells, so it takes the same shape and every xG label sits over its number. NHL-schedule rows (.nhl-mode, the 2026-27 Upcoming list) are a different four-cell row, handled below. */ :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 0.15rem 0.3rem !important; padding: 0.5rem 0.6rem !important; align-items: center; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(1), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(1) { grid-row: 1; grid-column: 1 / 4; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(2), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(2) { grid-row: 1; grid-column: 4 / 9; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(3), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(3) { grid-row: 1; grid-column: 9 / 11; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(4), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(4) { grid-row: 1; grid-column: 11 / 13; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(n+5):nth-child(-n+10), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(n+5):nth-child(-n+10) { grid-row: 2; grid-column: span 2; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(5), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(5) { grid-column: 1 / 3; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(11) { grid-row: 3; grid-column: 1 / -1; margin-top: 0.2rem; } :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(11) { display: none; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(11) > * { flex-wrap: wrap; } /* NHL-schedule rows (2026-27 onward until a game is ingested): date / opponent / result, then the score and report buttons on a second line. */ #schedule-content .sched-game-row.nhl-mode, #schedule-content .sched-header-row.nhl-mode { grid-template-columns: 84px minmax(0, 1fr) auto !important; gap: 0.15rem 0.4rem !important; padding: 0.5rem 0.6rem !important; align-items: center; } #schedule-content .sched-game-row.nhl-mode > :nth-child(4) { grid-column: 1 / -1; text-align: left; } #schedule-content .sched-header-row.nhl-mode > :nth-child(4) { display: none; } /* Cleaner rows on a phone: ES xG only (the AS trio is hidden, header included), each ES figure a third of the line; opponent as logo + abbreviation (schedOppName); the six buttons a size down so they fit one line. */ :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(n+8):nth-child(-n+10), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(n+8):nth-child(-n+10) { display: none; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(5), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(5) { grid-column: 1 / 5; justify-self: start; min-width: 4.2em; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(6), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(6) { grid-column: 5 / 9; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(7), :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(7) { grid-column: 9 / 13; } :is(#schedule-content, #h2h-content) .sched-header-row:not(.nhl-mode) > :nth-child(5) { text-align: left; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(11) > * { flex-wrap: nowrap; } :is(#schedule-content, #h2h-content) .sched-game-row:not(.nhl-mode) > :nth-child(11) { gap: 0.25rem !important; flex-wrap: nowrap !important; } :is(#schedule-content, #h2h-content) .sched-game-row .sched-goal-btn, :is(#schedule-content, #h2h-content) .sched-game-row .nhl-report-link, :is(#schedule-content, #h2h-content) .sched-game-row .sched-psf-btn { font-size: 0.6rem; padding: 2px 5px; } :is(#schedule-content, #h2h-content) .sched-opp-full { display: none; } :is(#schedule-content, #h2h-content) .sched-opp-short { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; } :is(#schedule-content, #h2h-content) .sched-opp-logo { width: 18px; height: 18px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } /* The column header sticks at the top of the page window, which has 0.6rem of top padding: at top:0 rows showed through above it. */ #schedule-content .sched-header-row { top: -0.6rem; } :is(#schedule-content, #h2h-content) .sched-date-col { font-size: 0.72rem; } :is(#schedule-content, #h2h-content) .sched-opp-col { font-size: 0.8rem; min-width: 0; } :is(#schedule-content, #h2h-content) .sched-xg-col { font-size: 0.78rem; } /* Situations stat strips (League Overview, Team Breakdown): a sideways scrolling strip of 10-12 cards; three to a row shows them all. */ #situations-root .stat-row-compact { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } #situations-root .stat-row-compact .stat-card { width: auto; } #situations-root .stat-card-sm .st-label, #situations-root .stat-card-sm .st-sub { white-space: normal; } /* ── League Stats ──────────────────────────────────────────────────────── Fixed view: each column is its own ranking of all 32 teams, so on a phone they simply stack two to a row at natural height (on desktop the rows stretch to fill the window, which only works side by side) and the content area scrolls. The category buttons and segment numbers become one swipeable strip instead of three wrapped rows plus a strip that ran off both edges. */ #stat-rank-overlay .trend-modal { gap: 0.35rem; } /* Title and Close on top, the "Showing:" line under them. */ #srk-header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.15rem; } #srk-showing { grid-column: 1 / -1; grid-row: 2; text-align: left; } #srk-cat-btns { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -0.6rem; padding-left: 0.6rem !important; padding-right: 0.6rem !important; } #srk-cat-btns::-webkit-scrollbar { display: none; } #srk-cat-btns > * { flex-shrink: 0; } #srk-cat-btns > span { margin-left: 0.4rem !important; white-space: nowrap; } #srk-segment-bar { flex-wrap: nowrap !important; } #srk-segment-bar > * { flex-shrink: 0; } #stat-rank-overlay [style*="justify-content:center;gap:0.75rem"] { gap: 0.4rem 0.5rem !important; } #stat-rank-overlay [style*="width:1px;height:18px"] { display: none; } #srk-team-select { min-width: 0 !important; max-width: 100%; } /* !important: renderStatRankings() sets overflow:hidden inline for the Fixed view (on desktop it stretches to fill the window), which beat a plain rule here -- on a phone the rankings couldn't be scrolled at all. */ /* The whole page scrolls as one (controls scroll away, rankings get the screen) instead of a short box under ~330px of controls. The content area is as tall as its rows and only scrolls sideways (Sort's table). */ #stat-rank-overlay > .trend-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #stat-rank-overlay > .trend-modal > * { flex-shrink: 0; } #stat-rank-content { display: block !important; flex: none !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } /* Sort view: its wrapper and 32 rows are flex:1 to share the window's height on desktop, which squeezed each row to ~13px here. */ #stat-rank-content > div { flex: none !important; } #stat-rank-content div[style*="border-left:3px"] { flex: none !important; min-height: 30px; } #stat-rank-content .srk-fixed-grid { flex: none; } #stat-rank-content .srk-fixed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem 0.5rem; overflow: visible; } #stat-rank-content .srk-fixed-col { overflow: visible; } /* Wider screens (phone landscape, iPad portrait): four rankings across instead of two; Special Teams' PP xGF | PP AtE | PK xGA | PK AtE then share one row. */ @media (min-width: 700px) { #stat-rank-content .srk-fixed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Every header two lines tall, title at the bottom: a title that wraps (AxGF/GP, the Misc renames) otherwise pushed its whole column down a row against the one beside it. */ #stat-rank-content .srk-fixed-col-header { white-space: normal !important; height: 2.9em; display: flex; align-items: flex-end; line-height: 1.2; overflow: hidden; } /* Every row the same height, so side-by-side rankings stay level (a column with a bracketed second value, like AxGF/GP's "(+1.76)", sized its rows differently and drifted). */ #stat-rank-content .srk-fixed-row { flex: none; height: 30px; padding: 0 0.3rem; gap: 4px; } /* Abbreviations only on a phone (srkTeamName() emits both). */ #stat-rank-content .srk-name-full { display: none; } #stat-rank-content .srk-name-short { display: inline; } #stat-rank-content .srk-fixed-row.selected { padding-left: calc(0.3rem - 3px); } #stat-rank-content .srk-pos { min-width: 16px; } #stat-rank-content .srk-name { font-size: 0.74rem; } #stat-rank-content .srk-val { font-size: 0.78rem; min-width: 0; } #stat-rank-content .srk-bar-wrap { display: none; } /* Special Teams, Fixed view: desktop runs PP xGF, PP AtE, PP%, PK xGA, PK AtE, PK%, Net PK%, PP + PK%. Two to a row on a phone, so it pairs PP xGF | PP AtE, PK xGA | PK AtE, PP% | PK%, Net PK% | PP + PK% (Noah, Oct 6-7). Found by its first header's full name; desktop's order is untouched. */ #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(1) { order: 1; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(2) { order: 2; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(4) { order: 3; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(5) { order: 4; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(3) { order: 5; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(6) { order: 6; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(7) { order: 7; } #stat-rank-content .srk-fixed-grid:has(.srk-fixed-col:first-child [data-fullname^="Power Play Expected Goals For"]) > .srk-fixed-col:nth-child(8) { order: 8; } /* Sort view: one table, rows = teams, a 200px column per stat (all inline styles, hence the attribute hooks). Narrower stat columns and a sideways scroll, with rank and team pinned. */ #stat-rank-content > div[style*="width:fit-content"] { margin: 0 !important; } #stat-rank-content [style*="width:200px"] { width: 118px !important; font-size: 0.78rem !important; } #stat-rank-content [style*="min-width:28px"] { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 24px !important; padding-right: 0.3rem !important; } #stat-rank-content [style*="min-width:260px"] { position: sticky; left: 24px; z-index: 1; background: var(--surface); min-width: 58px !important; max-width: 58px; padding-right: 0.4rem !important; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem !important; box-shadow: 1px 0 0 var(--border); } /* ── Team Explorer ─────────────────────────────────────────────────────── Season snapshot boxes and the side-by-side sections (Systems, Lineup + pick a game) one under the other. */ #team-overview-content .te-snap-wrap { grid-template-columns: minmax(0, 1fr); } #team-overview-content .te-snap-asof { margin-left: 0; text-align: left; } #team-overview-content div[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"], #team-overview-content div[style*="grid-template-columns:1fr 1fr;"] { grid-template-columns: minmax(0, 1fr) !important; } /* Title, team dropdown and Close on one line: the header wrapped Close onto a row of its own. */ #team-overview-overlay .trend-modal-header { flex-wrap: nowrap; gap: 0.5rem; } #team-overview-overlay .trend-modal-header > div:first-child { flex: 1 1 auto; min-width: 0; gap: 0.5rem !important; } #team-overview-overlay .trend-modal-header h2 { white-space: nowrap; flex-shrink: 0; } #team-overview-team-select { flex: 1 1 auto; min-width: 0; width: auto; } #team-overview-close { flex-shrink: 0; } /* The last-game lineup (#team-overview-lineup-body) gets the recap Lineups' phone layout (see the Game recap section). Its six-column desktop rows were ~460px wide, which let the whole page be dragged sideways. */ #team-overview-content, #team-overview-overlay > .trend-modal { overscroll-behavior: none; } /* Full-roster season stats: a 12-column grid with no scroll box of its own; give it one. Player names stay pinned while the numbers scroll, here and in the Segment/Season tables, which already scroll. */ /* Usage's six view buttons (Period Starts ... OT Units) wrap. */ #team-overview-content .chart-view-toggle { flex-wrap: wrap; } #team-overview-roster-stats, #team-overview-usage [id^="usage-tbl-"] { overflow-x: auto; -webkit-overflow-scrolling: touch; } #team-overview-roster-stats .ts-grid, #team-overview-usage [id^="usage-tbl-"] .ts-grid { min-width: max-content; } /* Rank (20px) + the 6px gap, then the name; the header's section label spans both. */ #team-overview-content .ts-cell.ts-rank, #team-overview-content .ts-header.ts-subtitle, #h2h-content .ts-cell.ts-rank, #h2h-content .ts-header.ts-subtitle { position: sticky; left: 0; z-index: 1; background: var(--surface); } #team-overview-content .ts-cell.ts-name, #h2h-content .ts-cell.ts-name { position: sticky; left: 26px; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); } /* ── Pre-Scout Prep ────────────────────────────────────────────────────── The five game boxes and the nine coach buttons each wrapped onto two or three rows; each is one sideways-swiping line now, the active one scrolled into view (revealActiveInStrip). */ #h2h-overlay > .trend-modal { padding: 0.6rem 0.6rem 0 !important; } #h2h-overlay .trend-modal-header { gap: 0.4rem; } #h2h-overlay .trend-modal-header > div:first-child { flex: 1 1 100%; min-width: 0; gap: 0.4rem !important; } #h2h-game-picker, #h2h-role-buttons { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: none; } #h2h-game-picker::-webkit-scrollbar, #h2h-role-buttons::-webkit-scrollbar { display: none; } #h2h-game-picker > *, #h2h-role-buttons > * { flex-shrink: 0; white-space: nowrap; } /* The coach tabs. Every side-by-side pair of boxes (.h2h-overview-wrapper and the tabs' own inline two-column grids) stacks; the Stat / team / team tables fit the width (label column shares the row, labels wrap, each value's rank badge goes under it); anything still wider than the screen scrolls inside its own box instead of widening the page, and nothing rubber-bands. */ #h2h-content, #h2h-overlay > .trend-modal { overscroll-behavior: none; } #h2h-content { overflow-x: hidden; } #h2h-content .h2h-overview-wrapper, #h2h-content div:not(.h2h-overview-grid)[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"], #h2h-content div:not(.h2h-overview-grid)[style*="grid-template-columns: minmax(0,1fr) minmax(0,1fr)"], #h2h-content div:not(.h2h-overview-grid)[style*="grid-template-columns:1fr 1fr;"], #h2h-content div:not(.h2h-overview-grid)[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } #h2h-content .vc-layout { grid-template-columns: minmax(0, 1fr) !important; } /* Player tables (Top Scorers, OT Units, Usage) scroll sideways one table at a time, so the box and its title stay put. Scrolling the whole box moved the title too, and its padding left strips where the stats showed past the pinned rank and name. The rank's shadow fills the 6px gap before the name. */ #h2h-content .h2h-overview .ts-grid { overflow-x: auto; overscroll-behavior-x: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #h2h-content .h2h-overview .ts-grid::-webkit-scrollbar { display: none; } #h2h-content .ts-cell.ts-rank, #h2h-content .ts-cell.ts-name, #h2h-content .ts-header.ts-subtitle { background: var(--surface2) !important; } #h2h-content .ts-cell.ts-rank { box-shadow: 6px 0 0 var(--surface2); } #h2h-content .h2h-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem; } #h2h-content .h2h-stat-block { padding: 0.6rem 0.6rem; min-width: 0; } /* Babcock's summary row ends in a whole scoring-chances table: full row. */ #h2h-content .h2h-summary > :not(.h2h-stat-block) { grid-column: 1 / -1; } #h2h-content .h2h-overview { padding: 0.6rem 0.6rem; min-width: 0; overflow-x: auto; } #h2h-content .h2h-overview-grid:not([style*="grid-template-columns"]), #h2h-content .h2h-overview-grid[style*="minmax(165px,1fr) minmax(100px,1fr) minmax(100px,1fr)"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important; } #h2h-content .h2h-overview-grid[style*="110px 110px 110px"], #h2h-content .h2h-overview-grid[style*="130px 130px 130px"] { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) !important; } #h2h-content .h2h-ov-label { white-space: normal; padding: 0.28rem 0.3rem; line-height: 1.2; } #h2h-content .h2h-ov-header { padding: 0.2rem 0.3rem 0.3rem; } #h2h-content .h2h-ov-cell { flex-wrap: wrap; gap: 0 0.3rem; padding: 0.28rem 0.2rem; } /* ── Rink graphics (Systems and 5v5 Faceoff % by Dot) ─────────────────── Team Explorer and the Pre-Scout tabs (Babcock, Allen, Donskov, Segall) each draw a rink image at 100% width with labels absolutely placed on it. The labels are sized in rem, so on a phone the rink shrank and the labels didn't: ranks sat on top of percentages. Here the rink box is a size container and every label, and its gap above the dot, is a share of the rink's width (cqw). */ .h2h-overview > div[style^="position:relative;width:100%"] { container-type: inline-size; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"] { font-size: 3.7cqw !important; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"] > div[style*="font-size:1.05rem"] { font-size: 3.7cqw !important; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"] > div[style*="font-size:0.8rem"] { font-size: 2.7cqw !important; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"][style*="- 0.55rem"] { transform: translate(-50%, calc(-100% - 1.5cqw)) !important; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"][style*="- 0.8rem"] { transform: translate(-50%, calc(-100% - 2.2cqw)) !important; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"][style*="- 0.5rem"] { transform: translate(-50%, calc(-100% - 1.4cqw)) !important; } .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"][style*="- 1rem"] { transform: translate(-50%, calc(-100% - 2.4cqw)) !important; } /* Faceoff % by Dot (its labels are the ones with a 0.8rem / 0.5rem gap): placed above its dot, the top row ran off the rink and the bottom row covered the DZ / OZ markings between the rows. Each label sits centred on its own dot instead: top row ~14-35% of the rink's height, centre 40-60%, bottom row 65-86%, the markings (~44-58%, at the ends) clear. */ .h2h-overview > div[style^="position:relative;width:100%"] > div[style*="position:absolute"]:is([style*="- 0.8rem"], [style*="- 0.5rem"]) { transform: translate(-50%, -50%) !important; } /* ── Segment Stats (EDM Tools; the Trend window's segstats view) ───────── Scoped to #segment-stats-content so the Segment Report's off-screen print layout (#segrep-print-root, laid out at 970px) is untouched. Header actions wrap, the section buttons are a swipe strip, every side-by-side layout stacks, the KPI tiles go three across, and the tables still wider than a phone scroll sideways one table at a time. */ #segment-stats-content .segstats-header { flex-wrap: wrap; gap: 0.4rem; } #segment-stats-content .segstats-header-actions { flex-wrap: wrap; flex-shrink: 1; gap: 6px; } #segment-stats-content .segstats-sections { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #segment-stats-content .segstats-sections::-webkit-scrollbar { display: none; } #segment-stats-content .segstats-sections > * { flex-shrink: 0; } #segment-stats-content .segrep-two, #segment-stats-content .segrep-three, #segment-stats-content .segrep-cover-grid, #segment-stats-content .segrep-lr-notes, #segment-stats-content .segrep-lr-cols, #segment-stats-content .segrep-ch-grid { grid-template-columns: minmax(0, 1fr); } #segment-stats-content .segrep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #segment-stats-content .segrep-kpi { padding: 5px 6px; min-width: 0; } #segment-stats-content .segrep-kpi-v { font-size: 1.1rem; } #segment-stats-content .segrep-ptable, #segment-stats-content .segrep-gametable, #segment-stats-content .segrep-units, #segment-stats-content .segrep-fotable, #segment-stats-content .segrep-sit, #segment-stats-content .segrep-gc, #segment-stats-content .segrep-stats, #segment-stats-content .segstats-table { display: block; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* ── Skills Calendar ───────────────────────────────────────────────────── The month grid had a 560px floor and slid sideways. All seven days fit the width now: tighter cells, game rows as just the opponent's logo, drill chips a size down (still one line each, ellipsis). */ #skills-calendar-overlay .skc-body { overflow-x: hidden; } #skills-calendar-overlay .skc-cal-scroll { overflow-x: hidden; } #skills-calendar-overlay .skc-weekday-row, #skills-calendar-overlay .skc-cal-grid { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); } #skills-calendar-overlay .skc-weekday-row { padding: 0 0.3rem; } #skills-calendar-overlay .skc-weekday-row div { font-size: 0.58rem; letter-spacing: 0; } #skills-calendar-overlay .skc-cal-grid { gap: 3px; padding: 0.3rem; } #skills-calendar-overlay .skc-day { min-height: 3.6rem; padding: 3px; gap: 2px; border-radius: 6px; } #skills-calendar-overlay .skc-daynum { font-size: 0.62rem; } #skills-calendar-overlay .skc-game-row { font-size: 0; gap: 0; } #skills-calendar-overlay .skc-chips { gap: 2px; } #skills-calendar-overlay .skc-chip { font-size: 0.5rem; padding: 1px 2px; border-radius: 3px; } /* ── Coach's Challenges ───────────────────────────────────────────────── Its controls filled the whole window and left #cc-content 0px tall. The page scrolls as one, controls scrolling away, like League Stats. */ #coach-challenges-overlay > .trend-modal { width: 100vw !important; max-width: none !important; border-radius: 0; padding: 0.6rem 0.6rem 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #coach-challenges-overlay > .trend-modal > * { flex-shrink: 0; } #cc-content { flex: none !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* Team Report, Officials Report and Game Log are fixed-column tables (560-1100px): the report scrolls sideways as one table, first column (team / referee / date) pinned. The Overview's charts already fit. */ #cc-content:has(> [style*="grid-template-columns"], > .sched-game-row) { overflow-x: auto !important; overscroll-behavior-x: none; } #cc-content > [style*="grid-template-columns"], #cc-content > .sched-game-row, #cc-content > .sched-detail-row { width: max-content; min-width: 100%; } #cc-content > [style*="grid-template-columns"] > :first-child, #cc-content > .sched-game-row > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); } #cc-content > [style*="position:sticky"] > :first-child { background: var(--surface2); } /* ── Goal Categories ───────────────────────────────────────────────────── The league table already scrolls in #gc-table-wrap; pin Rank / Team. The controls took the top half of the screen: dividers go, gaps tighten, and the 18 segment buttons become one swipeable strip. */ #goal-cats-overlay .trend-modal-header { gap: 0.35rem; } #goal-cats-overlay .trend-modal-header > div { gap: 0.35rem 0.5rem !important; } #goal-cats-overlay span[style*="width:1px;height:18px"] { display: none; } #gc-segment-bar { flex-wrap: nowrap !important; overflow-x: auto; max-width: calc(100vw - 6rem); -webkit-overflow-scrolling: touch; scrollbar-width: none; } #gc-segment-bar::-webkit-scrollbar { display: none; } #gc-segment-bar > * { flex-shrink: 0; } /* Four control rows: GF/GA + Raw/Per Game, Type + Team, From/To, then Segment + Search + Print + Close together. The wrappers dissolve (display: contents) so every control is a direct flex item of the header, put in place with `order`; three of the hidden dividers come back as zero-height full-width line breaks. Children of the controls box: 1 GF/GA, 3 Raw/PG, 5 Type, 7 Team, 9 Segment, 11 dates; the dates box: 1-4 From/To, 5 divider, 6 Search. */ #goal-cats-overlay .trend-modal-header { justify-content: flex-start; align-items: center; } #goal-cats-overlay .trend-modal-header > h2 { flex-basis: 100%; } #goal-cats-overlay .trend-modal-header > div, #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > div:last-child { display: contents !important; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > :nth-child(1), #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > :nth-child(3) { order: 1; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > :nth-child(5), #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > :nth-child(7) { order: 3; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > div:last-child > * { order: 5; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > :nth-child(9), #goal-cats-overlay #gc-search-btn, #gc-print-btn, #gc-close { order: 7; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > span:nth-child(4), #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > span:nth-child(8), #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > div:last-child > span:nth-child(5) { display: block; flex-basis: 100%; width: 0 !important; height: 0 !important; background: none !important; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > span:nth-child(4) { order: 2; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > span:nth-child(8) { order: 4; } #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > div:last-child > span:nth-child(5) { order: 6; } /* The segment strip takes whatever the three buttons leave and swipes. */ #goal-cats-overlay .trend-modal-header > div:nth-of-type(1) > :nth-child(9) { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; } #goal-cats-overlay #gc-segment-bar { max-width: none; min-width: 0; flex: 1 1 0; } /* A diagonal drag past the table's edge rubber-banded it into blank space. */ #gc-table-wrap, #goal-cats-overlay > .trend-modal { overscroll-behavior: none; } #gc-table-wrap .gc-rank-table td.gc-team-cell, #gc-table-wrap .gc-rank-table th.gc-team-th { position: sticky; left: 0; background: var(--surface); box-shadow: 1px 0 0 var(--border); } #gc-table-wrap .gc-rank-table td.gc-team-cell { z-index: 1; } #gc-table-wrap .gc-rank-table th.gc-team-th { z-index: 3; } #gc-table-wrap .gc-rank-table tbody tr:nth-child(even) td.gc-team-cell, #gc-table-wrap .gc-rank-table tr.gc-avg-row td.gc-team-cell { background: var(--surface2); } /* Logo + abbreviation instead of the full name (gcTeamName). */ #gc-table-wrap .gc-name-full { display: none; } #gc-table-wrap .gc-name-short { display: inline; font-weight: 600; } /* ── Daily Lineups (view) ──────────────────────────────────────────────── The day view already fits a phone. The month calendar is seven ~47px columns: there, each day shows its date and a small wrapping badge ("GM03 / vs SEA", "PRACTICE"), and the mini lineup is hidden -- tapping the day opens it in full. */ /* Day view: a size down so long surnames ("41 STONEHOUSE") fit their slot rather than ending in an ellipsis. */ /* One scroller (#lineup-tool-root) instead of a lineup box under a fixed ~150px date header: the header is one compact sticky bar (date, then Calendar / Copy from / Save on the right), so the lineup gets the height -- in landscape the old box was ~150px tall. */ #lineup-tool-overlay .lut-day-body { flex: none; overflow: visible; min-height: auto; } #lineup-tool-overlay .lut-day-topbar { position: sticky; top: 0; z-index: 5; background: var(--surface); gap: 0.4rem; padding: 0.3rem 0 0.4rem; margin-bottom: 0.5rem; } #lineup-tool-overlay .lut-day-topbar > :first-child { flex: 1 1 auto; min-width: 0; } #lineup-tool-overlay .lut-day-title { font-size: 0.88rem; line-height: 1.2; } #lineup-tool-overlay .lut-day-sub { font-size: 0.62rem; } #lineup-tool-overlay .lut-day-actions { gap: 0.3rem; flex-shrink: 0; } #lineup-tool-overlay .lut-back-btn, #lineup-tool-overlay .lut-save-btn { padding: 0.3rem 0.5rem; font-size: 0.72rem; white-space: nowrap; } #lineup-tool-overlay .lut-save-status { display: none; } #lineup-tool-overlay .lut-slot, #lineup-tool-overlay .lut-pick-chip { font-size: 0.7rem; padding-left: 0.15rem; padding-right: 0.15rem; } #lineup-tool-overlay .lut-cal-grid { gap: 3px; overflow-x: hidden; flex: none; min-height: auto; } #lineup-tool-overlay .lut-cal-cell { padding: 0.2rem; min-height: 56px; gap: 0.15rem; overflow: hidden; border-radius: 6px; } #lineup-tool-overlay .lut-cal-head { flex-direction: column; align-items: stretch; gap: 0.15rem; } #lineup-tool-overlay .lut-cal-badges { flex-direction: column; gap: 2px; } #lineup-tool-overlay .lut-badge, #lineup-tool-overlay .lut-badge-game-home, #lineup-tool-overlay .lut-badge-game-away { font-size: 0.5rem; line-height: 1.15; padding: 0.1rem 0.15rem; border-radius: 3px; white-space: normal; text-align: center; letter-spacing: 0; } #lineup-tool-overlay .lut-badge-practice { font-size: 0.44rem; } #lineup-tool-overlay .lut-cal-lines, #lineup-tool-overlay .lut-cal-extra { display: none; } #lineup-tool-overlay .lut-cal-dow { font-size: 0.58rem; letter-spacing: 0; } #lineup-tool-overlay .lut-cal-month-label { font-size: 0.95rem; min-width: 0; } /* ── Player Talks ───────────────────────────────────────────────────── js/player-talks.js switches to its phone view at this same width: Log a Talk first, then a three-day grid ending today. The page scrolls as one column (#player-talks-root is the scroller), so the grid's own scroll box is let go and its header row pins to the top of the page instead. Today's column is tinted. */ #player-talks-root .ptk-topbar { flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.5rem; } #player-talks-root .ptk-cal-month-label { font-size: 0.95rem; min-width: 0; } #player-talks-root .ptk-body { flex: none; min-height: 0; flex-direction: column; gap: 0.75rem; overflow: visible; } #player-talks-root .ptk-matrix-col { overflow: visible; } #player-talks-root .ptk-matrix-scroll { flex: none; overflow: visible; } #player-talks-root .ptk-matrix { width: 100%; table-layout: fixed; font-size: 0.78rem; } #player-talks-root .ptk-th-player { width: 34%; min-width: 0; } #player-talks-root .ptk-td-player { white-space: normal; overflow-wrap: anywhere; padding: 0.4rem; } #player-talks-root .ptk-day-th, #player-talks-root .ptk-cell { min-width: 0; } #player-talks-root .ptk-cell { height: 38px; } #player-talks-root .ptk-day-num { font-size: 0.8rem; } #player-talks-root .ptk-day-dow { font-size: 0.66rem; } #player-talks-root th.ptk-today { background: var(--highlight-bg); } #player-talks-root td.ptk-today { background: rgba(0, 102, 204, 0.05); } #player-talks-root .ptk-chip { font-size: 0.72rem; padding: 0.25rem 0.35rem; margin-bottom: 3px; } /* The form, kept short so the grid shows under it: Player | Coach, then Date | Meeting Type, then a one-line Notes box (drag to grow) and the button. Text a size up for thumbs. */ #player-talks-root .ptk-panel { order: -1; width: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem; padding: 0.7rem; } #player-talks-root .ptk-panel > * { grid-column: 1 / -1; min-width: 0; } #player-talks-root .ptk-panel > .ptk-field-half { grid-column: auto; } #player-talks-root .ptk-field select, #player-talks-root .ptk-field input, #player-talks-root .ptk-field textarea, #player-talks-root .ptk-locked-coach { font-size: 0.9rem; padding: 0.5rem; width: 100%; } #player-talks-root .ptk-field textarea { min-height: 0; height: 38px; } #player-talks-root .ptk-panel h3 { margin: 0; font-size: 0.85rem; } #player-talks-root .ptk-submit-btn { padding: 0.6rem; font-size: 0.95rem; } #player-talks-root .ptk-submit-status:empty { display: none; } /* ── EDM Tools > Faceoffs ──────────────────────────────────────────────── Desktop is filters, then a clipped side-by-side row: the stats table in a fixed 960px column beside the 480px rink. On a phone: filters, then the table full width (stats swipe sideways, checkbox and Center pinned), then the rink and its All/Clear/Left/Right/OZ/NZ/DZ buttons, and the whole page scrolls as one. The column widths are inline, hence !important. Scoring Chances shares this window and keeps its own scroll box, so the window scrolling changes nothing there. */ #edm-stats-overlay > .trend-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #edm-stats-overlay > .trend-modal > * { flex-shrink: 0; } #edm-content-faceoffs, #edm-content-faceoffs > div { flex: none !important; height: auto !important; min-height: 0; } /* Scoring Chances, same window: its content grows to full height too, so its filters scroll away rather than holding the top third. */ #edm-chances-panel, #edm-chances-main-wrap { flex: none !important; height: auto !important; overflow: visible !important; } #edm-content-faceoffs > div > div[style*="overflow:hidden"] { flex-direction: column !important; overflow: visible !important; gap: 1.25rem !important; flex: none !important; } #edm-content-faceoffs div[style*="width:960px"], #edm-content-faceoffs div[style*="width:480px"] { width: 100% !important; } #edm-table-wrap { overflow-x: auto !important; overflow-y: visible !important; flex: none !important; -webkit-overflow-scrolling: touch; } #edm-table-wrap table { width: max-content; min-width: 100%; } #edm-table-wrap th:nth-child(1), #edm-table-wrap td:nth-child(1) { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 56px; min-width: 56px; max-width: 56px; padding-left: 0.2rem; padding-right: 0.2rem; } #edm-table-wrap th:nth-child(1) .cc-dd-action { display: block; width: 100%; margin: 1px 0; padding: 0.2rem 0; font-size: 0.66rem; } #edm-table-wrap th:nth-child(2), #edm-table-wrap td:nth-child(2) { position: sticky; left: 56px; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border); white-space: nowrap; padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.78rem; text-align: left; } #edm-table-wrap thead th:nth-child(-n+2) { z-index: 3; } #edm-table-wrap tbody tr:nth-child(even) td:nth-child(-n+2), #edm-table-wrap tfoot td:nth-child(-n+2) { background: var(--surface2); } /* The rink: a tall drawing (823x1920) sized to the container's height. */ #edm-content-faceoffs div[style*="width:480px"] > div[style*="flex:1"] { flex: none !important; height: 460px; } /* Edge to edge (Oct 11). On an iPhone held sideways Safari kept the page out of the notch / rounded-corner strips and filled them with the page background, so the navy banner stopped short of both sides. The viewport meta now has viewport-fit=cover (index.html), the page draws under those strips, and the banner, the home page and every page window pad their content by the safe-area insets instead. 0 in portrait and on anything without a notch, so nothing else moves. */ #main-header { padding-left: calc(0.6rem + env(safe-area-inset-left)) !important; padding-right: calc(0.6rem + env(safe-area-inset-right)) !important; } #app-layout.visible { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } #schedule-overlay > .trend-modal, #edm-stats-overlay > .trend-modal, #standings-overlay > .trend-modal, #stat-rank-overlay > .trend-modal, #team-overview-overlay > .trend-modal, #goal-cats-overlay > .trend-modal, #lineup-tool-overlay > .trend-modal, #player-talks-overlay > .trend-modal, #h2h-overlay > .trend-modal, #coach-challenges-overlay > .trend-modal { padding-left: calc(0.6rem + env(safe-area-inset-left)) !important; padding-right: calc(0.6rem + env(safe-area-inset-right)) !important; } #trend-overlay > .trend-modal, #skills-calendar-overlay > .trend-modal, #post-game-awards-overlay > .trend-modal, #pk-plus-minus-overlay > .trend-modal, #practice-planning-overlay > .trend-modal, #slc-overlay > .trend-modal, #po-series-overlay > .trend-modal { padding-left: calc(1.5rem + env(safe-area-inset-left)) !important; padding-right: calc(1.5rem + env(safe-area-inset-right)) !important; } /* Player Explorer (Oct 17): the page scrolls as one (controls scroll away), the table at its natural height swiping sideways with # and the player pinned, view tabs and pill rows one swipe strip each. The card is a full-screen sheet on a phone, the desktop drawer on an iPad held upright. Text inputs 16px so iOS never zooms in on focus. */ #player-explorer-overlay > .trend-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 0.6rem 16px 0.5rem !important; } #player-explorer-overlay > .trend-modal > * { flex-shrink: 0; } #player-explorer-root { flex: none; display: block; } #player-explorer-root .pe { display: block; } #player-explorer-root .pe-controls { gap: 0.4rem 0.6rem; } /* Manpower picker: drops under the whole control bar, inside the screen. */ #player-explorer-root .pe-controls { position: relative; } #player-explorer-root .pe-mp-ctl { position: static; } #player-explorer-root .pe-mp-pop { left: 0; right: 0; width: auto; top: 100%; font-size: 0.9rem; } #player-explorer-root .pe-mp-pop label { padding: 0.3rem 0; } #player-explorer-root .pe-mp-btn { font-size: 0.9rem; padding: 0.38rem 0.65rem; } #player-explorer-root .pe-ctl { max-width: 100%; } #player-explorer-root .pe-ctl .pe-pills { overflow-x: auto; scrollbar-width: none; max-width: calc(100vw - 32px - 4rem); } #player-explorer-root .pe-ctl .pe-pills::-webkit-scrollbar { display: none; } #player-explorer-root .pe-pills button { padding: 0.38rem 0.65rem; } #player-explorer-root .pe-search { width: 100%; } #player-explorer-root .pe input[type=search], #player-explorer-root .pe input[type=date], #player-explorer-root .pe input[type=number], #player-explorer-root .pe select { font-size: 16px; } #player-explorer-root .pe input[type=search] { width: 100%; } #player-explorer-root .pe-count { margin-left: 0; width: 100%; } #player-explorer-root .pe-table-wrap { overflow-x: auto; overflow-y: visible; max-height: none; } #player-explorer-root .pe-table thead th { position: static; } #player-explorer-root .pe-table thead th.pe-s1, #player-explorer-root .pe-table thead th.pe-s2 { position: sticky; } #player-explorer-root .pe-tiles { grid-template-columns: repeat(2, 1fr); } #player-explorer-root .pe-cb { padding: 0.9rem 16px 1.5rem; } #player-explorer-root .pe-ch { padding: 0.8rem 16px 0.65rem; } #player-explorer-root .pe-combos { flex: none; display: block; } #player-explorer-root .pe-movers { flex: none; overflow: visible; } #player-explorer-root .pe-mates { grid-template-columns: 1fr; } #player-explorer-root .pe-panel input, #player-explorer-root .pe-panel select, #player-explorer-root .pe-panel textarea { font-size: 16px; } #player-explorer-root .pe-combos[hidden] { display: none; } #player-explorer-root .pe-cb-main { display: block; } #player-explorer-root .pe-cb-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; margin-bottom: 0.6rem; } #player-explorer-root .pe-cb-rg { flex-wrap: nowrap; } #player-explorer-root .pe-cb-rg .pe-st { display: none; } #player-explorer-root .pe-cb-chip { white-space: nowrap; padding: 0.35rem 0.6rem; } #player-explorer-root .pe-cb-hint { display: none; } #player-explorer-root .pe-cb-board { overflow: visible; } #player-explorer-root .pe-cb-slot { min-width: 0; flex: 1 1 6.5rem; padding: 0.45rem 0.5rem; } #player-explorer-root .pe-cb-acts { margin-left: 0; width: 100%; } #player-explorer-root .pe-cb-row { flex-direction: column; gap: 0; } #player-explorer-root .pe-cb-row .k { width: auto; } @media (max-width: 700px) { #player-explorer-root .pe-card { top: var(--hdr-h, 0px); width: 100vw; height: calc(100vh - var(--hdr-h, 0px)); height: calc(100dvh - var(--hdr-h, 0px)); z-index: 400; } #player-explorer-root .pe-scrim { z-index: 399; } #player-explorer-root .pe-ch .num { font-size: 1.5rem; } } } /* iPad in landscape (Oct 16). 1024-1376px wide and touch, so it keeps the desktop layout (an iPad held upright gets the phone layout above). The desktop pages are built for 1280px+ wide and ~900px tall; these are the places that broke, measured at 1024x768 and 1180x820 with this season's data. A desktop window never matches (fine pointer). */ @media screen and (pointer: coarse) and (orientation: landscape) and (min-height: 501px) and (max-width: 1400px) { /* Touch, so as on a phone: no rubber-band, no iOS text inflation. */ html, body, .trend-modal-overlay, .trend-modal-overlay * { overscroll-behavior: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* League Stats: the Fixed view squeezes 32 rows into the window's height; at 768px tall the last six were cut off with no way to reach them. The page scrolls instead, every row its natural height, and team names are abbreviations (srkTeamName) -- the full names were cut to "Edmo...". */ #stat-rank-overlay > .trend-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #stat-rank-overlay > .trend-modal > * { flex-shrink: 0; } #stat-rank-content { flex: none !important; height: auto !important; overflow-y: visible !important; } #stat-rank-content > div, #stat-rank-content .srk-fixed-grid { flex: none !important; } #stat-rank-content .srk-fixed-col { overflow: visible; } #stat-rank-content .srk-fixed-row { flex: none; height: 28px; } #stat-rank-content div[style*="border-left:3px"] { flex: none !important; min-height: 28px; } #stat-rank-content .srk-name-full { display: none; } #stat-rank-content .srk-name-short { display: inline; } /* Faceoffs: the stats table (a fixed 960px column) beside the 480px rink was clipped at the window's edge. The table takes what the rink leaves and its stats swipe sideways (checkbox and Center pinned); rink 360px. */ #edm-content-faceoffs div[style*="width:960px"] { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; } #edm-content-faceoffs div[style*="width:480px"] { width: 360px !important; flex: none !important; } #edm-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } #edm-table-wrap table { width: max-content; min-width: 100%; } #edm-table-wrap th:nth-child(1), #edm-table-wrap td:nth-child(1) { position: sticky; left: 0; z-index: 2; background: var(--surface); } #edm-table-wrap th:nth-child(2), #edm-table-wrap td:nth-child(2) { position: sticky; left: var(--fo-col1-w, 56px); z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border); } #edm-table-wrap thead th:nth-child(-n+2) { z-index: 3; } #edm-table-wrap tbody tr:nth-child(even) td:nth-child(-n+2), #edm-table-wrap tfoot td:nth-child(-n+2) { background: var(--surface2); } /* Standings: logo + abbreviation (standingsTeamName), as on a phone, and the table at its natural width (its fixed columns clipped the xG figures at 1024px), swiping sideways with the team column pinned. */ #standings-content .standings-tbl { width: max-content; min-width: 100%; table-layout: auto; } #standings-content .standings-tbl col { width: auto !important; } #standings-content .standings-tbl .col-team { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); white-space: nowrap; } #standings-content .standings-tbl tr:nth-child(even) td.col-team { background: var(--surface2); } #standings-content .standings-tbl tr.standings-selected td.col-team { background: var(--accent-light); } #standings-content .standings-tbl .st-name-full { display: none; } #standings-content .standings-tbl .st-name-short { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; vertical-align: middle; } #standings-content .standings-tbl .st-name-logo { width: 20px; height: 20px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Player tables (Pre-Scout, Team Explorer): a long name wraps instead of being cut off with an ellipsis. */ .ts-cell.ts-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; } } @media screen and (pointer: coarse) and (orientation: landscape) and (min-height: 501px) and (max-width: 1200px) { /* Scores: three games per line on a 1024px iPad (four squeezed the team names). */ .lg-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }