/* * RotoBaller — NFL Gameday (rb-nfl-gameday.php). * Two views off one payload: the All Games board (a field per live game) and one game's detail. * * SURFACES: white on white. Cards are white, the page behind them is white, and separation comes * from a hairline border plus a real drop shadow — never a grey tile on a grey ground. * * TYPE: Outfit throughout, Anton for scores and big numbers. The Anton declarations carry * !important because style-mobile.css sets `font-family: Outfit, sans-serif !important` on a global * element list that includes span and div — no specificity beats that, so it has to answer in kind. * * SCOPING: every selector carries #rb-nflgd. The theme sets font-size, line-height and family * through broad selectors that outrank plain classes. */ /* ---------- boot placeholder: the board's own tiles, in grey ---------- * rb_nflgd_mount_html() ships .rb-gd-boot inside the mount; the first render replaces it. Sizes * are the rendered board's (prod, 2026-10-05): 3px load lane, control bar 50px (120px once it * wraps on a phone), chips 72px in two rows of eight from 820px (else one 62px strip of 96px * chips), cards 411px (446px single-column) on the board's 1/2/3-column grid. Grey + sweep come * from rb-skeleton.css (.rb-skel, .rb-skel--shimmer). * * Why it must hold space at all: the first real paint only happens once the fetch resolves * (renderInner() returns early while !state.data), so an empty mount let the footer paint near * the top and then get shoved down. 94vh, not less: ~73px of page furniture sits above the mount * on a phone, so 82vh still left the footer inside a 375x812 viewport. */ #rb-nflgd .rb-gd-boot{ min-height:94vh; padding-top:3px; } /* The theme margins divs in the content area; the board's own boxes sit flush. */ #rb-nflgd .rb-gd-boot, #rb-nflgd .rb-gd-boot div{ margin:0; } #rb-nflgd .rb-gd-boot .rb-skel{ display:block; } #rb-nflgd .rb-gd-boot-bar{ height:120px; padding:2px 10px 0; } #rb-nflgd .rb-gd-boot-bar .rb-skel{ width:289px; max-width:100%; height:34px; margin:0 auto; border-radius:17px; } #rb-nflgd .rb-gd-boot-chips{ display:flex; gap:6px; padding:0 10px 12px; overflow:hidden; } #rb-nflgd .rb-gd-boot-chips .rb-skel{ flex:0 0 96px; height:62px; border-radius:8px; } #rb-nflgd .rb-gd-boot-board{ display:grid; grid-template-columns:1fr; gap:11px; padding:0 10px; } #rb-nflgd .rb-gd-boot-board .rb-skel{ height:446px; border-radius:14px; } @media (min-width:560px){ #rb-nflgd .rb-gd-boot-board{ grid-template-columns:repeat(2,1fr); row-gap:18px; } #rb-nflgd .rb-gd-boot-board .rb-skel{ height:411px; } } @media (min-width:820px){ #rb-nflgd .rb-gd-boot-bar{ height:50px; padding-top:2px; } #rb-nflgd .rb-gd-boot-bar .rb-skel{ width:351px; height:38px; margin:0; border-radius:19px; } #rb-nflgd .rb-gd-boot-chips{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; } #rb-nflgd .rb-gd-boot-chips .rb-skel{ height:72px; } } @media (min-width:1180px){ #rb-nflgd .rb-gd-boot-board{ grid-template-columns:repeat(3,1fr); } } /* ── field card ───────────────────────────────────────────────── */ #rb-nflgd .rb-gd-card .fieldwrap{ padding:0; line-height:0; position:relative; } #rb-nflgd .rb-gd-lastplay{ display:flex; align-items:baseline; gap:9px; padding:8px 13px 10px; border-top:1px solid var(--hair); font-size:var(--fs-2); line-height:1.4; } #rb-nflgd .rb-gd-lastplay .k{ flex:0 0 auto; font-size:var(--fs-1); letter-spacing:.09em; text-transform:uppercase; color:var(--mute); font-weight:800; } #rb-nflgd .rb-gd-lastplay .d{ color:var(--ink); } #rb-nflgd .rb-gd-card > .sit{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 13px; border-top:1px solid var(--hair); font-size:var(--fs-2); background:var(--card2); } #rb-nflgd .rb-gd-card > .sit .dd{ font-weight:700; } #rb-nflgd .rb-gd-card > .sit .dd i{ font-style:normal; font-weight:500; color:var(--mute); } #rb-nflgd .rb-gd-card > .sit .od{ color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap; } /* ── win probability ──────────────────────────────────────────── */ #rb-nflgd .rb-gd-wp{ padding:2px 13px 13px; } #rb-nflgd .rb-gd-wp .ends{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-3); font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:8px; } #rb-nflgd .rb-gd-wp .ends span{ display:inline-flex; align-items:center; gap:7px; } #rb-nflgd .rb-gd-wp .ends b{ font-weight:800; } #rb-nflgd .rb-gd-wp .sm{ width:22px; height:22px; object-fit:contain; display:block; flex:0 0 auto; } #rb-nflgd .rb-gd-wp .bar{ display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--hair); } #rb-nflgd .rb-gd-wp .bar i{ display:block; height:100%; } #rb-nflgd .rb-gd-wp .note{ font-size:var(--fs-2); color:var(--mute); margin-top:8px; } #rb-nflgd .rb-gd-wp .note b{ color:var(--ink2); font-weight:700; } /* The graph. The band between the line and the 50% mark is filled in whichever team's colour is ahead there, so who is winning reads before any number does. */ #rb-nflgd .rb-gd-wpchart{ display:block; width:100%; height:188px; overflow:visible; } /* pan-y, not none: a vertical swipe still scrolls the page and only a sideways drag scrubs. */ #rb-nflgd .rb-gd-wpwrap{ touch-action:pan-y; cursor:crosshair; position:relative; } /* The scale sits over the chart rather than in it: the drawing is stretched to a fixed height, and type cannot be stretched with it without smearing. */ /* The plot: scale in a gutter on the left, the drawing and everything laid over it in the box beside it. Overlays are placed as fractions of the box, so they land on the drawing's rules. */ /* --wpr: the right-hand margin the crests sit in, a crest wide plus air. */ #rb-nflgd .rb-gd-wp{ --wpc:40px; --wpr:52px; } @media (max-width:420px){ #rb-nflgd .rb-gd-wp{ --wpc:32px; --wpr:42px; } } #rb-nflgd .rb-gd-wpplot{ position:relative; padding-left:40px; padding-right:var(--wpr); margin:4px 0 2px; } #rb-nflgd .rb-gd-wpbox{ position:relative; } #rb-nflgd .rb-gd-wpscale{ position:absolute; left:0; top:0; bottom:0; width:40px; pointer-events:none; } #rb-nflgd .rb-gd-wpscale i{ position:absolute; right:7px; transform:translateY(-50%); font-style:normal; font-size:var(--fs-1); font-weight:700; color:var(--mute); line-height:1; } #rb-nflgd .rb-gd-wpchart .rbwp-cursor, #rb-nflgd .rb-gd-wpchart .rbwp-dot{ pointer-events:none; } /* The readout floats over the drawing, in the half the point being read is not in, so the card holds no empty band for it and the page never jumps under the finger driving it. */ #rb-nflgd .rb-gd-wpread{ position:absolute; left:40px; right:var(--wpr); top:0; z-index:2; padding:7px 10px 8px; background:var(--card); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .08s linear; } #rb-nflgd .rb-gd-wpread.on{ opacity:.97; visibility:visible; } #rb-nflgd .rb-gd-wpread .hd{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; font-size:var(--fs-2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-wpread .hd .c{ font-weight:800; color:var(--ink); letter-spacing:.04em; text-transform:uppercase; } #rb-nflgd .rb-gd-wpread .hd .s{ color:var(--mute); font-weight:600; } #rb-nflgd .rb-gd-wpread .hd .p{ margin-left:auto; font-weight:800; color:var(--blue); } #rb-nflgd .rb-gd-wpread .d{ font-size:var(--fs-2); line-height:1.4; color:var(--mute); margin-top:3px; } #rb-nflgd .rb-gd-wpread.on .d{ color:var(--ink2); } /* On a finished game the ends carry the crests only: the percentages would be the result, which the score already gives. */ #rb-nflgd .rb-gd-wp .ends.flat{ margin:2px 0 0; font-size:var(--fs-2); color:var(--mute); } /* ── injuries ─────────────────────────────────────────────────── */ /* Side by side on a desktop; one team over the other on a phone, where two columns pushed the home side off the screen. minmax(0,…) so a long name wraps instead of widening its column. */ #rb-nflgd .rb-gd-injgrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:var(--hair); border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-injside{ background:var(--card); padding:10px 12px 12px; min-width:0; } @media (max-width:619px){ #rb-nflgd .rb-gd-injgrid{ grid-template-columns:minmax(0,1fr); } } #rb-nflgd .rb-gd-injside .h{ display:flex; align-items:center; gap:8px; font-size:var(--fs-3); font-weight:800; margin-bottom:8px; } /* 33px, and the text pulled onto the crest's optical centre. Anton SC sits high in its own box, so a plain align-items:center left the name riding a couple of pixels above the badge. */ #rb-nflgd .rb-gd-injside .h .lg{ width:33px; height:33px; object-fit:contain; flex:0 0 auto; } #rb-nflgd .rb-gd-injside .none{ font-size:var(--fs-2); color:var(--mute); } #rb-nflgd .rb-gd-injside .r{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-injside .r:first-of-type{ border-top:0; } /* A centred line at the foot of a card pointing to the full tool on the main site. */ #rb-nflgd .rb-gd-more-link{ padding:11px 13px 13px; border-top:1px solid var(--hair); text-align:center; font-size:var(--fs-2); color:var(--mute); line-height:1.4; } #rb-nflgd .rb-gd-more-link a{ color:var(--blue); font-weight:700; text-decoration:none; } #rb-nflgd .rb-gd-more-link a:hover{ text-decoration:underline; } /* ── player news ── crest, name, then the headline on at most two lines. */ #rb-nflgd .rb-gd-nw{ display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:10px; padding:10px 0; border-top:1px solid var(--hair); color:var(--ink); text-decoration:none; } #rb-nflgd .rb-gd-nw .nb{ display:flex; flex-direction:column; gap:2px; min-width:0; } #rb-nflgd .rb-gd-injside .h + .rb-gd-nw, #rb-nflgd .rb-gd-nwlist .rb-gd-nw:first-child{ border-top:0; } #rb-nflgd .rb-gd-nw .sm{ width:22px; height:22px; object-fit:contain; display:block; margin-top:1px; } #rb-nflgd .rb-gd-nw .nn{ font-size:var(--fs-2); font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-nw .nt{ font-size:var(--fs-2); line-height:1.4; color:var(--ink2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #rb-nflgd .rb-gd-nw:hover .nt{ color:var(--blue); } #rb-nflgd .rb-gd-nwlist{ padding:0 13px 8px; border-top:1px solid var(--hair); } /* The players' box at half width beside the news: let its table shrink to the column. */ #rb-nflgd .rb-gd-boxnews > .rb-gd-card{ min-width:0; } /* The news ends at its last headline rather than stretching down the length of the box score. The box takes two thirds of the row, the news one. */ #rb-nflgd .rb-gd-pair.rb-gd-boxnews{ align-items:start; } @media (min-width:980px){ #rb-nflgd .rb-gd-pair.rb-gd-boxnews{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } } #rb-nflgd .rb-gd-injside .i{ min-width:0; } #rb-nflgd .rb-gd-injside .i b{ display:block; font-size:var(--fs-2); font-weight:700; line-height:1.25; } #rb-nflgd .rb-gd-injside .i span{ display:block; font-size:var(--fs-1); color:var(--mute); line-height:1.35; } #rb-nflgd .rb-gd-injside .st{ font-size:var(--fs-1); font-weight:800; letter-spacing:.05em; padding:3px 7px; border-radius:6px; white-space:nowrap; flex:0 0 auto; } #rb-nflgd .rb-gd-injside .st.out{ background:var(--turnbg); color:var(--turn); } #rb-nflgd .rb-gd-injside .st.q{ background:var(--warnbg); color:var(--warn); } #rb-nflgd .rb-gd-injside .st.d{ background:var(--chip); color:var(--chipink); } #rb-nflgd.rb-gd { --bg:#ffffff; --card:#ffffff; --card2:#f8fafc; --ink:#0b131e; --ink2:#36445a; --mute:#6b7888; --line:#e6ebf2; --hair:#eef2f7; --blue:#006DC8; --blue2:#1e7fd6; --tint:#e8f2fc; --live:#d92d20; --good:#11804f; --goodbg:#e6f8ee; --warn:#b45309; --warnbg:#fff5e4; --turn:#b3261e; --turnbg:#fdeceb; --chip:#eef2f7; --chipink:#4b5768; /* Tecmo Bowl field: a bright mown green, thick white lines, red yard numbers. */ --turf:#3f9c43; --turf2:#379038; --chalk:#ffffff; --yardnum:#d8352a; --yardstroke:#ffffff; --shadow:0 1px 2px rgba(11,19,30,.08), 0 4px 12px rgba(11,19,30,.10); --shadow2:0 2px 6px rgba(11,19,30,.10), 0 12px 30px rgba(11,19,30,.16); /* ── the type scale ──────────────────────────────────────────────────────────────── Five steps for the Outfit text, three for the Anton numerals, in place of the twenty-eight separate sizes this file used to carry. Half a pixel is not hierarchy — nobody can see a 0.5px step — so the spread was noise that made every change a hunt. The floor is 12px: below that text stops being read and starts being decoded, and on a 375px screen 191 elements used to sit at or under 11px. The desktop block lifts the whole tool by redefining these nine values, which is why almost nothing below needs a media query of its own. */ --fs-0:11px; /* box score column headings ONLY — see check-css-type-scale.py */ --fs-1:12px; /* uppercase labels, table headings, badges, fine print */ --fd-1s:17px; /* Anton: Top Scorers' points on a phone, 2px under --fd-1 (Alex, 2026-10-06) */ --fd-3s:30px; /* Anton: a finished tile's score, on a phone */ --fs-2:13px; /* secondary copy: meta lines, descriptions, table cells */ --fs-3:14px; /* body */ --fs-4:16px; /* card titles, player names, anything that leads a row */ --fs-5:19px; /* small display: team names */ --fd-1:19px; /* Anton: performer values, the pregame win number */ --fd-2:24px; /* Anton: the mini header score */ --fd-3:32px; /* Anton: the score */ font-family:'Outfit',-apple-system,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); font-size:var(--fs-3); line-height:1.4; -webkit-text-size-adjust:100%; margin:0 0 22px; padding:0 0 16px; } /* In dark the tool is a panel sitting on the site's white page, so it needs its own soft edge rather than running to the corners of a light document. */ #rb-nflgd.rb-gd.is-dark{ border-radius:18px; padding:10px 0 20px; } #rb-nflgd.rb-gd.is-dark { --bg:#050910; --card:#1a2434; --card2:#212c3e; --ink:#eef3fa; --ink2:#c6d2e2; --mute:#93a4ba; --line:#31405a; --hair:#27334a; --blue:#57a9f7; --blue2:#79bbfa; --tint:#122b45; --live:#ff6257; --good:#37d492; --goodbg:#0d3a2a; --warn:#fbbf24; --warnbg:#3b2d0c; --turn:#ff7a6e; --turnbg:#3d1815; --chip:#22304a; --chipink:#b3c3d8; /* lighter than a naive dark-mode green: the turf still has to read as grass, not as a dark tile */ --turf:#35843a; --turf2:#2e7733; --chalk:#f2f7f2; --yardnum:#ff5a4a; --yardstroke:#0d2a12; --shadow:0 1px 2px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.5); --shadow2:0 2px 6px rgba(0,0,0,.6), 0 14px 34px rgba(0,0,0,.62); } /* ── the reset ────────────────────────────────────────────────────────────────────────── Every selector here is ID + TYPE (0,1,0,1) or ID + * (0,1,0,0), never ID + CLASS + TYPE. That is deliberate and it is load-bearing. A component rule like #rb-nflgd .rb-gd-chip scores (0,1,1,0); if the reset carried .rb-gd as well it would score (0,1,1,1) and beat the component, quietly stripping whatever the component set and leaving the properties the reset does not mention looking correct. That failure is invisible in the source, because both rules read as if they should work, and it has cost three separate rounds of "the chips still look wrong" — most recently font-size:inherit here outranking the 13.5px on .rb-gd-more, which capped it at 12.5px. Keep .rb-gd off these lines. */ #rb-nflgd *, #rb-nflgd *::before, #rb-nflgd *::after{ box-sizing:border-box; } #rb-nflgd *{ font-family:inherit; line-height:inherit; letter-spacing:normal; } /* table/thead/tbody/tr belong on this list even though they draw no text themselves: the theme sets 11px on tables, and any cell that does not name its own step would quietly inherit it, putting text back under the 12px floor by omission rather than by decision. */ #rb-nflgd p, #rb-nflgd div, #rb-nflgd span, #rb-nflgd td, #rb-nflgd th, #rb-nflgd table, #rb-nflgd thead, #rb-nflgd tbody, #rb-nflgd tr, #rb-nflgd button, #rb-nflgd b, #rb-nflgd i, #rb-nflgd em, #rb-nflgd u{ font-size:inherit; margin:0; } #rb-nflgd table{ border:0; background:none; width:100%; margin:0; } #rb-nflgd tr, #rb-nflgd td, #rb-nflgd th{ background:none; border-left:0; border-right:0; } #rb-nflgd img{ max-width:100%; } #rb-nflgd .num{ font-variant-numeric:tabular-nums; } #rb-nflgd a{ color:var(--blue); text-decoration:none; } /* Deliberately ID + TYPE (0,1,0,1), NOT #rb-nflgd.rb-gd button (0,1,1,1): a class-bearing component rule like #rb-nflgd .rb-gd-chip scores (0,1,1,0) and must WIN. When this reset was the more specific of the two it silently stripped the padding, border and background off every styled button — the chips read as bare text against the tile edge, and the back button lost its fill, while min-width, radius and shadow survived because the reset does not set them. */ #rb-nflgd button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } #rb-nflgd.rb-gd :focus-visible{ outline:2px solid var(--blue2); outline-offset:2px; border-radius:6px; } /* ══ control bar ══════════════════════════════════════════════ */ #rb-nflgd .rb-gd-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:2px 10px 10px; } #rb-nflgd .rb-gd-bar .sp{ flex:1 1 auto; } #rb-nflgd .rb-gd-sel{ position:relative; display:inline-flex; align-items:center; height:34px; padding:0 27px 0 13px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink2); font-size:var(--fs-2); font-weight:700; white-space:nowrap; box-shadow:var(--shadow); } #rb-nflgd .rb-gd-sel::after{ content:""; position:absolute; right:11px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:2px solid var(--mute); border-bottom:2px solid var(--mute); transform:rotate(45deg); } #rb-nflgd .rb-gd-sel select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font:inherit; } #rb-nflgd .rb-gd-ico{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--mute); box-shadow:var(--shadow); } #rb-nflgd .rb-gd-ico svg{ width:16px; height:16px; } #rb-nflgd .rb-gd-ico:hover{ color:var(--blue); border-color:var(--blue); } #rb-nflgd .rb-gd-upd{ font-size:var(--fs-2); color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; } #rb-nflgd .rb-gd-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); flex:0 0 auto; } #rb-nflgd.rb-gd.is-live .rb-gd-dot{ animation:rb-gd-pulse 1.5s ease-in-out infinite; } @keyframes rb-gd-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} } /* ══ game chips — same shape as the week board's rb-gc-chip ════ */ #rb-nflgd .rb-gd-chips{ display:flex; gap:6px; padding:0 10px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-padding-left:10px; scrollbar-width:none; } #rb-nflgd .rb-gd-chips::-webkit-scrollbar{ display:none; } /* Show all: the same chips as a grid, four across on a phone. A sixteen-game Sunday is two rows there and two on a desktop, which is the whole slate without a single sideways swipe. */ #rb-nflgd .rb-gd-chips.is-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; overflow:visible; scroll-snap-type:none; } /* A grid cell is about 79px against the strip's 96, so the strip's padding, its 30px floor under the abbreviation and its 16px crest no longer fit together — the score was printing through the right border on the live chip, which also carries a possession dot. */ #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip{ min-width:0; padding:4px 5px 3px; } #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip .s{ gap:4px; } #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip .s em{ min-width:0; } #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip .s .lg{ width:14px; height:14px; } /* It lives in the control bar now, beside the other switches. Under the rail it was a full-width block sitting between the chips and the board, which read as a divider in the page rather than as a switch on the strip above it. */ #rb-nflgd .rb-gd-chipall{ display:inline-flex; align-items:center; height:30px; padding:0 11px; border-radius:99px; background:var(--chip); border:1px solid transparent; font-size:var(--fs-1); line-height:1; font-weight:800; color:var(--chipink); white-space:nowrap; } #rb-nflgd .rb-gd-chipall:hover{ color:var(--blue); border-color:var(--blue2); } #rb-nflgd .rb-gd-chipall[aria-expanded="true"]{ background:var(--blue); color:#fff; } @media (min-width:820px){ #rb-nflgd .rb-gd-chips.is-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); } } /* Metric-for-metric the week board's rb-gc-chip: 96px wide, 5px 8px 4px of padding, a 16px crest and 12px type. The clock text is the short form for the same reason — anything longer than "Sun 1:00 PM" runs through the border at this width. */ #rb-nflgd .rb-gd-chip{ flex:0 0 auto; display:flex; flex-direction:column; gap:2px; min-width:96px; padding:5px 8px 4px; text-align:left; scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--ink); box-shadow:var(--shadow); overflow:hidden; } #rb-nflgd .rb-gd-chip:hover{ border-color:var(--blue2); } #rb-nflgd .rb-gd-chip.on{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue), var(--shadow); } #rb-nflgd .rb-gd-chip.rz{ border-color:var(--live); box-shadow:inset 0 0 0 1px var(--live), var(--shadow); } #rb-nflgd .rb-gd-chip .s{ display:flex; align-items:center; gap:5px; font-size:var(--fs-2); line-height:1.2; font-weight:600; } #rb-nflgd .rb-gd-chip .s .lg{ width:16px; height:16px; flex:0 0 auto; display:block; object-fit:contain; } #rb-nflgd .rb-gd-chip .s{ min-width:0; } #rb-nflgd .rb-gd-chip .s em{ font-style:normal; min-width:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #rb-nflgd .rb-gd-chip .s b{ flex:0 0 auto; } #rb-nflgd .rb-gd-chip .s b{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-chip .s u{ width:6px; height:6px; border-radius:50%; background:#f0a500; text-decoration:none; flex:0 0 auto; } #rb-nflgd .rb-gd-chip .s u.rz{ background:var(--live); } #rb-nflgd .rb-gd-chip .c{ display:block; margin-top:1px; font-style:normal; font-size:var(--fs-1); line-height:1.2; font-weight:600; color:var(--mute); white-space:nowrap; } #rb-nflgd .rb-gd-chip .c.live{ color:var(--live); } #rb-nflgd .rb-gd-chip .s.lose em, #rb-nflgd .rb-gd-chip .s.lose b{ color:var(--mute); } /* ══ helmet + crest ═══════════════════════════════════════════ */ #rb-nflgd .rb-gd-prev .big{ width:56px; height:56px; display:block; object-fit:contain; } #rb-nflgd .rb-gd-sp .who .lg, #rb-nflgd .rb-gd-pl .who .lg{ width:42px; height:42px; display:block; object-fit:contain; } #rb-nflgd .rb-gd-cmphead .lg{ width:30px; height:30px; display:block; object-fit:contain; } /* Same 42px as the scoring and big-play rows. In All plays the drive header carries the only crest — the plays under it are already in that drive's context — so this is the one that has to match the other two views. */ /* Real club logos carry the places a reader matches a row to a score; the helmet is the accent, and it is only used where it is big enough to read as one. */ #rb-nflgd .rb-gd-gc .tm .lg{ width:44px; height:44px; display:block; object-fit:contain; } #rb-nflgd .rb-gd-cr{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; } #rb-nflgd .rb-gd-cr img{ width:100%; height:100%; object-fit:contain; display:block; } #rb-nflgd .rb-gd-cr.s34{ width:34px; height:34px; } #rb-nflgd .rb-gd-cr.s30{ width:30px; height:30px; } #rb-nflgd .rb-gd-cr.s26{ width:26px; height:26px; } #rb-nflgd .rb-gd-cr.s22{ width:22px; height:22px; } /* ══ the field ════════════════════════════════════════════════ */ #rb-nflgd .rb-gd-field{ display:block; width:100%; height:auto; border-radius:6px; } #rb-nflgd .rb-gd-field text{ font-family:'Outfit',Arial,sans-serif; } /* Chalk in screen pixels (non-scaling strokes), so every line is the same width (Alex, 2026-10-05). */ #rb-nflgd .rb-gd-field .yl{ stroke-width:2px; } #rb-nflgd .rb-gd-field .yt{ stroke-width:1px; } /* The game screen's field on a desktop is ~640px, where the old 2-unit lines drew ~4px. */ @media (min-width:620px){ #rb-nflgd .fieldwrap[data-role] .rb-gd-field .yl{ stroke-width:4px; } #rb-nflgd .fieldwrap[data-role] .rb-gd-field .yt{ stroke-width:2px; } } /* ══ ALL GAMES board ══════════════════════════════════════════ */ /* align-items:start, or an expanded tile stretches the one beside it into a column of white space. */ #rb-nflgd .rb-gd-board{ display:grid; grid-template-columns:1fr; gap:11px; padding:0 10px; align-items:start; } /* With columns, a little more between one row of tiles and the next than between neighbours. */ /* Two across from 720px: below that a tile is too narrow for a finished tile's names ("Commanders") even with the crests stacked (2026-10-05). */ @media (min-width:720px){ #rb-nflgd .rb-gd-board{ grid-template-columns:repeat(2,1fr); row-gap:18px; } } /* Three across on a desktop (Alex, 2026-10-01: the 2/3 switch is gone). Two 639px cards on a 1308px canvas left a week at 3040px of scroll, and the card's insides already work at phone width. */ @media (min-width:1180px){ #rb-nflgd .rb-gd-board{ grid-template-columns:repeat(3,1fr); } } #rb-nflgd .rb-gd-gc{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow2); display:block; width:100%; text-align:left; color:inherit; transition:box-shadow .15s, border-color .15s; } #rb-nflgd .rb-gd-gc:hover{ border-color:var(--blue2); box-shadow:var(--shadow2); } #rb-nflgd .rb-gd-gc.is-rz{ border-color:var(--live); box-shadow:0 0 0 1.5px var(--live), var(--shadow2); } #rb-nflgd .rb-gd-gc .top{ display:flex; align-items:center; gap:8px; padding:11px 14px 8px; font-size:var(--fs-2); color:var(--mute); } #rb-nflgd .rb-gd-gc .top .st{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); } #rb-nflgd .rb-gd-gc .top .st.live{ color:var(--live); } #rb-nflgd .rb-gd-gc .top .meta{ margin-left:auto; font-size:var(--fs-2); text-align:right; line-height:1.3; max-width:56%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #rb-nflgd .rb-gd-gc .tm{ display:grid; grid-template-columns:4px 44px 1fr auto 56px; align-items:center; gap:0 13px; padding:8px 14px; } #rb-nflgd .rb-gd-gc .tm .pip{ width:4px; height:34px; border-radius:2px; background:transparent; } #rb-nflgd .rb-gd-gc .tm.pos .pip{ background:var(--blue); } #rb-nflgd .rb-gd-gc .tm .nm{ font-size:var(--fs-5); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-gc .tm .sc{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-3); line-height:1; font-variant-numeric:tabular-nums; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:.01em; } #rb-nflgd .rb-gd-gc .tm.lose .sc, #rb-nflgd .rb-gd-gc .tm.lose .nm{ color:var(--mute); } #rb-nflgd .rb-gd-gc .fieldwrap{ padding:8px 14px 0; } #rb-nflgd .rb-gd-gc .sit{ display:flex; align-items:center; gap:8px; padding:9px 14px 12px; font-size:var(--fs-2); color:var(--mute); } #rb-nflgd .rb-gd-gc .sit b{ color:var(--ink); font-weight:700; } #rb-nflgd .rb-gd-gc .sit .od{ font-variant-numeric:tabular-nums; white-space:nowrap; } #rb-nflgd .rb-gd-rz{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-3); font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:6px; background:var(--live); color:#fff; line-height:17px; white-space:nowrap; flex:0 0 auto; } /* The theme sets 19px / 30px on every phone span; the pill and the clock beside it must not grow. */ #rb-nflgd .rb-gd-gc span.rb-gd-rz{ font-size:var(--fs-3); line-height:17px; } #rb-nflgd .rb-gd-gc .top .st{ white-space:nowrap; } /* pre-game tile: record, streak, points and the survivor win bar */ #rb-nflgd .rb-gd-gcmain{ display:block; width:100%; text-align:left; color:inherit; } #rb-nflgd .rb-gd-gc .tm.pre{ grid-template-columns:4px 44px 1fr; padding:9px 14px; align-items:center; } #rb-nflgd .rb-gd-gc .tm.pre .nm{ white-space:normal; line-height:1.25; } #rb-nflgd .rb-gd-gc .tm.pre .nm .sub{ display:block; font-size:var(--fs-3); font-weight:600; color:var(--mute); font-variant-numeric:tabular-nums; margin-top:1px; } #rb-nflgd .rb-gd-gc .tm.pre .wpn{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-1); line-height:1; text-align:right; color:var(--ink2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-wp{ padding:2px 14px 12px; } /* Equal outer columns: centring the label with margin:auto centres it between the two end labels, which are different widths, so it drifted off the tile's own centre. */ #rb-nflgd .rb-gd-wp .lb{ display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:10px; margin-bottom:7px; } #rb-nflgd .rb-gd-wp .lb .e{ display:flex; align-items:baseline; gap:7px; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-wp .lb .e.r{ justify-content:flex-end; } #rb-nflgd .rb-gd-wp .lb .e b{ font-size:var(--fs-4); font-weight:800; color:var(--ink); } #rb-nflgd .rb-gd-wp .lb .e em{ font-style:normal; font-size:var(--fs-3); font-weight:700; color:var(--mute); } #rb-nflgd .rb-gd-wp .lb .t{ font-size:var(--fs-1); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); text-align:center; white-space:nowrap; } #rb-nflgd .rb-gd-wp .tr{ display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--hair); gap:2px; } #rb-nflgd .rb-gd-wp .tr i{ display:block; height:100%; border-radius:4px; } #rb-nflgd .rb-gd-more{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-3); font-weight:800; color:var(--blue); cursor:pointer; padding:2px 0 2px 12px; white-space:nowrap; } #rb-nflgd .rb-gd-more i{ font-style:normal; font-size:var(--fs-1); } #rb-nflgd .rb-gd-gc.is-open{ border-color:var(--blue2); } /* the expander */ #rb-nflgd .rb-gd-x{ border-top:1px solid var(--hair); background:var(--card2); } #rb-nflgd .rb-gd-xgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); } #rb-nflgd .rb-gd-xside{ background:var(--card2); padding:12px 14px 13px; min-width:0; } #rb-nflgd .rb-gd-xside .h{ display:flex; align-items:center; gap:9px; font-size:var(--fs-3); font-weight:800; margin-bottom:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-xside .h .lg{ width:26px; height:26px; object-fit:contain; flex:0 0 auto; } /* Two lines, not one: at the larger size a label like "On the road" and a record will not share a half-width column without the record breaking across lines. */ #rb-nflgd .rb-gd-xside .r{ display:block; font-size:var(--fs-2); padding:5px 0; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-xside .r .k{ display:block; color:var(--mute); font-weight:600; font-size:var(--fs-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-xside .r b{ font-weight:800; white-space:nowrap; } #rb-nflgd .rb-gd-xside .r .p{ color:var(--mute); font-size:var(--fs-2); white-space:nowrap; margin-left:8px; } #rb-nflgd .rb-gd-xside .r.u{ border-top:1px dashed var(--hair); margin-top:3px; padding-top:5px; } /* Who the split's games were against: six abbreviations to a row (Alex, 2026-10-01). */ #rb-nflgd .rb-gd-xopp{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:3px; margin:1px 0 7px; } #rb-nflgd .rb-gd-xopp span{ font-size:var(--fs-1); line-height:16px; font-weight:700; text-align:center; color:var(--ink2); background:var(--chip); border-radius:4px; padding:2px 0; } /* The split's four units: label, bar, rank — the O vs D tab's bars, one side only. */ #rb-nflgd .rb-gd-xsu{ display:grid; gap:5px; padding-bottom:8px; } #rb-nflgd .rb-gd-xsu .u{ display:grid; grid-template-columns:86px 1fr 40px; align-items:center; gap:7px; } #rb-nflgd .rb-gd-xsu .lab{ font-size:var(--fs-1); line-height:16px; font-weight:600; color:var(--mute); white-space:nowrap; } #rb-nflgd .rb-gd-xsu .bar{ height:8px; border-radius:4px; background:var(--hair); overflow:hidden; } #rb-nflgd .rb-gd-xsu .bar i{ display:block; height:100%; border-radius:4px; } #rb-nflgd .rb-gd-xsu .n{ font-size:var(--fs-1); line-height:16px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-xside .r.u b{ color:var(--blue); } #rb-nflgd .rb-gd-xh2h{ padding:12px 14px 14px; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-xh2h .hd{ font-size:var(--fs-1); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; } #rb-nflgd .rb-gd-xh2h .r{ display:flex; align-items:center; gap:9px; font-size:var(--fs-3); padding:5px 0; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-xh2h .r .w{ color:var(--mute); min-width:72px; font-size:var(--fs-2); } #rb-nflgd .rb-gd-xh2h .r .t{ font-weight:700; } #rb-nflgd .rb-gd-xh2h .r .t.win{ color:var(--good); } #rb-nflgd .rb-gd-xh2h .r .at{ margin-left:auto; color:var(--mute); font-size:var(--fs-2); } #rb-nflgd .rb-gd-xh2h .none{ font-size:var(--fs-2); color:var(--mute); padding:3px 0; } /* pregame preview card: helmets face off, no field — a field with no ball on it says nothing */ #rb-nflgd .rb-gd-prev{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:12px 12px 6px; } #rb-nflgd .rb-gd-prev .side{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; } #rb-nflgd .rb-gd-prev .side .ab{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-1); line-height:1; letter-spacing:.02em; } #rb-nflgd .rb-gd-prev .side .rec{ font-size:var(--fs-1); color:var(--mute); font-weight:700; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-prev .at{ font-size:var(--fs-1); font-weight:800; color:var(--mute); letter-spacing:.09em; } /* ══ the finished tile ═════════════════════════════════════════════════════════════════════ One grid, five columns — side, score, dash, score, side (Alex, 2026-10-04..06): the teams on one line like Yahoo's, crest, name over record, the winner in ink; the game's win-probability line across the middle; each side's top scorer under his team, his points under its score. */ /* Room to breathe, a tenth more tile (Alex, 2026-10-06): more between the scores and the chart (--ft-top), the quarter names and the scorers (--ft-mid), the scorers and the betting line (--ft-foot). A narrow tile, taller to begin with, takes a little more of each. */ #rb-nflgd .rb-gd-fline{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr); align-items:center; gap:8px 8px; padding:6px 14px calc(6px + var(--ft-foot)); --ft-top:10px; --ft-mid:12px; --ft-foot:8px; } #rb-nflgd .rb-gd-fline .fs{ display:flex; align-items:center; gap:9px; min-width:0; color:var(--mute); margin-right:2px; } #rb-nflgd .rb-gd-fline .fs.r{ justify-content:flex-end; text-align:right; margin:0 0 0 2px; } #rb-nflgd .rb-gd-fline .fs.win{ color:var(--ink); } /* Crests 20% bigger (Alex, 2026-10-05), each scaled to one ink area by its --ls (see logoScale). */ #rb-nflgd .rb-gd-fline .fs .lg{ width:41px; height:41px; object-fit:contain; flex:0 0 auto; transform:scale(var(--ls,1)); } #rb-nflgd .rb-gd-fline .nm{ display:flex; flex-direction:column; min-width:0; } #rb-nflgd .rb-gd-fline .nm b{ font-size:15px; line-height:20px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-fline .nm i{ font-style:normal; font-size:var(--fs-1); line-height:16px; color:var(--mute); font-weight:600; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-fline .sc{ display:flex; justify-content:center; } #rb-nflgd .rb-gd-fline .sc b{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-2); line-height:1; font-weight:400; color:var(--mute); } #rb-nflgd .rb-gd-fline .sc b.w{ color:var(--ink); } #rb-nflgd .rb-gd-fline > .dash{ font-style:normal; color:var(--hair); font-size:var(--fs-3); } /* The game's win-probability line, across the whole grid: 80% wide, centred, 88px tall; "W%" in the left margin at its midline, the quarter names faint along its foot (Alex, 2026-10-05). */ #rb-nflgd .rb-gd-fspark{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 80% 1fr; align-items:center; padding:calc(2px + var(--ft-top)) 0 0; } #rb-nflgd .rb-gd-fspark .ch{ grid-column:2; position:relative; display:block; } #rb-nflgd .rb-gd-fspark .rb-gd-wpchart{ height:88px; } /* Outfit, a quarter under the Anton it was (Alex, 2026-10-06): 18px -> --fs-3 (14px; 15px desktop). */ #rb-nflgd .rb-gd-fspark .wl{ grid-column:1; grid-row:1; justify-self:end; margin-right:6px; font-size:var(--fs-3); font-weight:800; line-height:1; color:var(--ink2); } #rb-nflgd .rb-gd-fspark .q{ position:absolute; bottom:1px; transform:translateX(-50%); font-size:var(--fs-1); line-height:1; font-weight:700; color:var(--mute); opacity:.45; } /* The top scorers' row. His crest sits in a box as wide as the team crest above it, so it is centred under it and, being smaller, reads as indented. The theme sets a 30px line-height on every span and i on a phone, so the lines are set here. */ /* Both scorers start at the row's top. Centred, a stat line wrapping to three lines on one side and two on the other pushed the shorter side's name down (Alex, 2026-10-06, GB @ TB). A grid: the crest box and the name on the first line, the stat line under both, from the card's outer edge, so it keeps to two lines (Alex, 2026-10-06): away [crest][C. Lamb WR ] home [ N. Collins WR][crest] [1 car, -6 yds · 17/21, ] [ 7/8, 118 yds, 2 TD] */ #rb-nflgd .rb-gd-fline .ld{ display:grid; grid-template-columns:31px minmax(0,1fr); column-gap:5px; align-items:start; align-self:start; min-width:0; margin-top:calc(4px + var(--ft-mid)); } #rb-nflgd .rb-gd-fline .ld.r{ grid-template-columns:minmax(0,1fr) 31px; text-align:right; } /* It starts under the crest itself, not at the card's edge: the crest box is 31px, the crest the last 21 of it, drawn at its --ls scale about its centre (Alex, 2026-10-06). */ #rb-nflgd .rb-gd-fline .ld{ --crest-in:calc(10px + (21px - 21px * var(--ls, 1)) / 2); } /* the drawn crest's edge */ #rb-nflgd .rb-gd-fline .ld .st{ grid-column:1 / -1; padding-left:var(--crest-in); } #rb-nflgd .rb-gd-fline .ld.r .st{ padding-left:0; padding-right:var(--crest-in); } /* The crest's centre stays under the team crest's (10px in, then 21px); the box ends at the crest, so the name sits 5px from it, and the crest drops 5px to the name's line. */ #rb-nflgd .rb-gd-fline .ld .slot{ height:20px; display:flex; align-items:center; justify-content:flex-end; } #rb-nflgd .rb-gd-fline .ld.r .slot{ justify-content:flex-start; } #rb-nflgd .rb-gd-fline .ld .slot .lg{ position:relative; top:5px; width:21px; height:21px; object-fit:contain; display:block; transform:scale(var(--ls,1)); } #rb-nflgd .rb-gd-fline .ld .nn{ font-size:var(--fs-2); line-height:20px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #rb-nflgd .rb-gd-fline .ld .nn em{ font-style:normal; font-size:var(--fs-1); font-weight:700; color:var(--mute); margin-left:6px; } #rb-nflgd .rb-gd-fline .ld .st{ font-style:normal; font-weight:600; font-size:var(--fs-1); line-height:16px; color:var(--mute); font-variant-numeric:tabular-nums; } /* The points, in the team's colour, under its score, their top just under the top of the name's capitals (Alex, 2026-10-06). The name's capitals start 5.8px into its 20px line, which starts 4px down; Anton's figures start at the top of their box. */ #rb-nflgd .rb-gd-fline .lp{ justify-self:center; align-self:start; margin-top:calc(11px + var(--ft-mid)); font-family:'Anton',Impact,sans-serif !important; font-size:14px; line-height:1; color:var(--tc, var(--blue)); font-variant-numeric:tabular-nums; } @media (max-width:559px){ #rb-nflgd .rb-gd-gc.st-final .tm .sc{ font-size:var(--fd-3s); } #rb-nflgd .rb-gd-fline .lp{ font-size:13px; } } @media (min-width:820px){ #rb-nflgd .rb-gd-fline .lp{ font-size:16px; margin-top:calc(10px + var(--ft-mid)); } } /* A crest beside its name needs ~410px of tile for "Commanders" at 15px; a phone's tile has 327. Narrower than that, the crest stands over the name and record, and the scorer's crest over his name, so every name fits whole (Alex, 2026-10-05). Older browsers without container queries keep the row, and fitNames steps down. */ #rb-nflgd .rb-gd-gc.st-final{ container:rbgdtile / inline-size; } @container rbgdtile (max-width:409px){ #rb-nflgd .rb-gd-fline .fs, #rb-nflgd .rb-gd-fline .fs.r{ flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; text-align:center; margin-left:0; margin-right:0; } #rb-nflgd .rb-gd-fline .fs.r .lg{ order:-1; } #rb-nflgd .rb-gd-fline .nm{ align-items:center; max-width:100%; } /* The scorer the same way: crest over name over stat line, one column, centred. */ #rb-nflgd .rb-gd-fline .ld, #rb-nflgd .rb-gd-fline .ld.r{ grid-template-columns:minmax(0,1fr); row-gap:5px; justify-items:center; text-align:center; } #rb-nflgd .rb-gd-fline .ld .slot, #rb-nflgd .rb-gd-fline .ld.r .slot{ grid-row:1; width:41px; justify-content:center; } #rb-nflgd .rb-gd-fline .ld .nn{ grid-row:2; } #rb-nflgd .rb-gd-fline .ld .st, #rb-nflgd .rb-gd-fline .ld.r .st{ grid-row:3; padding:0; } #rb-nflgd .rb-gd-fline .ld .slot .lg{ top:0; } /* The crest stacked over the name pushes the name down its 20px and the 5px gap. */ #rb-nflgd .rb-gd-fline .lp{ margin-top:calc(36px + var(--ft-mid)); } #rb-nflgd .rb-gd-fline{ --ft-top:13px; --ft-mid:16px; --ft-foot:10px; } /* Capped, so a name too long for its column overflows where fitNames can see it and step down. */ #rb-nflgd .rb-gd-fline .nm b, #rb-nflgd .rb-gd-fline .ld .nn{ max-width:100%; } } /* unit by unit, drawn the way the survivor team card draws it: each rank as a share of the field, the two sides facing each other across the label */ #rb-nflgd .rb-gd-xunits{ padding:13px 14px 14px; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-xunits .hd{ display:flex; align-items:baseline; font-size:var(--fs-2); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); margin-bottom:10px; } #rb-nflgd .rb-gd-xunits .hd .c{ margin:0 auto; color:var(--mute); font-weight:700; letter-spacing:.07em; } #rb-nflgd .rb-gd-xunits .vs{ display:grid; grid-template-columns:1fr 118px 1fr; align-items:center; gap:9px; padding:6px 0; } #rb-nflgd .rb-gd-xunits .edge{ display:flex; align-items:center; gap:6px; } /* NOT row-reverse. The markup is [rank][bar] on the left and [bar][rank] on the right, which is already mirrored; reversing the left edge put its number back on the INSIDE, so one team's rank sat against the label and the other's sat at the card's edge. The bars still fill from the centre outward — that is the .bar justify-content below, not the order of the two. */ #rb-nflgd .rb-gd-xunits .edge.l{ flex-direction:row; } #rb-nflgd .rb-gd-xunits .edge .n{ font-size:var(--fs-2); font-weight:800; font-variant-numeric:tabular-nums; min-width:31px; text-align:center; color:var(--ink2); } #rb-nflgd .rb-gd-xunits .edge .bar{ flex:1; height:8px; border-radius:4px; background:var(--hair); overflow:hidden; display:flex; justify-content:flex-end; } #rb-nflgd .rb-gd-xunits .edge .bar.r{ justify-content:flex-start; } #rb-nflgd .rb-gd-xunits .edge .bar i{ display:block; height:100%; border-radius:4px; background:var(--blue); } #rb-nflgd .rb-gd-xunits .lab{ text-align:center; font-size:var(--fs-3); font-weight:700; line-height:1.25; } #rb-nflgd .rb-gd-xunits .lab i{ display:block; font-style:normal; font-weight:600; font-size:var(--fs-2); color:var(--mute); } /* ══ ONE GAME ═════════════════════════════════════════════════ */ /* The way back to the board, first in the bar on a single game. The app bar survives only on the Tecmo lab page. */ #rb-nflgd .rb-gd-appbar{ display:flex; align-items:center; gap:10px; padding:0 12px 9px; } #rb-nflgd .rb-gd-appbar .ttl{ font-size:var(--fs-4); font-weight:800; min-width:0; } #rb-nflgd .rb-gd-back{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--ink); box-shadow:var(--shadow); flex:0 0 auto; } #rb-nflgd .rb-gd-back:hover{ border-color:var(--blue); color:var(--blue); } #rb-nflgd .rb-gd-back svg{ width:17px; height:17px; } /* The score block: status line, a row per team, the quarters, then the situation. One card, because Alex asked for the linescore and the final score to stop being two separate things. */ /* Not sticky: the theme sets overflow-x:hidden on html and body, which makes them scroll containers and kills position:sticky for everything inside. watchHeader pins this with position:fixed instead, below whatever fixed chrome the theme puts at the top. */ /* --hcr crest, --hq one quarter, --hsc the total: the score rows and the row that labels them share these, so a quarter's figures sit under its label however many quarters there are. */ #rb-nflgd .rb-gd-hdr{ --hcr:40px; --hq:30px; --hsc:58px; } @media (max-width:420px){ #rb-nflgd .rb-gd-hdr{ --hcr:32px; --hq:22px; --hsc:44px; } } #rb-nflgd .rb-gd-hdr{ position:relative; z-index:30; margin:0 10px 11px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow2); overflow:hidden; } #rb-nflgd .rb-gd-hdr .rail{ height:4px; background:transparent; } #rb-nflgd .rb-gd-hdr.is-rz .rail{ background:linear-gradient(90deg,var(--live),#ff8a7d); } #rb-nflgd .rb-gd-hdr .top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 13px 3px; font-size:var(--fs-2); color:var(--mute); } #rb-nflgd .rb-gd-hdr .top .l{ display:inline-flex; align-items:center; gap:7px; min-width:0; } #rb-nflgd .rb-gd-hdr .top .q{ font-weight:800; letter-spacing:.05em; color:var(--ink); text-transform:uppercase; white-space:nowrap; } /* "3RD 6:31" is one thing: never the clock on a line of its own (Alex, 2026-10-04) */ #rb-nflgd .rb-gd-hdr .top .r{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* rail | crest | name | ball | win% | score. Fixed tracks so both rows line up whatever the name length. Deliberately shorter than it was: records, timeouts and the quarters all used to live here, and together they pushed the field below the fold on a phone — which is the one thing a reader opening a live game came for. */ /* crest | name | ball | win% | score. The possession pip no longer takes a column: it sits in the card's left margin, so each crest lines up with the status line above it. */ #rb-nflgd .rb-gd-hdr .wphead{ display:grid; grid-template-columns:var(--hcr) 1fr auto 46px var(--hsc); gap:0 11px; padding:3px 13px 0; } /* Before kickoff "Win probability" heads the two right-hand columns on two lines, and each team's figure sits centred under it. */ #rb-nflgd .rb-gd-hdr .wphead .k{ grid-column:4 / span 2; text-align:center; font-size:var(--fs-1); letter-spacing:.09em; text-transform:uppercase; color:var(--mute); font-weight:800; line-height:1.25; align-self:end; } #rb-nflgd .rb-gd-hdr .tm{ position:relative; display:grid; grid-template-columns:var(--hcr) 1fr auto 46px var(--hsc); align-items:center; gap:0 11px; padding:4px 13px; } #rb-nflgd .rb-gd-hdr .tm .wp{ text-align:right; font-size:var(--fs-3); font-weight:800; color:var(--ink2); } /* Before kickoff: two prediction columns, win % and implied score, each figure centred under its label, both under a "Predictions" heading. */ #rb-nflgd .rb-gd-hdr{ --hpc:66px; } @media (max-width:420px){ #rb-nflgd .rb-gd-hdr{ --hpc:58px; } } #rb-nflgd .rb-gd-hdr .tm.has-wp, #rb-nflgd .rb-gd-hdr .wphead.pre{ grid-template-columns:var(--hcr) 1fr auto var(--hpc) var(--hpc); } #rb-nflgd .rb-gd-hdr .tm.has-wp .wp{ grid-column:4; text-align:center; } #rb-nflgd .rb-gd-hdr .tm .ip{ grid-column:5; text-align:center; font-size:var(--fs-3); font-weight:800; color:var(--ink2); font-variant-numeric:tabular-nums; } /* The kickoff line takes the same columns, so "Predictions" sits on it, centred over the two prediction columns, and the label row below needs no line of its own for the heading. */ #rb-nflgd .rb-gd-hdr .top.pre{ display:grid; grid-template-columns:var(--hcr) 1fr auto var(--hpc) var(--hpc); gap:0 11px; align-items:center; } #rb-nflgd .rb-gd-hdr .top.pre .l{ grid-column:1 / span 3; } #rb-nflgd .rb-gd-hdr .top.pre .pk{ grid-column:4 / span 2; text-align:center; font-size:var(--fs-2); font-weight:800; color:var(--ink); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } #rb-nflgd .rb-gd-hdr .wphead.pre{ padding-top:2px; padding-bottom:4px; } /* Before kickoff the rows get room to breathe: between the teams, under the labels, and above the conditions strip. */ #rb-nflgd .rb-gd-hdr .tm.has-wp{ padding-top:8px; padding-bottom:8px; } #rb-nflgd .rb-gd-hdr .tm.has-wp + .tm.has-wp{ padding-bottom:12px; } #rb-nflgd .rb-gd-hdr .wphead.pre .k{ grid-row:1; } #rb-nflgd .rb-gd-hdr .wphead.pre .kw{ grid-column:4; } #rb-nflgd .rb-gd-hdr .wphead.pre .ki{ grid-column:5; } #rb-nflgd .rb-gd-hdr .tm.lose .wp{ color:var(--mute); } #rb-nflgd .rb-gd-hdr .tm .pip{ position:absolute; left:5px; top:50%; width:3px; height:30px; margin-top:-15px; border-radius:2px; background:transparent; } #rb-nflgd .rb-gd-hdr .tm.pos .pip{ background:var(--blue); } #rb-nflgd .rb-gd-hdr .tm .lg{ width:var(--hcr); height:var(--hcr); display:block; object-fit:contain; } #rb-nflgd .rb-gd-hdr .tm .nm{ min-width:0; } #rb-nflgd .rb-gd-hdr .tm .nm b{ display:block; font-size:var(--fs-5); font-weight:800; line-height:1.15; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-hdr .tm .nm span{ display:block; font-size:var(--fs-2); color:var(--mute); line-height:1.3; font-weight:600; margin-top:1px; } #rb-nflgd .rb-gd-hdr .tm .sc{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-3); line-height:.92; font-variant-numeric:tabular-nums; text-align:right; letter-spacing:.01em; color:var(--ink); } #rb-nflgd .rb-gd-hdr .tm.lose .sc, #rb-nflgd .rb-gd-hdr .tm.lose .nm b{ color:var(--mute); } /* Quarters, between the name and the total. The tracks are written inline by the renderer: the column count follows the game, overtime included. */ #rb-nflgd .rb-gd-hdr .tm .qs{ text-align:center; font-size:var(--fs-3); font-weight:700; color:var(--ink2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-hdr .tm.lose .qs{ color:var(--mute); } /* "Final" at the size of every other module's heading, on the same padding. */ /* Half the air under "Final": no padding between it and the quarter labels, which sit tight. */ #rb-nflgd .rb-gd-hdr.is-final .top{ padding:11px 13px 0; } #rb-nflgd .rb-gd-hdr.is-final .qhd{ padding-top:0; } #rb-nflgd .rb-gd-hdr.is-final .qhd .ql{ line-height:1; padding-bottom:1px; } #rb-nflgd .rb-gd-hdr.is-final .tm{ padding-top:6px; padding-bottom:6px; } #rb-nflgd .rb-gd-hdr.is-final .top .q{ font-size:var(--fs-4); letter-spacing:.06em; color:var(--ink2); } #rb-nflgd .rb-gd-hdr.is-final .top .ch{ font-size:var(--fs-2); } /* The pre-game lines against the result: what the line was, then how it did. */ #rb-nflgd .rb-gd-lines{ border-top:1px solid var(--hair); padding:9px 13px 8px; background:var(--card2); } #rb-nflgd .rb-gd-lines .lh{ font-size:var(--fs-1); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:4px; line-height:1.3; } #rb-nflgd .rb-gd-lines .lr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr); align-items:center; gap:10px; padding:7px 0; line-height:1.4; font-size:var(--fs-2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-lines .lr + .lr{ border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-lines .k{ font-weight:700; color:var(--mute); white-space:nowrap; } #rb-nflgd .rb-gd-lines .ln{ font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-lines .rs{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; } #rb-nflgd .rb-gd-lines .nt{ color:var(--ink2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-lines .pill{ font-style:normal; font-size:var(--fs-1); font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:1px 7px; border-radius:5px; white-space:nowrap; flex:0 0 auto; line-height:1.4; } #rb-nflgd .rb-gd-lines .pill.hit{ background:var(--goodbg); color:var(--good); } #rb-nflgd .rb-gd-lines .pill.miss{ background:var(--turnbg); color:var(--turn); } #rb-nflgd .rb-gd-lines .pill.over, #rb-nflgd .rb-gd-lines .pill.under{ background:var(--tint); color:var(--blue); } #rb-nflgd .rb-gd-lines .pill.push{ background:var(--chip); color:var(--chipink); } /* A phone has no room for three columns: the label sits over the line and its result. */ @media (max-width:619px){ #rb-nflgd .rb-gd-lines .lr{ grid-template-columns:minmax(0,1fr) auto; gap:0 10px; padding:4px 0; } #rb-nflgd .rb-gd-lines .k{ grid-column:1 / -1; font-size:var(--fs-1); } } /* After the game the total is one more column of the line, not a headline over it. */ #rb-nflgd .rb-gd-hdr.is-final .tm .sc{ font-size:var(--fs-5); } #rb-nflgd .rb-gd-hdr .top .ch{ font-weight:500; color:var(--mute); white-space:nowrap; } #rb-nflgd .rb-gd-hdr .top .rb-gd-upd{ margin-left:auto; font-size:var(--fs-1); } /* Live: equal outer cells, so RED ZONE sits on the score card's true centre. */ #rb-nflgd .rb-gd-hdr .top.is-live{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } #rb-nflgd .rb-gd-hdr .top.is-live .c{ display:flex; justify-content:center; } #rb-nflgd .rb-gd-hdr .top.is-live .rb-gd-upd{ justify-self:end; margin-left:0; min-width:0; } /* Record, then the timeouts left as dots. */ #rb-nflgd .rb-gd-hdr .tm .nm .sub{ display:flex; align-items:center; gap:9px; font-size:var(--fs-1); font-weight:700; color:var(--mute); margin-top:2px; white-space:nowrap; } @media (max-width:420px){ #rb-nflgd .rb-gd-hdr .tm, #rb-nflgd .rb-gd-hdr .wphead{ column-gap:8px; } #rb-nflgd .rb-gd-hdr .tm .nm .sub{ gap:6px; } } #rb-nflgd .rb-gd-hdr .tm .nm .sub i{ font-style:normal; } #rb-nflgd .rb-gd-hdr .tm .nm .tos{ display:inline-flex; gap:4px; } #rb-nflgd .rb-gd-hdr .tm .nm .tod{ display:block; width:6px; height:6px; border-radius:50%; background:var(--blue); } #rb-nflgd .rb-gd-hdr .tm .nm .tod.off{ background:var(--hair); } #rb-nflgd .rb-gd-hdr .tm .nm b.nma{ display:none; } @media (max-width:520px){ #rb-nflgd .rb-gd-hdr .tm[style] .nm b.nmf{ display:none; } #rb-nflgd .rb-gd-hdr .tm[style] .nm b.nma{ display:block; } } #rb-nflgd .rb-gd-hdr .qhd .ql{ text-align:center; font-size:var(--fs-1); font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); white-space:nowrap; align-self:end; } #rb-nflgd .rb-gd-hdr .sit{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 13px 7px; border-top:1px solid var(--hair); font-size:var(--fs-2); background:var(--card2); } #rb-nflgd .rb-gd-hdr .sit .dd{ font-weight:700; } #rb-nflgd .rb-gd-hdr .sit .dd i{ font-style:normal; font-weight:500; color:var(--mute); } #rb-nflgd .rb-gd-hdr .sit .od{ color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap; } #rb-nflgd .rb-gd-ball{ width:15px; height:10px; border-radius:50%/50%; background:#8B4513; position:relative; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); } #rb-nflgd .rb-gd-ball::after{ content:""; position:absolute; left:5px; right:5px; top:4.2px; height:1.4px; background:rgba(255,255,255,.85); } /* The jump row. Scrolls to a section on this screen; it never navigates. */ /* It used to scroll sideways: 561px of chips in a 355px window, no fade, no arrows, and the two a reader hunts for most — Box and Injuries — were the two off the end. There is vertical room here, so it wraps and the whole map is visible at once. */ #rb-nflgd .rb-gd-qj{ display:flex; flex-wrap:wrap; gap:7px; padding:0 10px 11px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } #rb-nflgd .rb-gd-qj::-webkit-scrollbar{ display:none; } #rb-nflgd .rb-gd-qj button{ flex:0 0 auto; transition:background .12s, color .12s; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:9px; background:var(--card); border:1px solid var(--line); color:var(--ink2); font-size:var(--fs-2); font-weight:700; box-shadow:var(--shadow); } #rb-nflgd .rb-gd-qj button:hover{ border-color:var(--blue); color:var(--blue); } /* Four sections, one row: they share the width rather than wrapping a lone chip onto a second line. */ @media (max-width:619px){ #rb-nflgd .rb-gd-qj{ flex-wrap:nowrap; gap:6px; } #rb-nflgd .rb-gd-qj button{ flex:1 1 auto; justify-content:center; padding:0 7px; min-width:0; white-space:nowrap; } } #rb-nflgd .rb-gd-qj button .bd{ min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--live); color:#fff; font-size:var(--fs-1); font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-style:normal; } #rb-nflgd .rb-gd-card{ margin:0 10px 11px; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); } #rb-nflgd .rb-gd-card > .hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px 10px; } #rb-nflgd .rb-gd-card > .hd .t{ font-size:var(--fs-1); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); } #rb-nflgd .rb-gd-card > .hd .a{ font-size:var(--fs-2); font-weight:700; color:var(--blue); } #rb-nflgd .rb-gd-card > .segwrap{ padding:0 10px 10px; } /* Under a shaded, ruled heading the tabs need the same air above as below. */ #rb-nflgd #rb-gd-s-matchup > .segwrap{ padding-top:10px; } /* segmented tabs */ #rb-nflgd .rb-gd-seg{ display:flex; gap:3px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--card2); border-radius:10px; padding:3px; } #rb-nflgd .rb-gd-seg::-webkit-scrollbar{ display:none; } #rb-nflgd .rb-gd-seg button{ flex:1 0 auto; padding:8px 12px; border-radius:8px; font-size:var(--fs-3); font-weight:700; color:var(--mute); white-space:nowrap; text-align:center; } #rb-nflgd .rb-gd-seg button[aria-selected="true"]{ background:var(--card); color:var(--blue); box-shadow:var(--shadow); } /* Team tabs: a rule in the team's colour, filled with it when selected. */ /* Team tabs: the selected one filled in its team's colour; both lifted off the track. */ #rb-nflgd .rb-gd-seg button.tc{ color:var(--ink2); background:var(--card); box-shadow:var(--shadow2); } #rb-nflgd .rb-gd-seg button.tc[aria-selected="true"]{ background:var(--tc); color:#fff; box-shadow:var(--shadow2); } #rb-nflgd #rb-gd-s-box > .segwrap{ padding-top:4px; } #rb-nflgd #rb-gd-s-box .rb-gd-seg{ gap:8px; padding:6px; } #rb-nflgd .rb-gd-seg button[disabled]{ opacity:.4; cursor:not-allowed; } /* scoring summary — the icon says what kind of score; the rows themselves stay neutral. Helmet on the right says whose it was. */ #rb-nflgd .rb-gd-sp{ display:grid; grid-template-columns:5px 1fr auto; align-items:stretch; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-sp .rail{ background:transparent; } #rb-nflgd .rb-gd-sp .bd{ padding:10px 12px 11px; min-width:0; } /* The right column of any play row: the clock on top, the crest under it, stacked on one axis. The clock is the thing a reader scans for, so it is ink2 and bold rather than the muted grey it wore inside the meta line. */ #rb-nflgd .rb-gd-sp .who, #rb-nflgd .rb-gd-pl .who{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding:9px 13px 10px 4px; } #rb-nflgd .rb-gd-sp .who .tm, #rb-nflgd .rb-gd-pl .who .tm{ font-size:var(--fs-2); font-weight:800; color:var(--ink2); letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-sp .mta{ display:flex; align-items:center; gap:8px; font-size:var(--fs-2); color:var(--ink2); font-variant-numeric:tabular-nums; margin-bottom:3px; } #rb-nflgd .rb-gd-sp .mta .kind{ font-weight:800; letter-spacing:.07em; } #rb-nflgd .rb-gd-sp .tx{ font-size:var(--fs-2); line-height:1.42; } #rb-nflgd .rb-gd-sp .sc{ margin-top:6px; font-size:var(--fs-3); font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink2); } /* drives and plays — the play-by-play list. The icon marks touchdowns, turnovers, explosive gains and first downs; the rows themselves carry no colour, so the icons are what stands out. */ #rb-nflgd .rb-gd-drv{ border-top:1px solid var(--hair); } /* Every play row white; each drive's summary a shade darker, so the drives stand apart from their plays (Alex, 2026-10-06; this replaced every other drive shaded, 2026-10-02). */ #rb-nflgd .rb-gd-drv .rb-gd-pl{ background:var(--card); } /* A fixed column grid, identical on every drive, so the figures line up down the list. Row one: crest, team, then the labels. Row two: chevron, result, then the figures. */ #rb-nflgd .rb-gd-drvh{ display:grid; align-items:center; column-gap:12px; row-gap:3px; grid-template-columns:34px minmax(0,1.5fr) repeat(6,minmax(0,1fr)); padding:10px 16px 11px 13px; background:var(--hair); cursor:pointer; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-drvh:hover{ background:var(--tint); } #rb-nflgd .rb-gd-drvh > .lg{ grid-row:1; grid-column:1; width:30px; height:30px; display:block; object-fit:contain; justify-self:center; } #rb-nflgd .rb-gd-drvh .tm{ grid-row:1; grid-column:2; font-size:var(--fs-4); font-weight:800; color:var(--ink); } #rb-nflgd .rb-gd-drvh .tmres{ display:none; } /* Three times the old glyph: it is the only control on the row. Under the crest. */ #rb-nflgd .rb-gd-drvh .cv{ grid-row:2; grid-column:1; justify-self:center; display:block; width:22px; height:22px; color:var(--mute); line-height:0; } #rb-nflgd .rb-gd-drvh .cv svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-90deg); transition:transform .15s ease; } #rb-nflgd .rb-gd-drvh .cv.on svg{ transform:none; } #rb-nflgd .rb-gd-drvh .res{ grid-row:2; grid-column:2; font-size:var(--fs-4); font-weight:700; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Labels over figures, each column centred on itself. */ #rb-nflgd .rb-gd-drvh .l, #rb-nflgd .rb-gd-drvh .v{ text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #rb-nflgd .rb-gd-drvh .l{ grid-row:1; align-self:end; font-size:var(--fs-1); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); } #rb-nflgd .rb-gd-drvh .v{ grid-row:2; font-size:var(--fs-3); font-weight:700; color:var(--ink2); } #rb-nflgd .rb-gd-drvh .c-pl{ grid-column:3; } #rb-nflgd .rb-gd-drvh .c-st{ grid-column:4; } #rb-nflgd .rb-gd-drvh .c-yd{ grid-column:5; } #rb-nflgd .rb-gd-drvh .c-qt{ grid-column:6; } #rb-nflgd .rb-gd-drvh .c-tm{ grid-column:7; } #rb-nflgd .rb-gd-drvh .c-sc{ grid-column:8; } /* The score the drive left, the side that just scored in ink. */ #rb-nflgd .rb-gd-drvh .v.c-sc b{ font-weight:700; color:var(--mute); } #rb-nflgd .rb-gd-drvh .v.c-sc b.on{ font-weight:800; color:var(--ink); } /* A phone: team and result on the top line with the quarter at its end; the five figures in their columns underneath, labels over values, the chevron at the left of them. */ @media (max-width:619px){ #rb-nflgd .rb-gd-drvh{ grid-template-columns:30px repeat(5,minmax(0,1fr)); column-gap:6px; row-gap:4px; padding:10px 12px; } #rb-nflgd .rb-gd-drvh > .lg{ grid-row:1; grid-column:1; width:28px; height:28px; } #rb-nflgd .rb-gd-drvh .tm, #rb-nflgd .rb-gd-drvh .res, #rb-nflgd .rb-gd-drvh .l.c-qt{ display:none; } #rb-nflgd .rb-gd-drvh .tmres{ display:block; grid-row:1; grid-column:2 / span 3; font-size:var(--fs-4); font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-drvh .tmres span{ font-weight:700; color:var(--ink2); } #rb-nflgd .rb-gd-drvh .v.c-qt{ grid-row:1; grid-column:5 / span 2; text-align:right; font-size:var(--fs-2); color:var(--mute); } #rb-nflgd .rb-gd-drvh .cv{ grid-row:2 / span 2; } #rb-nflgd .rb-gd-drvh .l{ grid-row:2; letter-spacing:.02em; } #rb-nflgd .rb-gd-drvh .v{ grid-row:3; } #rb-nflgd .rb-gd-drvh .c-pl{ grid-column:2; } #rb-nflgd .rb-gd-drvh .c-st{ grid-column:3; } #rb-nflgd .rb-gd-drvh .c-yd{ grid-column:4; } #rb-nflgd .rb-gd-drvh .c-tm{ grid-column:5; } #rb-nflgd .rb-gd-drvh .c-sc{ grid-column:6; } } #rb-nflgd .rb-gd-pl{ display:grid; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-pl .rail{ background:transparent; } #rb-nflgd .rb-gd-pl .bd{ padding:9px 13px 10px; min-width:0; } #rb-nflgd .rb-gd-pl .mta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-2); color:var(--ink2); font-variant-numeric:tabular-nums; margin-bottom:3px; } #rb-nflgd .rb-gd-pl .mta .kind{ font-weight:800; letter-spacing:.07em; } #rb-nflgd .rb-gd-pl .mta .dn{ font-weight:800; color:var(--ink2); } #rb-nflgd .rb-gd-pl .tx{ font-size:var(--fs-2); line-height:1.4; } /* A player's points on a play (fpChip): the name plain, bold black; the number alone in a pill, green for a gain, red for a loss (Alex, 2026-09-28). */ #rb-nflgd .rb-gd-pl .fp .fpr, #rb-nflgd .rb-gd-sp .fp .fpr{ display:inline-flex; align-items:center; gap:6px; } #rb-nflgd .rb-gd-pl .fp .nm, #rb-nflgd .rb-gd-sp .fp .nm{ font-size:var(--fs-2); line-height:18px; font-weight:800; color:var(--ink); white-space:nowrap; } #rb-nflgd .rb-gd-pl .fp .v, #rb-nflgd .rb-gd-sp .fp .v{ font-style:normal; font-size:var(--fs-2); line-height:18px; font-weight:800; padding:1px 7px; border-radius:5px; font-variant-numeric:tabular-nums; white-space:nowrap; } #rb-nflgd .rb-gd-pl .fp .v.pos, #rb-nflgd .rb-gd-sp .fp .v.pos{ background:var(--goodbg); color:var(--good); } #rb-nflgd .rb-gd-pl .fp .v.neg, #rb-nflgd .rb-gd-sp .fp .v.neg{ background:var(--turnbg); color:var(--turn); } #rb-nflgd .rb-gd-pl .fp .v.nil, #rb-nflgd .rb-gd-sp .fp .v.nil{ background:var(--chip); color:var(--chipink); } /* A point up from the phone size on a desktop, the name only. */ @media (min-width:820px){ #rb-nflgd .rb-gd-pl .fp .nm, #rb-nflgd .rb-gd-sp .fp .nm{ font-size:var(--fs-3); } /* 14px -> 15px */ } #rb-nflgd .rb-gd-note.is-warn{ border-left-color:var(--warn); background:var(--warnbg); } /* team stats: a helmet at each end, so the bars are not the only thing naming the teams */ #rb-nflgd .rb-gd-cmphead{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:2px 13px 11px; } #rb-nflgd .rb-gd-cmphead .s{ display:flex; align-items:center; gap:8px; font-size:var(--fs-2); font-weight:800; } #rb-nflgd .rb-gd-cmphead .s.r{ justify-content:flex-end; } #rb-nflgd .rb-gd-cmphead .vs{ font-size:var(--fs-1); font-weight:800; color:var(--mute); letter-spacing:.08em; } /* Each row 30% taller than it was (Alex, 2026-10-06): 53px to about 69. */ #rb-nflgd .rb-gd-cmp{ padding:14px 13px 15px; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-cmp .lb{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:9px; } #rb-nflgd .rb-gd-cmp .lb .k{ font-size:var(--fs-1); letter-spacing:.07em; text-transform:uppercase; color:var(--mute); font-weight:800; } #rb-nflgd .rb-gd-cmp .lb b{ font-size:var(--fs-3); font-weight:800; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-cmp .tr{ display:flex; height:7px; border-radius:4px; overflow:hidden; background:var(--hair); gap:2px; } #rb-nflgd .rb-gd-cmp .tr i{ display:block; height:100%; border-radius:3px; } /* top performers — the logo stands on its own, no grey disc behind it */ /* Row gap zeroed and the bar's own margin halved: the bar sits on a second grid row, so the two were stacking into 17px of air under every stat line. */ #rb-nflgd .rb-gd-pf{ display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:0 11px; padding:9px 13px; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-pf .lg{ width:34px; height:34px; display:block; object-fit:contain; } #rb-nflgd .rb-gd-pf .i b{ display:block; font-size:var(--fs-3); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-pf .i span{ display:block; font-size:var(--fs-1); color:var(--mute); line-height:1.35; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-pf .v{ text-align:right; } #rb-nflgd .rb-gd-pf .v b{ display:block; font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-1); line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-pf .v span{ font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:800; } /* Whole-pixel line heights above the bar: fractional ones left each bar at a different sub-pixel offset, so the same 4px drew as 3, 4 or 5 on screen. */ #rb-nflgd .rb-gd-pf .bar{ grid-column:2/-1; height:4px; border-radius:2px; background:var(--hair); overflow:hidden; margin-top:8px; transform:translateZ(0); } #rb-nflgd .rb-gd-pf .bar i{ display:block; height:4px; background:var(--tc, var(--blue)); border-radius:2px; } #rb-nflgd .rb-gd-pf .i b{ line-height:18px; height:18px; } /* The note button on the baseline made the line 18.5px; on a phone every other row's bar then began on a half pixel and drew a pixel thicker (Alex, 2026-10-05). */ #rb-nflgd .rb-gd-pf .i b .rb-gd-pcard{ vertical-align:top; } #rb-nflgd .rb-gd-pf .i span{ line-height:17px; } /* Whole pixels down the row, or a 4px bar lands between two and draws 5px on one row and 4px on the next (Alex, 2026-10-02: Warren's and Wilson's bars looked different). */ #rb-nflgd .rb-gd-pf .v span{ display:block; line-height:16px; } #rb-nflgd .rb-gd-pf .v b{ color:var(--tc, var(--blue)); } /* box score */ #rb-nflgd .rb-gd-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Fixed layout with only the two end columns sized: the stat columns then split what is left evenly, so six columns fit a 375px phone and the table never scrolls sideways. The old version carried min-width:400px, which pushed the player names off the left edge on every phone. */ #rb-nflgd .rb-gd-box{ width:100%; border-collapse:collapse; font-size:var(--fs-2); table-layout:fixed; } #rb-nflgd .rb-gd-box th, #rb-nflgd .rb-gd-box td{ padding:7px 3px; text-align:center; border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; white-space:nowrap; } /* A pixel under the other labels, so the four stat headings fit on one line on a phone. */ #rb-nflgd .rb-gd-box th{ font-size:var(--fs-0); letter-spacing:.02em; text-transform:uppercase; color:var(--mute); font-weight:800; } /* The name takes the room; the stats and points take what their figures need. */ #rb-nflgd .rb-gd-box col.c-nm{ width:40%; } #rb-nflgd .rb-gd-box col.c-st{ width:11%; } #rb-nflgd .rb-gd-box col.c-fp{ width:16%; } @media (max-width:619px){ /* The name gives up some room to the stats: a long name may lose a few letters. */ #rb-nflgd .rb-gd-box col.c-nm{ width:35%; } #rb-nflgd .rb-gd-box col.c-st1{ width:16.5%; } #rb-nflgd .rb-gd-box col.c-st2{ width:9%; } #rb-nflgd .rb-gd-box col.c-st3{ width:10.5%; } #rb-nflgd .rb-gd-box col.c-st4{ width:13%; } #rb-nflgd .rb-gd-box col.c-fp{ width:16%; } #rb-nflgd .rb-gd-box th, #rb-nflgd .rb-gd-box td{ padding-left:1px; padding-right:1px; } } #rb-nflgd .rb-gd-box th:first-child, #rb-nflgd .rb-gd-box td:first-child{ text-align:left; padding-left:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-box td:first-child{ font-weight:600; } /* Even padding either side, so the centred points sit in the middle of their column. */ #rb-nflgd .rb-gd-box td.fp, #rb-nflgd .rb-gd-box th.fp{ color:var(--blue); font-weight:800; padding-left:6px; padding-right:6px; } #rb-nflgd .rb-gd-box th{ white-space:nowrap; } #rb-nflgd .rb-gd-box .grp td{ background:var(--card2); font-size:var(--fs-1); font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--mute); text-align:left; padding:7px 13px; } #rb-nflgd .rb-gd-box tr:last-child td{ border-bottom:0; } #rb-nflgd .rb-gd-empty{ padding:26px 16px; text-align:center; color:var(--mute); font-size:var(--fs-3); } #rb-nflgd .rb-gd-note{ margin:0 10px 11px; padding:11px 13px; border-left:4px solid var(--blue); border-radius:0 10px 10px 0; background:var(--tint); color:var(--ink2); font-size:var(--fs-2); line-height:1.5; } #rb-nflgd .rb-gd-load{ height:3px; background:transparent; overflow:hidden; } #rb-nflgd .rb-gd-load.on{ background:var(--hair); } #rb-nflgd .rb-gd-load.on i{ display:block; height:100%; width:40%; background:var(--blue); animation:rb-gd-slide 1s linear infinite; } @keyframes rb-gd-slide{ from{transform:translateX(-100%)} to{transform:translateX(350%)} } #rb-nflgd .rb-gd-chg{ animation:rb-gd-flash 1.4s ease-out; } @keyframes rb-gd-flash{ 0%{background-color:var(--tint)} 100%{background-color:transparent} } @media (prefers-reduced-motion:reduce){ #rb-nflgd .rb-gd-dot, #rb-nflgd .rb-gd-chg{ animation:none !important; } #rb-nflgd .rb-gd-load.on i{ animation:none; width:100%; } } html[data-rb-webview="1"] #rb-nflgd.rb-gd, #rb-nflgd.rb-gd.is-webview{ margin-left:0; margin-right:0; } @media (min-width:820px){ #rb-nflgd .rb-gd-detail{ display:grid; grid-template-columns:1fr 1fr; gap:0 11px; align-items:start; padding:0 10px; } #rb-nflgd .rb-gd-detail > .rb-gd-full{ grid-column:1/-1; } #rb-nflgd .rb-gd-detail > .rb-gd-card{ margin-left:0; margin-right:0; } } /* ── the header condenses once it is pinned ─────────────────────────────────────────────── The sentinel is a zero-height marker above the sticky card; an observer toggles .is-cond when it leaves the viewport. Collapsing the two team rows to one line is what makes a permanently pinned score block affordable on a phone. */ #rb-nflgd .rb-gd-hdrtop{ height:1px; margin:0 10px -1px; } #rb-nflgd .rb-gd-hdrmini{ display:none; align-items:center; gap:9px; padding:9px 13px; } #rb-nflgd .rb-gd-hdrmini .sm{ width:26px; height:26px; object-fit:contain; display:block; flex:0 0 auto; } #rb-nflgd .rb-gd-hdrmini b{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-2); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.01em; } #rb-nflgd .rb-gd-hdrmini .sep{ color:var(--mute); font-weight:400; } #rb-nflgd .rb-gd-hdrmini .st{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); } #rb-nflgd .rb-gd-hdr.is-cond .top, #rb-nflgd .rb-gd-hdr.is-cond .tm, #rb-nflgd .rb-gd-hdr.is-cond .wphead, #rb-nflgd .rb-gd-hdr.is-cond .sit, #rb-nflgd .rb-gd-hdr.is-cond .rb-gd-lines{ display:none; } #rb-nflgd .rb-gd-hdr.is-cond .rb-gd-hdrmini{ display:flex; } /* Pinned, it reads as hanging off the top of the screen, so the top corners are square and only the bottom ones are rounded. */ #rb-nflgd .rb-gd-hdr.is-cond{ border-radius:0 0 14px 14px; border-top-color:transparent; } /* Takes on exactly the height the collapsed card gives up, so the document never changes size and scroll anchoring has nothing to correct. Sized by watchHeader. */ #rb-nflgd .rb-gd-hdrpad{ height:0; } /* ── what just happened, over the field ─────────────────────────────────────────────────── Tecmo-ish on purpose: flat colour, hard edges, the arcade pixel face, no gradients. It sits over the field for five seconds and leaves. */ #rb-nflgd .rb-gd-pop{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:.35em; pointer-events:none; text-align:center; } #rb-nflgd .rb-gd-pop.on{ display:flex; animation:rb-gd-pop-in .18s steps(3,end) both; } /* (Alex, 2026-09-30) The banners' arcade pixel face on every line. Each glyph is a full em wide, so sizes are set by the longest line that can appear across the field: "BUF TURNOVER" (12) for the word, "FUMBLE RETURN TD" (16) for the detail — both inside 90% of the field's width. */ #rb-nflgd .rb-gd-pop > span{ font-family:'Press Start 2P', monospace !important; font-weight:400; letter-spacing:0; line-height:1.2; color:#fff; text-transform:uppercase; white-space:nowrap; } #rb-nflgd .rb-gd-pop .w{ font-size:clamp(20px,6.5vw,42px); font-size:clamp(20px,6.5cqw,42px); text-shadow:0 4px 0 rgba(0,0,0,.55); } #rb-nflgd .rb-gd-pop .n{ font-size:clamp(14px,4.4vw,28px); font-size:clamp(14px,4.4cqw,28px); text-shadow:0 3px 0 rgba(0,0,0,.5); } #rb-nflgd .rb-gd-pop .t{ font-size:clamp(12px,3.6vw,22px); font-size:clamp(12px,3.6cqw,22px); text-shadow:0 3px 0 rgba(0,0,0,.5); } /* The flat wash behind the words: green for any score, red for a turnover, blue for a big play or a first down (Alex, 2026-09-30). */ #rb-nflgd .rb-gd-pop::before{ content:""; position:absolute; inset:0; } #rb-nflgd .rb-gd-pop.is-td::before, #rb-nflgd .rb-gd-pop.is-fg::before{ background:rgba(17,128,79,.82); } #rb-nflgd .rb-gd-pop.is-to::before{ background:rgba(179,38,30,.84); } #rb-nflgd .rb-gd-pop.is-big::before, #rb-nflgd .rb-gd-pop.is-fd::before{ background:rgba(0,109,200,.72); } #rb-nflgd .rb-gd-pop > *{ position:relative; } /* Stepped, not eased: it should snap on the way a sprite does, not glide. */ @keyframes rb-gd-pop-in{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:scale(1); } } @media (prefers-reduced-motion:reduce){ #rb-nflgd .rb-gd-pop.on{ animation:none; } } /* ── play marks ─────────────────────────────────────────────────────────────────────────── Flat, hard-edged glyphs in the field's idiom, one per kind. They replaced the tinted row backgrounds: those coloured half the list, which left the real moments no way to stand out. */ #rb-nflgd .rb-gd-mark{ display:inline-flex; align-items:center; flex:0 0 auto; } #rb-nflgd .rb-gd-mark svg{ width:22px; height:18px; display:block; } #rb-nflgd .rb-gd-mark.m-TD{ color:var(--good); } #rb-nflgd .rb-gd-mark.m-FG{ color:var(--warn); } #rb-nflgd .rb-gd-mark.m-TO{ color:var(--turn); } #rb-nflgd .rb-gd-mark.m-BIG{ color:var(--warn); } #rb-nflgd .rb-gd-mark.m-FD{ color:var(--blue); } /* A filtered play is read out of drive context, so it carries the crest the way scoring rows do. Fantasy points are their own column on the right, beside the clock and the crest, so the left of the row is the play and nothing else. On a phone there is no room for a third column and they drop under the text. */ #rb-nflgd .rb-gd-pl{ grid-template-columns:4px 1fr auto; } #rb-nflgd .rb-gd-sp{ grid-template-columns:5px 1fr auto; } #rb-nflgd .rb-gd-pl .rail, #rb-nflgd .rb-gd-sp .rail{ grid-row:1 / span 2; } #rb-nflgd .rb-gd-pl .who, #rb-nflgd .rb-gd-sp .who{ grid-column:3; grid-row:1 / span 2; } #rb-nflgd .rb-gd-pl .fp, #rb-nflgd .rb-gd-sp .fp{ grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; gap:5px; padding:0 13px 10px; margin-top:-4px; } /* Phones: the chips take the whole row, under the replay button too, so two players fit on one line (Alex, 2026-10-04: Cousins and Jeanty sat on two). A third may wrap. */ @media (max-width:619px){ #rb-nflgd .rb-gd-pl .fp, #rb-nflgd .rb-gd-sp .fp{ grid-column:2 / -1; gap:5px 12px; } #rb-nflgd .rb-gd-pl .who, #rb-nflgd .rb-gd-sp .who{ grid-row:1; } } @media (min-width:620px){ #rb-nflgd .rb-gd-pl{ grid-template-columns:4px 1fr auto auto; } #rb-nflgd .rb-gd-sp{ grid-template-columns:5px 1fr auto auto; } #rb-nflgd .rb-gd-pl .who, #rb-nflgd .rb-gd-sp .who{ grid-column:4; } #rb-nflgd .rb-gd-pl .fp, #rb-nflgd .rb-gd-sp .fp{ grid-column:3; grid-row:1 / span 2; flex-direction:column; flex-wrap:nowrap; align-items:flex-end; padding:10px 4px 10px 0; margin-top:0; } #rb-nflgd .rb-gd-pl .fp .fpr, #rb-nflgd .rb-gd-sp .fp .fpr{ white-space:nowrap; } } /* ── team names in Anton SC ─────────────────────────────────────────────────────────────── The brand's display face, loaded render-blocking by the theme's own head, so there is no extra request to make. It is a caps-only face: the copy still says "Lions", the font draws it as LIONS, so the markup stays readable and screen readers hear a name rather than an acronym. Slightly tighter tracking than Anton and !important for the same reason the scores need it — style-mobile.css forces Outfit on a global element list. */ /* The name span is listed as well as its heading: on a phone style-mobile.css sets Outfit on every span with !important, which beats the family the span would otherwise inherit. */ #rb-nflgd .rb-gd-hdr .tm .nm b, #rb-nflgd .rb-gd-injside .h, #rb-nflgd .rb-gd-injside .h .tn, #rb-nflgd .rb-gd-tpside .h, #rb-nflgd .rb-gd-tpside .h .tn, #rb-nflgd .rb-gd-xside .h, #rb-nflgd .rb-gd-xside .h span, #rb-nflgd .rb-gd-cmphead .s, #rb-nflgd .rb-gd-cmphead .s .ab{ font-family:'Anton SC','Anton',Impact,sans-serif !important; font-weight:400 !important; letter-spacing:.01em; } /* Anton SC sets smaller than Outfit at the same size, so the header name gets a point back and the blocks that pair it with a crest stay on the crest's baseline. */ #rb-nflgd .rb-gd-hdr .tm .nm b{ font-size:var(--fs-5); } #rb-nflgd .rb-gd-injside .h, #rb-nflgd .rb-gd-tpside .h, #rb-nflgd .rb-gd-xside .h{ font-size:var(--fs-4); } #rb-nflgd .rb-gd-injside .h .tn, #rb-nflgd .rb-gd-tpside .h .tn, #rb-nflgd .rb-gd-xside .h span{ font-size:inherit; line-height:inherit; } /* The two abbreviations half as big again, nudged up to sit level with the crests (Alex, 2026-10-02): Anton SC's capitals sit low in their line box. */ #rb-nflgd .rb-gd-cmphead .s{ font-size:21px; line-height:24px; } #rb-nflgd .rb-gd-cmphead .ab{ font:inherit; position:relative; top:-2px; } /* ── Tecmo replay ───────────────────────────────────────────────────────────────────────── Sits exactly over the field and shares its viewBox, so a script written in yards lands on the right yard line without knowing the size of the picture. */ #rb-nflgd .rb-gd-tecmo{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; } #rb-nflgd .rb-gd-pl[data-play]{ cursor:pointer; } #rb-nflgd .rb-gd-pl[data-play]:hover{ background:var(--tint); } #rb-nflgd .rb-gd-pl[data-play]:focus-visible{ outline:2px solid var(--blue2); outline-offset:-2px; } /* Reduced motion is handled in tecmoRun, which paints the final frame and skips the loop. It used to be done here with display:none, which threw the play away instead of holding still — anyone with Reduce Motion on saw an empty field and no players at all. */ /* ── season form ────────────────────────────────────────────────────────────────────────── A value either side of its label, with the better one marked. Four groups rather than one list of twenty-two, because a wall of numbers is not a comparison. */ #rb-nflgd .rb-gd-form{ border-top:1px solid var(--hair); padding:0 0 4px; } #rb-nflgd .rb-gd-form .hd{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 13px 8px; font-size:var(--fs-2); font-weight:800; } #rb-nflgd .rb-gd-form .hd .c{ font-size:var(--fs-1); letter-spacing:.09em; text-transform:uppercase; color:var(--mute); font-weight:800; } #rb-nflgd .rb-gd-form .hd span:last-child{ text-align:right; } /* Centred, because each one heads a block that is itself symmetrical about the label column — left-aligning it made the group look as though it belonged to the away team. */ #rb-nflgd .rb-gd-form .grp{ padding:11px 13px 5px; font-size:var(--fs-1); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); text-align:center; } #rb-nflgd .rb-gd-form .r{ display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:8px; padding:4px 13px; } #rb-nflgd .rb-gd-form .r b{ font-size:var(--fs-3); font-weight:700; color:var(--ink2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-form .r b:first-child{ text-align:left; } #rb-nflgd .rb-gd-form .r b:last-child{ text-align:right; } #rb-nflgd .rb-gd-form .r b.win{ color:var(--blue); font-weight:800; } #rb-nflgd .rb-gd-form .r .lab{ text-align:center; font-size:var(--fs-2); color:var(--mute); font-weight:600; } /* ── the Tecmo lab ──────────────────────────────────────────────────────────────────────── One row per play the model can draw, each with its own link so a particular animation can be sent to somebody. */ #rb-nflgd .rb-gd-lab{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 10px; padding:10px 13px; border-top:1px solid var(--hair); cursor:pointer; } #rb-nflgd .rb-gd-lab:hover{ background:var(--tint); } #rb-nflgd .rb-gd-lab.on{ background:var(--tint); box-shadow:inset 3px 0 0 var(--blue); } #rb-nflgd .rb-gd-lab .n{ font-size:var(--fs-3); font-weight:800; } #rb-nflgd .rb-gd-lab .d{ grid-column:1/-1; font-size:var(--fs-2); color:var(--mute); line-height:1.4; } #rb-nflgd .rb-gd-lab .lk{ font-size:var(--fs-1); font-weight:700; color:var(--blue); text-decoration:none; } #rb-nflgd .rb-gd-labgrp{ padding:10px 13px 5px; font-size:var(--fs-1); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); background:var(--card2); border-top:1px solid var(--hair); } /* ── inline replay ──────────────────────────────────────────────────────────────────────── Appears directly under the play that was tapped, so the reader never has to scroll back to a field at the top of the page to see what they asked for. */ #rb-nflgd .rb-gd-replay{ border-top:1px solid var(--hair); background:var(--card2); padding:8px 10px 10px; } #rb-nflgd .rb-gd-replay .fieldwrap{ position:relative; line-height:0; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); } #rb-nflgd .rb-gd-sp[data-score]{ cursor:pointer; } #rb-nflgd .rb-gd-sp[data-score]:hover{ background:var(--tint); } #rb-nflgd .rb-gd-sp[data-score]:focus-visible{ outline:2px solid var(--blue2); outline-offset:-2px; } /* ── replay affordance ──────────────────────────────────────────────────────────────────── The row was already clickable, but a row that looks like text reads like text. */ #rb-nflgd .rb-gd-replaybtn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--blue); border:1px solid transparent; flex:0 0 auto; } #rb-nflgd .rb-gd-replaybtn svg{ width:11px; height:11px; margin-left:1px; fill:currentColor; } #rb-nflgd .rb-gd-replaybtn:hover{ background:var(--blue); color:#fff; } #rb-nflgd .rb-gd-lastplay{ align-items:center; } #rb-nflgd .rb-gd-lastplay .d{ flex:1 1 auto; } #rb-nflgd .rb-gd-lastplay[data-play]{ cursor:pointer; } #rb-nflgd .rb-gd-lastplay[data-play]:hover{ background:var(--tint); } /* The live spot marker steps aside while a play is being drawn: during a replay it is a second football sitting at the snap, and the ball is the one thing that should be moving. */ #rb-nflgd .fieldwrap.is-replaying .rb-gd-spot{ display:none; } /* ── desktop sizing and pairing ─────────────────────────────────────────────────────────── Everything is set in Outfit off the mount's own font-size, so one rule at the top lifts the whole tool a point on a desktop, where the phone's sizing reads small. */ @media (min-width:820px){ /* One block lifts every size on a desktop, where the phone's sizing reads small. */ #rb-nflgd.rb-gd{ --fs-0:12px; --fs-1:13px; --fs-2:14px; --fs-3:15px; --fs-4:17px; --fs-5:21px; --fd-1:21px; --fd-2:26px; --fd-3:35px; font-size:var(--fs-3); } /* Top performers and Team stats read as a pair: two halves of "how did they play". Side by side on a desktop, stacked on a phone. */ #rb-nflgd .rb-gd-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 11px; align-items:stretch; } #rb-nflgd .rb-gd-pair > .rb-gd-card{ margin-left:0; margin-right:0; } /* The curve is a headline, not a diagram to study: a third of the height it takes on a phone is enough to read the shape of a game. */ /* Shorter on a desktop, where the card is wide and a tall chart wastes the fold. Squashing is safe again: the scoring dots that it used to flatten are gone, and every stroke is non-scaling so a line keeps its weight in both directions. */ #rb-nflgd .rb-gd-wpchart{ height:148px; } } /* Quarter labels, under the drawing rather than inside it. */ /* Under the chart, on its own line. Absolutely positioned furniture over the plot (the scale and the crests) left these looking as though they floated at the 75% rule. */ #rb-nflgd .rb-gd-wpq{ display:grid; grid-template-columns:repeat(4,1fr); padding:5px var(--wpr) 0 40px; position:relative; z-index:1; } #rb-nflgd .rb-gd-wpq span{ text-align:center; font-size:var(--fs-1); font-weight:700; color:var(--mute); letter-spacing:.03em; } /* ── play callout ───────────────────────────────────────────────────────────────────────── What the play was, once it has finished (Alex, 2026-09-30): in the middle of the field, whatever the play. The label is dark, ringed in white so it holds on the turf and over the drive bars; the names sit on their own line under it. The two stack in one column, so a label that wraps on a phone ("BUCCANEERS INTERCEPTION") pushes the names down rather than onto them. Sizes follow the field's own width (the fieldwrap is a size container), so a phone's field gets the same picture smaller; the vw line is the fallback without container units. */ #rb-nflgd .fieldwrap{ container-type:inline-size; } #rb-nflgd .rb-gd-callout{ position:absolute; inset:0; pointer-events:none; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px,3cqw,18px); padding:0 4%; animation:rb-gd-callout-in .16s steps(3,end) both; } #rb-nflgd .rb-gd-callout .w, #rb-nflgd .rb-gd-callout .n{ line-height:1.05; text-wrap:balance; } #rb-nflgd .rb-gd-callout .w{ font-family:'Anton',Impact,sans-serif !important; font-size:clamp(34px,10.4vw,60px); font-size:clamp(34px,9cqw,60px); letter-spacing:.04em; color:#0b3d22; text-shadow:-3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff, 0 6px 0 rgba(0,0,0,.45); } #rb-nflgd .rb-gd-callout .n{ font-size:clamp(18px,6.6vw,42px); font-size:clamp(18px,6.6cqw,42px); font-weight:800; letter-spacing:.04em; color:#fff; text-shadow:-2px -2px 0 #0b132b, 2px -2px 0 #0b132b, -2px 2px 0 #0b132b, 2px 2px 0 #0b132b, 0 3px 0 rgba(0,0,0,.5); } #rb-nflgd .rb-gd-callout.is-td .w{ color:#0b5d2e; } #rb-nflgd .rb-gd-callout.is-fg .w{ color:#7c3a06; } #rb-nflgd .rb-gd-callout.is-to .w{ color:#9b1c14; } #rb-nflgd .rb-gd-callout.is-big .w{ color:#6b4a00; } @keyframes rb-gd-callout-in{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } } @media (prefers-reduced-motion:reduce){ #rb-nflgd .rb-gd-callout{ animation:none; } } /* ══ touch targets ════════════════════════════════════════════════════════════════════════ Seventeen controls sat under the 44px a thumb needs: the show-all toggle was 19px tall and every replay button 26px square. Inflating the drawing would have cost the density these screens depend on, so each control instead carries an invisible 44px pad centred on itself. The pad is a pseudo-element INSIDE the button, so it enlarges that button's own hit area and cannot steal a click from anything beside it. Where a control already owns ::after — the week selector draws its chevron there — the pad goes on ::before instead. */ #rb-nflgd .rb-gd-chipall, #rb-nflgd .rb-gd-replaybtn, #rb-nflgd .rb-gd-qj button, #rb-nflgd .rb-gd-ico{ position:relative; } #rb-nflgd .rb-gd-chipall::after, #rb-nflgd .rb-gd-replaybtn::after, #rb-nflgd .rb-gd-qj button::after, #rb-nflgd .rb-gd-ico::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; min-width:44px; height:44px; } /* The pill is only a drawing — the native select stacked over it is what a finger actually hits, so the hit area has to grow on the select, not on its wrapper. */ #rb-nflgd .rb-gd-sel select{ inset:auto 0 auto 0; top:50%; height:44px; transform:translateY(-50%); } /* ══ a live game should be the loudest thing on the board ═════════════════════════════════ Status was carried in a class and almost nothing else, so on a Sunday a game in progress read at the same weight as one that finished on Thursday. Live is a black outline; red is kept for the red zone (Alex, 2026-09-27). These rules sit BEFORE .on and .rz on purpose: being selected, and being in the red zone, still outrank merely being live. */ #rb-nflgd .rb-gd-chip.st-live{ border-color:var(--ink); background:var(--card); box-shadow:inset 0 0 0 1px var(--ink), var(--shadow); } #rb-nflgd .rb-gd-chip.st-final{ opacity:.82; } #rb-nflgd .rb-gd-chip.st-final:hover, #rb-nflgd .rb-gd-chip.st-final.on{ opacity:1; } /* Re-stated after the status rules so the two that mean "pay attention to THIS one" win. */ #rb-nflgd .rb-gd-chip.on{ border-color:var(--blue); opacity:1; box-shadow:inset 0 0 0 1px var(--blue), var(--shadow); } #rb-nflgd .rb-gd-chip.rz{ border-color:var(--live); opacity:1; box-shadow:inset 0 0 0 2px var(--live), var(--shadow); } /* The card carries the same signal at card scale: a live rail down its leading edge. */ #rb-nflgd .rb-gd-gc.st-live{ border-color:var(--live); box-shadow:inset 3px 0 0 var(--live), var(--shadow); } #rb-nflgd .rb-gd-gc.st-final{ opacity:.88; } #rb-nflgd .rb-gd-gc.st-final:hover{ opacity:1; } /* ══ the chip rail runs off the edge ══════════════════════════════════════════════════════ 1646px of chips in a 1308px window, with nothing on screen saying so. A fade at whichever end still has content, plus arrows on a desktop, where there is no swipe to discover it with. Both are driven by .can-l / .can-r, which the scroll handler sets. */ #rb-nflgd .rb-gd-chipwrap{ position:relative; } #rb-nflgd .rb-gd-chipwrap::before, #rb-nflgd .rb-gd-chipwrap::after{ content:""; position:absolute; top:0; bottom:12px; width:34px; pointer-events:none; opacity:0; transition:opacity .15s linear; z-index:2; } #rb-nflgd .rb-gd-chipwrap::before{ left:0; background:linear-gradient(to right, var(--bg) 20%, rgba(255,255,255,0)); } #rb-nflgd .rb-gd-chipwrap::after{ right:0; background:linear-gradient(to left, var(--bg) 20%, rgba(255,255,255,0)); } #rb-nflgd .rb-gd-chipwrap.can-l::before{ opacity:1; } #rb-nflgd .rb-gd-chipwrap.can-r::after{ opacity:1; } /* The grid state is the whole slate at once — there is nothing left to scroll to. */ #rb-nflgd .rb-gd-chipwrap.is-grid::before, #rb-nflgd .rb-gd-chipwrap.is-grid::after{ display:none; } #rb-nflgd .rb-gd-railbtn{ display:none; } @media (min-width:820px){ #rb-nflgd .rb-gd-chipwrap.can-l .rb-gd-railbtn.l, #rb-nflgd .rb-gd-chipwrap.can-r .rb-gd-railbtn.r{ display:inline-flex; } #rb-nflgd .rb-gd-chipwrap.is-grid .rb-gd-railbtn{ display:none; } #rb-nflgd .rb-gd-railbtn{ position:absolute; top:calc(50% - 6px); transform:translateY(-50%); z-index:3; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--ink2); box-shadow:var(--shadow2); } #rb-nflgd .rb-gd-railbtn.l{ left:2px; } #rb-nflgd .rb-gd-railbtn.r{ right:2px; } #rb-nflgd .rb-gd-railbtn:hover{ color:var(--blue); border-color:var(--blue); } #rb-nflgd .rb-gd-railbtn svg{ width:13px; height:13px; } } /* ══ slate filters ════════════════════════════════════════════════════════════════════════ With sixteen games the list IS the product, and without a filter every visit is a linear scan. These live in the gulf of empty space the control bar used to carry between the week selector and the clock. */ #rb-nflgd .rb-gd-filters{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; } #rb-nflgd .rb-gd-filters button{ display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:99px; background:var(--chip); color:var(--chipink); font-size:var(--fs-1); font-weight:800; letter-spacing:.02em; white-space:nowrap; border:1px solid transparent; position:relative; } #rb-nflgd .rb-gd-filters button::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; min-width:44px; height:44px; } #rb-nflgd .rb-gd-filters button:hover{ color:var(--blue); border-color:var(--blue2); } #rb-nflgd .rb-gd-filters button[aria-pressed="true"]{ background:var(--blue); color:#fff; } #rb-nflgd .rb-gd-filters button .n{ font-variant-numeric:tabular-nums; opacity:.7; font-weight:700; } #rb-nflgd .rb-gd-filters button[aria-pressed="true"] .n{ opacity:.85; } /* Red zone is a state, not a category, so it keeps the colour it has everywhere else. */ #rb-nflgd .rb-gd-filters button.f-rz[aria-pressed="true"]{ background:var(--live); } #rb-nflgd .rb-gd-filters button.f-rz .dot{ width:6px; height:6px; border-radius:50%; background:var(--live); flex:0 0 auto; } #rb-nflgd .rb-gd-filters button.f-rz[aria-pressed="true"] .dot{ background:#fff; } #rb-nflgd .rb-gd-filters button:disabled{ opacity:.4; } #rb-nflgd .rb-gd-filters button:disabled:hover{ color:var(--chipink); border-color:transparent; } /* ══ where you are in the page ════════════════════════════════════════════════════════════ The jump row is a map, not a set of shortcuts, so the section you are reading is marked. watchJump sets .on from a thin band across the middle of the viewport. */ #rb-nflgd .rb-gd-qj button.on{ background:var(--blue); border-color:var(--blue); color:#fff; } #rb-nflgd .rb-gd-qj button.on .bd{ background:#fff; color:var(--blue); } /* ══ a back control with words on it ══════════════════════════════════════════════════════ */ #rb-nflgd .rb-gd-back .lbl{ display:none; } @media (min-width:820px){ #rb-nflgd .rb-gd-back{ width:auto; gap:5px; padding:0 11px 0 8px; } #rb-nflgd .rb-gd-back .lbl{ display:inline; font-size:var(--fs-2); font-weight:700; } } /* ══ the pinned line, while a game is live ════════════════════════════════════════════════ Collapsed, this line is the only game state on screen for the rest of the page, so it has to carry possession and down-and-distance as well as the score. */ #rb-nflgd .rb-gd-hdrmini .pos{ width:5px; height:5px; border-radius:50%; background:var(--live); flex:0 0 auto; margin-right:3px; } #rb-nflgd .rb-gd-hdrmini .st .dd{ font-style:normal; font-weight:700; color:var(--ink2); font-size:var(--fs-1); } #rb-nflgd .rb-gd-hdrmini .st .dd::before{ content:"·"; margin:0 5px; color:var(--mute); font-weight:400; } /* On a narrow phone the down and distance would push the clock off the end; the spot it is at is already on the field, so only the down survives there. */ @media (max-width:420px){ #rb-nflgd .rb-gd-hdrmini.has-sit .st{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* ══ holding the height before the data lands ═════════════════════════════════════════════ The matchup is fetched after first paint whenever the server could not inline it warm. A card that springs into being shoves the rest of the page down under a reader who is mid-scroll, so the skeleton stands at the height the real card will be. */ #rb-nflgd .rb-gd-skel{ height:264px; border-radius:10px; margin:0 13px 13px; background:linear-gradient(100deg, var(--card2) 30%, var(--hair) 50%, var(--card2) 70%); background-size:280% 100%; animation:rb-gd-skel 1.3s linear infinite; } @keyframes rb-gd-skel{ from{ background-position:120% 0; } to{ background-position:-20% 0; } } @media (prefers-reduced-motion:reduce){ #rb-nflgd .rb-gd-skel{ animation:none; background:var(--card2); } } /* ══ a bigger target on the replay button ═════════════════════════════════════════════════ 26px was small for the most distinctive thing the tool does. No label: the icon carries it. */ #rb-nflgd .rb-gd-replaybtn{ width:32px; height:32px; } #rb-nflgd .rb-gd-replaybtn svg{ width:14px; height:14px; } /* ══ not everything is a card ═════════════════════════════════════════════════════════════ One radius, one border and one shadow ran from the score block down to the injury table, which flattens the hierarchy: if everything is lifted, nothing is. The score, the field and the win probability graph are what the page is about and keep the shadow. The reference modules — look-it-up material — drop to a flat ground with a hairline. */ /* One treatment for every module on the game screen, because they sit under each other and any difference between them reads as a mistake rather than as hierarchy: the card's own shadow, and a headed strip on a slightly darker ground to separate the title from the content. */ #rb-nflgd #rb-gd-s-box, #rb-nflgd #rb-gd-s-injuries, #rb-nflgd #rb-gd-s-matchup, #rb-nflgd #rb-gd-s-top, #rb-nflgd #rb-gd-s-conditions{ box-shadow:var(--shadow); border-color:var(--line); background:var(--card); } #rb-nflgd #rb-gd-s-box > .hd, #rb-nflgd #rb-gd-s-injuries > .hd, #rb-nflgd #rb-gd-s-matchup > .hd, #rb-nflgd #rb-gd-s-top > .hd, #rb-nflgd #rb-gd-s-conditions > .hd{ background:var(--card2); border-bottom:1px solid var(--hair); } /* ══ each team's colour down its own side ═════════════════════════════════════════════════ Away on the left, home on the right, the way the tile reads. Nothing across the top or the bottom: no live rail — the clock carries that. The red zone is the exception, further down. The rules sit late in the file so they win over the older state colours. */ #rb-nflgd .rb-gd-gc.has-sides, #rb-nflgd .rb-gd-gc.has-sides:hover{ border-color:var(--line); border-left:4px solid var(--ca); border-right:4px solid var(--ch); } #rb-nflgd .rb-gd-gc.has-sides.st-live{ box-shadow:var(--shadow2); } /* In the red zone the whole border goes red (Alex, 2026-09-27). The top and bottom are thickened with inset shadows rather than border width, so the tile does not change height and jump. */ #rb-nflgd .rb-gd-gc.has-sides.is-rz, #rb-nflgd .rb-gd-gc.has-sides.is-rz:hover{ border-color:var(--live); box-shadow:inset 0 3px 0 var(--live), inset 0 -3px 0 var(--live), var(--shadow2); } /* ══ for screen readers only ══════════════════════════════════════════════════════════════ Carries the live score, clock and down-and-distance. Never clipped to 0×0 with display:none, which would stop it being announced at all — it is 1px and off-screen instead. */ .rb-gd-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; } /* ══ the notepad ══════════════════════════════════════════════════════════════════════════ The same affordance the rankings and matchup-ratings tools carry, opening the same shared card. Deliberately quiet: it sits beside a name the reader is already reading, and it is not the reason they came to this row. */ /* .rb-gd-pcard, NOT .rb-gd-note: that name was already taken by the callout box further up this file, which carries border-left:4px solid var(--blue). Reusing it drew a blue bar beside every player's name in two sections — a collision no selector on this rule could have undone. */ #rb-nflgd .rb-gd-pcard{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-2px; margin-left:5px; width:18px; height:18px; border-radius:5px; border:0; background:none; color:var(--mute); flex:0 0 auto; position:relative; } #rb-nflgd .rb-gd-pcard::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; min-width:38px; height:38px; } #rb-nflgd .rb-gd-pcard:hover{ color:var(--blue); background:var(--tint); } /* In front of the name, a quarter closer than it sat behind it: 6.3px from the icon's drawing to the name's first letter, against 8.4px before (the button pads the icon 2.5px a side). */ #rb-nflgd .rb-gd-box td .rb-gd-pcard{ margin:0 1px 0 0; vertical-align:middle; } /* ══ the reader's own players ═════════════════════════════════════════════════════════════ A count, not a flag: "which of these games do I have a stake in" is the question, and three players is a different answer from one. */ #rb-nflgd .rb-gd-mine{ display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:99px; background:var(--tint); color:var(--blue); font-size:var(--fs-1); font-weight:800; line-height:1; white-space:nowrap; } #rb-nflgd .rb-gd-mine svg{ fill:currentColor; } #rb-nflgd .rb-gd-filters button.f-mine[aria-pressed="true"]{ background:var(--blue); } /* ══ switching between the two tools ══════════════════════════════════════════════════════ Two halves of the same Sunday, so the switch is the first thing on the page rather than a link buried at the bottom of one of them. */ #rb-nflgd .rb-gd-switch{ display:inline-flex; align-items:center; gap:2px; margin:0 10px 8px; padding:2px; border-radius:99px; background:var(--chip); } #rb-nflgd .rb-gd-switch > *{ display:inline-flex; align-items:center; height:28px; padding:0 13px; border-radius:99px; font-size:var(--fs-1); font-weight:800; line-height:1; color:var(--chipink); text-decoration:none; white-space:nowrap; } #rb-nflgd .rb-gd-switch > .on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); } #rb-nflgd .rb-gd-switch > a:hover{ color:var(--blue); } /* ══ players to watch ═════════════════════════════════════════════════════════════════════ Built on the injury column's shape, because the two sit next to each other on the same screen and were reading as two different products: the same white card, the same crest-and-name header in Anton SC, the same hairline between rows. The two numeric columns are centred under centred headings — they are being compared down the column, not read as a sentence. */ #rb-nflgd .rb-gd-tpside{ background:var(--card); padding:10px 12px 12px; min-width:0; } #rb-nflgd .rb-gd-tpside .h{ display:flex; align-items:center; gap:8px; font-size:var(--fs-3); font-weight:800; padding-bottom:8px; min-width:0; } #rb-nflgd .rb-gd-tpside .h .lg{ width:33px; height:33px; object-fit:contain; flex:0 0 auto; } #rb-nflgd .rb-gd-tpside .hd, #rb-nflgd .rb-gd-tpside .r{ display:grid; grid-template-columns:minmax(0,1fr) var(--tpc) 62px var(--tpc); align-items:center; gap:var(--tpg); position:relative; } /* MR and DvP share a width and the divider takes no column of its own, so the three figures sit at equal distances: a divider column plus a wider DvP had put DvP 86px from Last Week against 68px for MR. */ #rb-nflgd .rb-gd-tpside{ --tpc:54px; --tpg:10px; } /* DvP keeps its own mixed case: in the row's capitals it read as "DVP". */ #rb-nflgd .rb-gd-tpside .hd abbr.mc{ text-transform:none; letter-spacing:.02em; } /* A thin dotted rule between the player's own numbers and what his opponent allows. */ /* Drawn on the row, halfway across the gap before DvP. */ #rb-nflgd .rb-gd-tpside .hd, #rb-nflgd .rb-gd-tpside .r{ position:relative; } #rb-nflgd .rb-gd-tpside .hd::after, #rb-nflgd .rb-gd-tpside .r::after{ content:""; position:absolute; top:0; bottom:0; right:calc(var(--tpc) + var(--tpg) / 2); border-left:1px dotted var(--line); } @media (max-width:619px){ #rb-nflgd .rb-gd-tpside{ --tpc:46px; --tpg:6px; } #rb-nflgd .rb-gd-tpside .hd, #rb-nflgd .rb-gd-tpside .r{ grid-template-columns:minmax(0,1fr) var(--tpc) 48px var(--tpc); } #rb-nflgd .rb-gd-tpside .v.pill{ min-width:40px; padding:0 4px; } } #rb-nflgd .rb-gd-tpside .hd{ font-size:var(--fs-1); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); padding:0 0 6px; line-height:1.15; } #rb-nflgd .rb-gd-tpside .hd .c, #rb-nflgd .rb-gd-tpside .r .c{ text-align:center; } #rb-nflgd .rb-gd-tpside .hd abbr{ text-decoration:none; border-bottom:1px dotted var(--mute); cursor:help; } #rb-nflgd .rb-gd-tpside .r{ padding:7px 0; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-tpside .i{ min-width:0; } #rb-nflgd .rb-gd-tpside .i b{ display:block; font-size:var(--fs-2); font-weight:700; line-height:1.25; } #rb-nflgd .rb-gd-tpside .i span{ display:block; font-size:var(--fs-1); color:var(--mute); line-height:1.35; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-tpside .v{ font-size:var(--fs-2); font-weight:800; color:var(--ink2); font-variant-numeric:tabular-nums; } /* The same chip the matchup-ratings tool draws: the colour is the rating's own point on one continuous ramp, painted as the background with dark ink on it, not as coloured text. */ #rb-nflgd .rb-gd-tpside .v.pill{ display:inline-grid; place-items:center; min-width:46px; height:24px; padding:0 6px; border-radius:6px; color:#101b2e; letter-spacing:-.01em; line-height:1; } #rb-nflgd .rb-gd-tpside .v.pill.b-g{ background:hsl(134 42% 60%); } #rb-nflgd .rb-gd-tpside .v.pill.b-y{ background:hsl(48 54% 62%); } #rb-nflgd .rb-gd-tpside .v.pill.b-r{ background:hsl(6 58% 63%); } #rb-nflgd .rb-gd-tpside .v.na{ color:var(--mute); } #rb-nflgd .rb-gd-tpside .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* Who to watch carries four columns of its own, so two lineups abreast do not fit a phone — the rows were scrolling sideways inside the card. One lineup at a time below 620px; the splits and head-to-head blocks that share .rb-gd-xgrid are two short columns and still do. */ /* One team at a time on a phone, chosen by tab. Stacked, the second lineup started two screens below the first, and nobody compares two nine-man lists that far apart. */ #rb-nflgd .rb-gd-tponly{ display:none; } @media (max-width:619px){ #rb-nflgd #rb-gd-s-top .rb-gd-xgrid{ grid-template-columns:1fr; } #rb-nflgd .rb-gd-tponly{ display:block; } #rb-nflgd #rb-gd-s-top .rb-gd-tpside.is-off{ display:none; } /* The crest and name are already in the tab above it. */ #rb-nflgd #rb-gd-s-top .rb-gd-tpside .h{ display:none; } } /* (Two blocks were spliced out of this file by accident on 24 Sep while removing a stale alignment rule: the kickoff-conditions sizing below, and the section-header rule after it. Without the first, the weather SVGs had no width or height and rendered at their intrinsic size — a cloud several hundred pixels tall in the middle of the score card. Restored here. The rule that WAS meant to go was the second crest-alignment attempt, align-items:baseline plus a 0.10em nudge on the badge; it stays gone, and the base rules higher up this file align the crest and the name on their own — measured at under a fifth of a pixel.) */ /* ══ kickoff conditions in the fixture row ════════════════════════════════════════════════ The betting line keeps the left of the row it already lived in; the venue and the sky share the right, the field name sitting immediately before the icons it belongs to. Four elements and no words — a sky described in text ("Overcast Clouds") is the longest thing in the row and the least informative, and it is the first thing to truncate on a narrow screen. */ #rb-nflgd .rb-gd-cond2{ display:inline-flex; align-items:center; gap:7px; min-width:0; margin-left:auto; color:var(--ink2); } /* The broadcast, then the field: where to watch it, then where it is. */ #rb-nflgd .rb-gd-cond2 .ch{ font-weight:500; color:var(--ink2); white-space:nowrap; flex:0 0 auto; } #rb-nflgd .rb-gd-cond2 .ch + .fld::before{ content:"·"; margin-right:7px; color:var(--mute); font-weight:400; } #rb-nflgd .rb-gd-cond2 .fld{ font-weight:500; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #rb-nflgd .rb-gd-cond2 .wx{ font-style:normal; display:inline-flex; align-items:center; flex:0 0 auto; color:var(--mute); } #rb-nflgd .rb-gd-cond2 .wx.num{ font-weight:500; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap; } /* The temperature reads as one thing with the sky beside it, and the speed with its own icon, so the gap closes inside each pair and opens between them. */ #rb-nflgd .rb-gd-cond2 .wx.num + .wx{ margin-left:-2px; } /* THE load-bearing pair. An inline SVG with no width and no height falls back to its own intrinsic size, which for these is enormous. */ #rb-nflgd .rb-gd-wxi{ width:17px; height:17px; display:block; } #rb-nflgd .rb-gd-hdr .sit .od{ flex:0 0 auto; } @media (max-width:520px){ /* The venue is the one part of this the reader can find elsewhere on the screen. */ #rb-nflgd .rb-gd-cond2 .fld{ display:none; } } /* ══ section headers ══════════════════════════════════════════════════════════════════════ Injuries, Matchup, Players to watch are the page's furniture; at 12px uppercase they read as captions on the block above rather than as the start of a new one. */ #rb-nflgd .rb-gd-card > .hd .t{ font-size:var(--fs-4); letter-spacing:.06em; color:var(--ink2); } /* The figures line up on the MIDDLE of the team name, not its baseline or the middle of the name block (the record under the name pulled that down a line). Baseline first, then lifted by half the difference in letter height: the name's small capitals stand 0.77em of 19–21px, the Outfit digits 0.72em of 14–15px, so on a shared baseline the digits' middle sat 2.3–2.7px low. 0.17em of the digits' own size is that gap at both sizes. Measured with canvas ink metrics, not guessed. The crest stays centred. */ #rb-nflgd .rb-gd-hdr .tm .nm, #rb-nflgd .rb-gd-hdr .tm .wp, #rb-nflgd .rb-gd-hdr .tm .ip, #rb-nflgd .rb-gd-hdr .tm .qs, #rb-nflgd .rb-gd-hdr .tm .sc{ align-self:baseline; } #rb-nflgd .rb-gd-hdr .tm .wp, #rb-nflgd .rb-gd-hdr .tm .ip, #rb-nflgd .rb-gd-hdr .tm .qs{ position:relative; top:-.17em; } /* The total shares that baseline too, but its Anton digits stand 0.86em of 35px — 30px of ink against the name's 18 — so their middle rode about 7px high (Alex, 2026-09-28: "too high"). Lowered by 0.195em of its own size, the gap measured with canvas ink metrics, it centres on the quarter scores and the name at desktop and phone sizes alike. Live only: after the game the total is the name's size and already sits on their middle. */ #rb-nflgd .rb-gd-hdr:not(.is-final) .tm .sc{ position:relative; top:.195em; } /* ══ injury rows, matched left and right ══════════════════════════════════════════════════ Every row the same height, so the two teams' columns line up down the card. */ #rb-nflgd .rb-gd-injside .r{ min-height:46px; } /* ══ the season-form rank ═════════════════════════════════════════════════════════════════ A number on its own — 4.9 yards a play — means nothing to most readers; 4.9 (3rd) means everything. It sits on its own team's side of the value so each column reads as one team. */ #rb-nflgd .rb-gd-form .r b{ display:inline-flex; align-items:baseline; gap:5px; } #rb-nflgd .rb-gd-form .r b:first-child{ justify-content:flex-start; } #rb-nflgd .rb-gd-form .r b:last-child{ justify-content:flex-end; } #rb-nflgd .rb-gd-form .hd .c:empty{ display:none; } #rb-nflgd .rb-gd-form .r b .rk{ font-style:normal; font-weight:600; font-size:var(--fs-1); color:var(--mute); font-variant-numeric:tabular-nums; } /* ══ the tile's sky ═══════════════════════════════════════════════════════════════════════ */ #rb-nflgd .rb-gd-gc .top .meta{ display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; } #rb-nflgd .rb-gd-gc .top .meta .wx{ font-style:normal; display:inline-flex; flex:0 0 auto; color:var(--mute); } #rb-nflgd .rb-gd-gc .top .meta .rb-gd-wxi{ width:16px; height:16px; } /* ══ the tool switch ══════════════════════════════════════════════════════════════════════ Two tools, named in full. It was a pair of quiet pills that read as a filter; at this size it reads as what it is — the choice of which of the two Sunday screens you are on. */ /* In the control bar now rather than on a row of its own, and centred in it: two tools is a page-level choice and it was spending a whole 46px row to say so. */ #rb-nflgd .rb-gd-switch{ display:flex; gap:3px; margin:0 auto; padding:3px; border-radius:12px; background:var(--chip); flex:0 1 auto; } #rb-nflgd .rb-gd-switch > *{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 14px; border-radius:9px; font-size:var(--fs-1); font-weight:800; line-height:1.15; text-align:center; color:var(--chipink); text-decoration:none; white-space:nowrap; } #rb-nflgd .rb-gd-switch > .on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); } #rb-nflgd .rb-gd-switch > a:hover{ color:var(--blue); } /* On a phone the switch shares its row with the back arrow. */ @media (max-width:619px){ #rb-nflgd .rb-gd-switch{ padding:2px; gap:2px; } #rb-nflgd .rb-gd-switch > *{ padding:0 6px; min-height:30px; letter-spacing:-.01em; } #rb-nflgd .rb-gd-bar{ gap:6px; } } /* ══ the whole slate, on a desktop ════════════════════════════════════════════════════════ The grid cell is narrower than the strip's 96px, so its crest had been shrinking with it. Back up 20%, which is what makes the grid legible at a glance rather than merely complete. */ #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip .s .lg{ width:19px; height:19px; } @media (min-width:820px){ #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip{ padding:5px 7px 4px; } #rb-nflgd .rb-gd-chips.is-grid .rb-gd-chip .s .lg{ width:20px; height:20px; } } /* ══ the player card, sized to what it holds ══════════════════════════════════════════════ The shared resource fixes the card at 75% of the viewport so switching tabs never resizes it — right for the draft kit, wrong here, where the card opens on Overview and a Schedule- sized box leaves half of it empty. This matches the rankings tool: height by content, capped at 86vh. Scoped to the body class because the card is appended to , outside the mount, so the shared file itself is left alone for every other tool that loads it. */ body.rb-nflgd-page .rb-card{ height:auto; min-height:0; max-height:86vh; } body.rb-nflgd-page .rb-card-body{ flex:0 1 auto; } /* ══ what just changed ════════════════════════════════════════════════════════════════════ The same wash the live scoreboard uses when a value moves — it is what makes a board feel live rather than merely current. Tinted rather than coloured, so a score that changes is noticed without the eye being dragged off whatever the reader was actually reading. */ #rb-nflgd .rb-gd-chg{ animation:rb-gd-chg 1.5s ease-out; border-radius:5px; } @keyframes rb-gd-chg{ 0%{ background-color:var(--tint); } 100%{ background-color:transparent; } } @media (prefers-reduced-motion:reduce){ /* Still marked, just not animated: the point is to notice it, not to watch it fade. */ #rb-nflgd .rb-gd-chg{ animation:none; background-color:var(--tint); } } /* ══ bar controls: the passing-TD setting and the order ═══════════════════════════════════ */ #rb-nflgd .rb-gd-ptd{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:99px; background:var(--chip); color:var(--chipink); font-size:var(--fs-1); font-weight:800; white-space:nowrap; cursor:pointer; } #rb-nflgd .rb-gd-ptd input{ width:14px; height:14px; margin:0; accent-color:var(--blue); cursor:pointer; } #rb-nflgd .rb-gd-ptd:hover{ color:var(--blue); } #rb-nflgd .rb-gd-sort{ display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:99px; background:var(--chip); } #rb-nflgd .rb-gd-sort button{ height:26px; padding:0 11px; border-radius:99px; font-size:var(--fs-1); font-weight:800; color:var(--chipink); white-space:nowrap; position:relative; } #rb-nflgd .rb-gd-sort button::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; min-width:44px; height:44px; } #rb-nflgd .rb-gd-sort button[aria-pressed="true"]{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); } /* ══ the red zone, on a chip as well as a tile ════════════════════════════════════════════ The tile says it in words; the rail had only a red border, which reads as "selected" more than it reads as "someone is about to score". A pulsing dot says which. */ #rb-nflgd .rb-gd-chip.rz .c::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--live); margin-right:4px; vertical-align:1px; animation:rb-gd-pulse 1.5s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ #rb-nflgd .rb-gd-chip.rz .c::before{ animation:none; } } /* ══ upset watch ══════════════════════════════════════════════════════════════════════════ The no-hitter treatment: a banner across the top of the tile that says what is happening rather than a badge that only says a category. It is the loudest mark on the board, which is the point — and it clears itself the moment the favourite is safe again. */ #rb-nflgd .rb-gd-upset{ display:flex; align-items:center; gap:7px; padding:6px 14px; background:var(--warn); color:#fff; font-size:var(--fs-1); font-weight:800; letter-spacing:.06em; text-transform:uppercase; } #rb-nflgd .rb-gd-upset .rb-gd-dot{ background:currentColor; } #rb-nflgd .rb-gd-upset .who{ margin-left:auto; letter-spacing:0; text-transform:none; font-weight:600; opacity:.93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* (The Market card's rules were here. The card is gone — two of its three rows were already in the fixture row at the top of the screen — and the one number it added, the implied scoreline, now sits beside the spread and the total it is derived from.) */ /* ══ the crests are trimmed server-side now ═══════════════════════════════════════════════ rb_nflgd_logo_trimmed() crops each badge to its real edges and re-centres it on a square, so the mark's centre IS the box's centre and no optical nudge is needed. The rule that used to sit here was a guess at ESPN's per-team padding; it is gone rather than kept at zero, so nobody has to wonder whether it is still doing something. */ /* ══ the market's scoreline, beside the probability it belongs with ═══════════════════════ Both answer "who is expected to win, and by how much" — one as a percentage, one as a score — so they share the row rather than sitting a card apart. */ #rb-nflgd .rb-gd-hdr .wphead .imp{ grid-column:1 / span 3; font-size:var(--fs-1); font-weight:700; color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:end; } /* ══ a live tile outweighs a finished one ═════════════════════════════════════════════════ Live games sort to the top; this is the other half of the same idea — the one being played should look heavier than the eleven that are over. */ /* Taller and heavier without leaving the type scale: the weight comes from the rail, the deeper shadow and the extra air, not from a one-off font size. */ #rb-nflgd .rb-gd-gc.st-live{ box-shadow:inset 3px 0 0 var(--live), var(--shadow2); opacity:1; } #rb-nflgd .rb-gd-gc.st-live .top{ padding:10px 14px 4px; } #rb-nflgd .rb-gd-gc.st-live .top .st{ font-size:var(--fs-2); } #rb-nflgd .rb-gd-gc.st-live .top .ch{ font-weight:700; color:var(--mute); white-space:nowrap; } /* Down and distance in the corner: the row it had to itself is gone. */ #rb-nflgd .rb-gd-gc.st-live .top .dd{ margin-left:auto; font-weight:700; color:var(--ink2); white-space:nowrap; } /* A live tile draws both layouts: the scoreboard line on a phone, the full card on a desktop. */ @media (max-width:819px){ #rb-nflgd .rb-gd-gc .rb-gd-long, #rb-nflgd .rb-gd-gc.st-live .top .meta, #rb-nflgd .rb-gd-gc.st-live .top .ch, #rb-nflgd .rb-gd-gc.st-live > .sit{ display:none; } } @media (min-width:820px){ #rb-nflgd .rb-gd-gc .rb-gd-short, #rb-nflgd .rb-gd-gc.st-live .top .dd{ display:none; } } /* The live header in three (liveTopHTML): equal outer cells, so RED ZONE sits on the tile's true centre whatever the clock and the right-hand text measure. */ #rb-nflgd .rb-gd-gc .top.is-live{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; } #rb-nflgd .rb-gd-gc .top.is-live .l{ display:flex; align-items:center; gap:8px; min-width:0; } #rb-nflgd .rb-gd-gc .top.is-live .c{ display:flex; justify-content:center; } #rb-nflgd .rb-gd-gc .top.is-live .r{ display:flex; justify-content:flex-end; align-items:center; min-width:0; overflow:hidden; } /* The down and distance gives way before it can run under the RZ pill (Alex, 2026-10-04). */ #rb-nflgd .rb-gd-gc .top.is-live .dd{ margin-left:0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* The stadium, bottom right of a live desktop tile. */ #rb-nflgd .rb-gd-gc .sit .venue{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; min-width:0; font-size:var(--fs-2); color:var(--mute); } #rb-nflgd .rb-gd-gc .sit .venue .vn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-size:var(--fs-2); line-height:18px; } #rb-nflgd .rb-gd-gc .sit .venue .wx{ font-style:normal; display:inline-flex; flex:0 0 auto; } #rb-nflgd .rb-gd-gc .sit .venue .rb-gd-wxi{ width:16px; height:16px; } #rb-nflgd .rb-gd-long{ display:block; } /* Timeouts left: three short underlines in the team's colour, grey once used. */ #rb-nflgd .rb-gd-gc .tous{ display:inline-flex; gap:3px; align-items:center; } #rb-nflgd .rb-gd-gc .tou{ display:block; width:11px; height:3px; border-radius:2px; background:var(--hair); } #rb-nflgd .rb-gd-gc .tm .nm .sub{ display:flex; align-items:center; gap:8px; margin-top:2px; font-size:var(--fs-1); font-weight:600; color:var(--mute); } #rb-nflgd .rb-gd-gc .tm .nm .sub i{ font-style:normal; } /* One line: crest outside, name inside, the scores facing each other in the middle. */ #rb-nflgd .rb-gd-short{ display:block; } #rb-nflgd .rb-gd-ln{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; padding:4px 14px 12px; } #rb-nflgd .rb-gd-ln .ls{ display:flex; align-items:center; gap:8px; min-width:0; } #rb-nflgd .rb-gd-ln .ls.h{ flex-direction:row-reverse; text-align:right; } #rb-nflgd .rb-gd-ln .ls .lg{ width:34px; height:34px; display:block; object-fit:contain; flex:0 0 auto; } #rb-nflgd .rb-gd-ln .nm{ display:flex; flex-direction:column; min-width:0; line-height:1.2; } #rb-nflgd .rb-gd-ln .nm b{ font-size:var(--fs-4); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-ln .nm .sub{ display:flex; align-items:center; gap:6px; min-height:14px; white-space:nowrap; } #rb-nflgd .rb-gd-ln .tou{ width:9px; } #rb-nflgd .rb-gd-ln .tous{ gap:2px; } #rb-nflgd .rb-gd-ln .ls.h .nm .sub{ flex-direction:row-reverse; } #rb-nflgd .rb-gd-ln .nm i{ font-style:normal; font-size:var(--fs-1); font-weight:600; color:var(--mute); } #rb-nflgd .rb-gd-ln .scs{ display:flex; align-items:center; gap:9px; } #rb-nflgd .rb-gd-ln .sc{ font-family:'Anton',Impact,sans-serif !important; font-size:var(--fd-2); line-height:1; color:var(--ink); min-width:1.1em; text-align:center; } /* A short dark-grey dash between the scores (was a slash). */ #rb-nflgd .rb-gd-ln .rb-gd-ball.is-off{ visibility:hidden; } /* Two digits' width each, packed against the dash, so 7 becoming 10 does not move the score either. */ #rb-nflgd .rb-gd-ln .scs > .sc{ min-width:2ch; } #rb-nflgd .rb-gd-ln .scs > .sc:nth-child(2){ text-align:right; } #rb-nflgd .rb-gd-ln .scs > .sc:nth-child(4){ text-align:left; } #rb-nflgd .rb-gd-ln .sep{ display:block; width:8px; height:2px; background:var(--ink2); } /* Phones: the team names must never be cut off (Alex, 2026-09-28). The middle gives up width first — smaller scores, set closer — then the crests and gaps. A name still too wide steps down a type size (fitNames in the JS). */ @media (max-width:619px){ #rb-nflgd .rb-gd-ln{ gap:6px; padding-left:10px; padding-right:10px; } #rb-nflgd .rb-gd-ln .scs{ gap:5px; } #rb-nflgd .rb-gd-ln .sc{ font-size:var(--fd-1); min-width:0; } #rb-nflgd .rb-gd-ln .ls{ gap:6px; } /* Bigger crests and 2px more name than the desktop-derived sizes (Alex, 2026-09-28). */ #rb-nflgd .rb-gd-ln .ls .lg{ width:32px; height:32px; } #rb-nflgd .rb-gd-ln .nm b{ font-size:var(--fs-4); } /* The tile 10% taller: the air goes above and below the header and the row. */ #rb-nflgd .rb-gd-gc.st-live .top{ padding-top:12px; padding-bottom:6px; } #rb-nflgd .rb-gd-ln{ padding-top:4px; padding-bottom:14px; } } /* Set by fitNames() only on a name that would otherwise be cut off. */ #rb-nflgd .rb-gd-ln .nm b.is-long, #rb-nflgd .rb-gd-fline .nm b.is-long{ font-size:var(--fs-3); } #rb-nflgd .rb-gd-ln .nm b.is-longer, #rb-nflgd .rb-gd-fline .nm b.is-longer{ font-size:var(--fs-2); } /* ══ the score and the chart, side by side ════════════════════════════════════════════════ The score card was half empty on a desktop and the chart was full width and flat, which is what made every swing look like a ripple. Halving both puts them on one row: the chart gets the same movement in half the horizontal space, so a touchdown reads as a step rather than a slope. Stacked on a phone, where there is only ever one column. */ #rb-nflgd .rb-gd-top{ display:block; } @media (min-width:980px){ #rb-nflgd .rb-gd-top.has-wp{ display:grid; grid-template-columns:1fr 1fr; gap:0 11px; align-items:start; } #rb-nflgd .rb-gd-top.has-wp > .rb-gd-scorecol .rb-gd-hdr, #rb-nflgd .rb-gd-top.has-wp > .rb-gd-scorecol > .rb-gd-card{ margin-left:10px; margin-right:0; } #rb-nflgd .rb-gd-top.has-wp > .rb-gd-card{ margin-left:0; margin-right:10px; } /* The pinned header only makes sense while the score is a full-width band of its own. */ #rb-nflgd .rb-gd-top.has-wp .rb-gd-hdrpad{ display:none; } /* Score left, chart right — and the wrapper is what keeps it that way. */ #rb-nflgd .rb-gd-top.has-wp > .rb-gd-scorecol{ grid-column:1; min-width:0; } #rb-nflgd .rb-gd-top.has-wp > .rb-gd-card{ grid-column:2; min-width:0; } /* The chart takes the height of the score and field beside it rather than leaving a hole under itself. Every overlay is placed as a fraction of the plot, so it stretches cleanly. */ #rb-nflgd .rb-gd-top.has-wp{ align-items:stretch; } #rb-nflgd .rb-gd-top.has-wp > .rb-gd-card{ display:flex; flex-direction:column; margin-bottom:11px; } #rb-nflgd .rb-gd-top.has-wp .rb-gd-wp, #rb-nflgd .rb-gd-top.has-wp .rb-gd-wpwrap{ flex:1 1 auto; display:flex; flex-direction:column; } #rb-nflgd .rb-gd-top.has-wp .rb-gd-wpplot{ flex:1 1 auto; display:flex; } #rb-nflgd .rb-gd-top.has-wp .rb-gd-wpplot{ min-height:233px; } #rb-nflgd .rb-gd-top.has-wp .rb-gd-wpbox{ flex:1 1 auto; } /* Absolute, so the drawing takes the box's height rather than its own aspect ratio. */ #rb-nflgd .rb-gd-top.has-wp .rb-gd-wpchart{ position:absolute; inset:0; width:100%; height:100%; } /* After the game there is no field under the score, so the score card grows to the chart's height and carries the betting lines in the room. */ #rb-nflgd .rb-gd-top.has-wp > .rb-gd-scorecol{ display:flex; flex-direction:column; } #rb-nflgd .rb-gd-top.has-wp .rb-gd-hdr.is-final{ flex:1 1 auto; display:flex; flex-direction:column; } #rb-nflgd .rb-gd-top.has-wp .rb-gd-hdr.is-final .rb-gd-lines{ margin-top:auto; } } /* A live Top Scorers list scrolls inside itself; the live screen's own rules (end of file) let it fill its column on a desktop and show whole behind the section buttons. */ #rb-nflgd .rb-gd-card.is-live .rb-gd-pflist{ max-height:320px; overflow-y:auto; overscroll-behavior:contain; } /* ══ live: pairs below the plays ══════════════════════════════════════════════════════════ Players beside Team Stats, News beside Injuries; each ends at its own last row. */ #rb-nflgd .rb-gd-pair.rb-gd-boxpair, #rb-nflgd .rb-gd-pair.rb-gd-newsinj{ align-items:start; } #rb-nflgd .rb-gd-boxpair > .rb-gd-card, #rb-nflgd .rb-gd-newsinj > .rb-gd-card{ min-width:0; } /* Injuries at half width: one line a player, so both teams fit a desktop screen untoggled. */ @media (min-width:820px){ #rb-nflgd .rb-gd-newsinj #rb-gd-s-injuries .r{ min-height:0; align-items:center; padding:6px 0; } #rb-nflgd .rb-gd-newsinj #rb-gd-s-injuries .r .i span{ display:inline; margin-left:6px; } #rb-nflgd .rb-gd-newsinj #rb-gd-s-injuries .r .i b{ display:inline; } } /* Box Score – Players: no grey tray behind the team toggles; each toggle carries its own shadow. The tray scrolls sideways, which clips shadows, so it is left unclipped here. */ #rb-nflgd #rb-gd-s-box .rb-gd-seg{ background:transparent; padding:4px 2px 6px; overflow:visible; } #rb-nflgd #rb-gd-s-box .rb-gd-seg button.tc{ box-shadow:var(--shadow2); border:1px solid var(--line); } #rb-nflgd #rb-gd-s-box .rb-gd-seg button.tc[aria-selected="true"]{ border-color:var(--tc); } /* ══ the chart's own furniture ════════════════════════════════════════════════════════════ */ /* Read outward from the middle: 50 at the centre, 75 and then 100 towards each edge. Below the midline the line is the AWAY team's probability RISING, not the home team's falling, so labelling that half 25% said the opposite of what the chart means. */ #rb-nflgd .rb-gd-wpscale i:first-child, #rb-nflgd .rb-gd-wpscale i:last-child{ opacity:.75; } /* The crests replace the team names: each sits on its own 75% rule in the right-hand margin, at the score block's size, so the chart says whose half is whose without a row for it. */ #rb-nflgd .rb-gd-wpcrest{ position:absolute; right:0; top:0; bottom:0; width:var(--wpr); pointer-events:none; } #rb-nflgd .rb-gd-wpcrest i{ position:absolute; left:50%; width:var(--wpc); transform:translate(-50%,-50%); display:block; line-height:0; } /* max-width:none — the theme's img{max-width:100%} held them to half the margin. */ #rb-nflgd .rb-gd-wp .rb-gd-wpcrest img{ width:var(--wpc); height:var(--wpc); max-width:none; object-fit:contain; display:block; } /* The scrubber's dot lives OUT here, in the page's own coordinates. Inside the SVG it inherited the squash and came out an ellipse — which is why it looked crushed and oversized. Half the size it was, and round at every chart height. */ #rb-nflgd .rb-gd-wpdot{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--card); border:2px solid var(--ink); opacity:0; pointer-events:none; transition:opacity .08s linear; } /* ══ the drive on the field ═══════════════════════════════════════════════════════════════ The key under the game screen's field: which colour is which kind of snap. */ #rb-nflgd .rb-gd-dkey{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; padding:6px 12px 8px; font-size:var(--fs-1); line-height:16px; font-weight:600; color:var(--mute); } #rb-nflgd .rb-gd-dkey span{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-1); line-height:16px; } #rb-nflgd .rb-gd-dkey i{ display:inline-block; width:14px; height:6px; border-radius:1px; box-shadow:0 0 0 1px #0b132b; } #rb-nflgd .rb-gd-dkey i.is-to{ box-shadow:0 0 0 1px #c8d2de; } /* ══ score and turnover flashes ═══════════════════════════════════════════════════════════ Five seconds of the flash treatment the moment a score or a turnover lands — over the field on the game screen, over the whole tile on the board — then its banner takes over (Alex, 2026-09-30). Held once drawn, so a poll's redraw does not snap it in again. */ #rb-nflgd .rb-gd-pop.is-held{ animation:none; } #rb-nflgd .rb-gd-evflash{ z-index:3; } /* The tile is a size container, so its flash is sized off the tile's own width: a 3-across desktop tile is ~360px, narrower than a phone's (review of 12c0e9ac9). The pixel face is one em per glyph, so "BUF TURNOVER" (12) and "FUMBLE RETURN TD" (16) set the word and detail sizes. */ #rb-nflgd .rb-gd-gc{ position:relative; container-type:inline-size; } /* Over a white tile the wash sits on black, so it reads as solidly as it does over the grass. */ #rb-nflgd .rb-gd-gc > .rb-gd-evflash{ background:#000; gap:.4em; } #rb-nflgd .rb-gd-gc > .rb-gd-evflash .w{ font-size:clamp(16px,7vw,36px); font-size:clamp(16px,7cqw,36px); } #rb-nflgd .rb-gd-gc > .rb-gd-evflash .n{ font-size:clamp(12px,5.2vw,26px); font-size:clamp(12px,5.2cqw,26px); } #rb-nflgd .rb-gd-gc > .rb-gd-evflash .t{ font-size:clamp(12px,4vw,20px); font-size:clamp(12px,4cqw,20px); } /* A tile's banner lets its detail drop under the label, as a phone's does, rather than cut it. */ #rb-nflgd .rb-gd-evb.is-tile{ flex-wrap:wrap; row-gap:0; } /* ══ turnover and score banners ══════════════════════════════════════════════════════════ Thirty seconds of banner the moment the ball changes hands or the score moves, on the tile and over the field. One Tecmo arcade look for all of them — pixel type on black — in the scoring team's own colour, set inline by arcadeColor(); a turnover is solid red with black type (Alex, 2026-09-28). The label says what happened. */ #rb-nflgd .rb-gd-evb{ --evc:#fff; display:flex; align-items:center; gap:2px 10px; padding:8px 14px; background:#000; color:var(--evc); border-bottom:3px solid var(--evc); font-size:var(--fs-1); line-height:22px; animation:rb-gd-evb-in .35s ease-out; box-sizing:border-box; min-height:45px; } /* Both lines centred on their capitals, whatever the two faces' line metrics (Alex, 2026-09-30): each box is trimmed to cap height and baseline, so the flex row centres the letters themselves. Both keep the same even padding: room for the right-hand line's descenders, since it clips for its ellipsis, and a two-line phone banner stays centred as a block. */ #rb-nflgd .rb-gd-evb .tw, #rb-nflgd .rb-gd-evb .who{ text-box:trim-both cap alphabetic; padding:4px 0; } /* !important: the theme's phone stylesheet forces Outfit on every span, as it does on the scores. */ /* (Alex, 2026-09-30) The arcade label 20% up from fs-1 — 12 to 14.4px on a phone, 13 to 15.6px on a desktop — and the right-hand line 20% above that (17.28 / 18.72px): the pixel face reads much larger than Outfit at the same size, so the two only look matched with the Outfit side bigger. */ #rb-nflgd .rb-gd-evb .tw{ font-family:'Press Start 2P', monospace !important; font-size:14.4px; line-height:20px; font-weight:400; letter-spacing:0; text-transform:uppercase; white-space:nowrap; flex:0 0 auto; } /* A turnover: the whole banner red, black type — distinct from every score (Alex, 2026-09-28). */ #rb-nflgd .rb-gd-evb.is-to{ background:var(--live); color:#000; border-bottom-color:#8f1a12; } /* the RED ZONE pill's red */ #rb-nflgd .rb-gd-evb.is-to .who{ color:#000; } #rb-nflgd .rb-gd-evb .who{ margin-left:auto; color:var(--evc); font-weight:700; font-size:17.28px; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* Phones: a quarter shorter, 45px -> 34px (Alex, 2026-09-27); a detail line too long for the row drops under the label rather than being cut. */ @media (max-width:619px){ #rb-nflgd .rb-gd-evb{ padding:2px 14px; flex-wrap:wrap; min-height:34px; row-gap:0; } } @media (min-width:820px){ #rb-nflgd .rb-gd-evb .tw{ font-size:15.6px; } #rb-nflgd .rb-gd-evb .who{ font-size:18.72px; } } @keyframes rb-gd-evb-in{ from{ transform:translateY(-6px); opacity:0; } to{ transform:none; opacity:1; } } @media (prefers-reduced-motion:reduce){ #rb-nflgd .rb-gd-evb{ animation:none; } } /* ══ the settings row on a phone ══════════════════════════════════════════════════════════ Week, scoring, TD value, filter and order on one row (Alex, 2026-09-28). The desktop keeps its button groups; .rb-gd-set is transparent there. "Week 3" is "Wk 3" on a phone, and the filter and order become dropdowns whose pill shows the current choice, cut to fit. */ #rb-nflgd .rb-gd-set, #rb-nflgd .rb-gd-inl{ display:contents; } /* The gear, its panel and the row's own "updated" are the phone's; the desktop shows the settings inline (Alex, 2026-10-04). */ #rb-nflgd .rb-gd-gear, #rb-nflgd .rb-gd-gearp, #rb-nflgd .rb-gd-upd.is-ph{ display:none; } /* Desktop: the week and the filters lead, the scoring settings sit at the right edge (Alex, 2026-10-01). .rb-gd-set is display:contents here, so its children order inside the bar. */ @media (min-width:820px){ #rb-nflgd .rb-gd-bar > .sp{ order:1; } #rb-nflgd .rb-gd-bar > .rb-gd-upd{ order:2; } #rb-nflgd .rb-gd-inl > .rb-gd-sel{ order:3; } /* the week, then PPR, at the right (Alex, 2026-10-05) */ #rb-nflgd .rb-gd-inl > .rb-gd-ptd{ order:4; } } #rb-nflgd .rb-gd-sel .short, #rb-nflgd .rb-gd-msel{ display:none; } #rb-nflgd .rb-gd-sel span{ font-size:var(--fs-2); line-height:18px; } @media (max-width:619px){ #rb-nflgd .rb-gd-set{ display:flex; align-items:center; gap:4px; width:100%; min-width:0; } #rb-nflgd .rb-gd-sel .full, #rb-nflgd .rb-gd-bar > .rb-gd-filters, #rb-nflgd .rb-gd-bar > .rb-gd-sort{ display:none; } #rb-nflgd .rb-gd-sel .short{ display:inline; } #rb-nflgd .rb-gd-set .rb-gd-sel{ flex:0 0 auto; height:32px; padding:0 18px 0 8px; } #rb-nflgd .rb-gd-set .rb-gd-sel::after{ right:7px; width:6px; height:6px; margin-top:-4px; } #rb-nflgd .rb-gd-set .rb-gd-msel{ display:inline-flex; flex:0 0 auto; } /* Only the order gives up width: "Close & late" is cut to fit, never the filter. */ #rb-nflgd .rb-gd-set .rb-gd-msel.is-sort{ flex:0 1 auto; min-width:0; } #rb-nflgd .rb-gd-msel .v{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } #rb-nflgd .rb-gd-set .rb-gd-ptd{ flex:0 0 auto; height:32px; padding:0 8px; gap:4px; } #rb-nflgd .rb-gd-set .rb-gd-ptd span{ font-size:var(--fs-1); line-height:16px; } /* The row: filter, order, "updated", and the settings button at the right end. */ #rb-nflgd .rb-gd-set{ position:relative; } #rb-nflgd .rb-gd-inl, #rb-nflgd .rb-gd-bar > .rb-gd-upd{ display:none; } #rb-nflgd .rb-gd-gear{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:32px; height:32px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink2); box-shadow:var(--shadow); } #rb-nflgd .rb-gd-gear[aria-expanded="true"]{ color:var(--blue); border-color:var(--blue); } #rb-nflgd .rb-gd-gear svg{ width:16px; height:16px; display:block; } #rb-nflgd .rb-gd-upd.is-ph{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; margin-right:4px; flex:0 1 auto; min-width:0; font-size:var(--fs-1); overflow:hidden; } #rb-nflgd .rb-gd-upd.is-ph span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-1); } /* The gear's panel drops under the row, over the board. */ #rb-nflgd .rb-gd-gearp{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; position:absolute; right:0; top:38px; z-index:20; padding:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow2); } } /* ══ the beat writers ═════════════════════════════════════════════════════════════════════ Beside the plays on a desktop, a third of the row, scrolling inside the plays' own height; above them on a phone, capped so the plays are one swipe away. */ #rb-nflgd .rb-gd-twlist{ max-height:380px; overflow-y:auto; overscroll-behavior:contain; padding:0 13px 6px; border-top:1px solid var(--hair); } #rb-nflgd .rb-gd-twlist .none{ padding:14px 0; font-size:var(--fs-2); color:var(--mute); } /* Air above and below every post and a grey rule under each one, the last included (Alex, 2026-09-28: the posts ran together). */ #rb-nflgd .rb-gd-tw{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; padding:14px 0; border-bottom:1px solid var(--line); } #rb-nflgd .rb-gd-tw .lg{ width:26px; height:26px; object-fit:contain; margin-top:-3px; } #rb-nflgd .rb-gd-tw .who{ display:flex; align-items:baseline; gap:6px; min-width:0; line-height:18px; } #rb-nflgd .rb-gd-tw .who b{ font-size:var(--fs-2); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #rb-nflgd .rb-gd-tw .who .h{ font-size:var(--fs-1); line-height:18px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #rb-nflgd .rb-gd-tw .who .ago{ margin-left:auto; flex:0 0 auto; font-size:var(--fs-1); color:var(--mute); } #rb-nflgd .rb-gd-tw .who .ago:hover{ color:var(--blue); } #rb-nflgd .rb-gd-tw .tx{ margin-top:6px; font-size:var(--fs-2); line-height:1.5; color:var(--ink2); white-space:pre-line; overflow-wrap:anywhere; } #rb-nflgd .rb-gd-tw .tx a{ color:var(--blue); } /* The margin X gives its emoji images, so "✍️Laken" reads as "✍️ Laken". */ #rb-nflgd .rb-gd-tw .tx .em{ margin:0 .3em 0 .1em; font-size:inherit; line-height:inherit; } #rb-nflgd .rb-gd-twcol > .rb-gd-card{ display:flex; flex-direction:column; } @media (min-width:820px){ #rb-nflgd .rb-gd-pair.rb-gd-playstw{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:stretch; } #rb-nflgd .rb-gd-playstw > #rb-gd-s-plays{ order:1; min-width:0; } /* The column takes the plays' height and never sets it: the card is pinned inside it and the list scrolls. */ #rb-nflgd .rb-gd-playstw > .rb-gd-twcol{ order:2; position:relative; min-height:420px; } #rb-nflgd .rb-gd-twcol > .rb-gd-card{ position:absolute; inset:0 0 11px 0; margin:0; } #rb-nflgd .rb-gd-twcol .rb-gd-twlist{ flex:1 1 auto; min-height:0; max-height:none; } } /* ══ how the lines landed, on a finished tile ═════════════════════════════════════════════ */ #rb-nflgd .rb-gd-gc .sit .od .ol{ display:inline-flex; align-items:center; gap:5px; } #rb-nflgd .rb-gd-gc .sit .od .dot{ margin:0 6px; } #rb-nflgd .rb-gd-tag{ font-style:normal; font-size:var(--fs-1); font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:0 6px; border-radius:5px; line-height:18px; white-space:nowrap; } #rb-nflgd .rb-gd-tag.hit{ background:var(--goodbg); color:var(--good); } #rb-nflgd .rb-gd-tag.miss{ background:var(--turnbg); color:var(--turn); } #rb-nflgd .rb-gd-tag.over, #rb-nflgd .rb-gd-tag.under{ background:var(--tint); color:var(--blue); } #rb-nflgd .rb-gd-tag.push{ background:var(--chip); color:var(--chipink); } /* ?tecmo=gallery: every on-field visual, two to a row on a desktop, in numbered sections. */ #rb-nflgd .rb-gd-gallery .rb-gd-card{ margin-bottom:11px; } #rb-nflgd .rb-gd-galhd{ display:flex; flex-direction:column; gap:2px; padding:18px 10px 10px; } #rb-nflgd .rb-gd-galhd b{ font-size:var(--fs-4); line-height:22px; color:var(--ink); } #rb-nflgd .rb-gd-galhd span{ font-size:var(--fs-2); line-height:18px; color:var(--mute); } #rb-nflgd .rb-gd-galplay{ display:flex; align-items:center; gap:10px; padding:9px 13px 11px; } #rb-nflgd .rb-gd-galplay button{ flex:0 0 auto; padding:6px 11px; border-radius:8px; background:var(--blue); color:#fff; font-size:var(--fs-2); line-height:18px; font-weight:700; } #rb-nflgd .rb-gd-galplay span{ font-size:var(--fs-1); line-height:16px; color:var(--mute); min-width:0; } #rb-nflgd .rb-gd-galtile{ margin:0 10px 11px; } /* Real tiles for made-up games: nothing to open. */ #rb-nflgd .rb-gd-galtile .rb-gd-gcmain{ pointer-events:none; } #rb-nflgd .rb-gd-galteams{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; padding:12px; } #rb-nflgd .rb-gd-galteams .rb-gd-evb{ border-radius:6px; } #rb-nflgd .rb-gd-galnone{ position:absolute; left:0; right:0; top:40%; text-align:center; color:#fff; font-size:var(--fs-3); line-height:20px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.6); } /* ══ line movement ════════════════════════════════════════════════════════════════════════ ▲ / ▼ beside a number that has moved since the line opened (Alex, 2026-10-01). The site's blue, not green and red: a move is information, not good or bad news. */ #rb-nflgd .rb-gd-mv{ font-style:normal; font-size:var(--fs-1); color:var(--blue); cursor:help; } #rb-nflgd .rb-gd-hdr .sit .od .ob{ white-space:nowrap; } /* The game screen's line has the room a tile does not: each number set apart (Alex, 2026-10-01). */ #rb-nflgd .rb-gd-hdr .sit .od .sep{ font-style:normal; margin:0 8px; color:var(--mute); opacity:.6; } /* ══ pace, inside Top Scorers ════════════════════════════════════════════════════════════ The bar is the player's points in his team's colour; the grey mark is his pregame projection, "Proj. 18.1" above it in the same grey (Alex, 2026-10-02). Live, "pace 18.6" sits under the total. */ #rb-nflgd .rb-gd-pf .v .pc{ letter-spacing:0; text-transform:none; font-weight:700; white-space:nowrap; } #rb-nflgd .rb-gd-pf .bar{ position:relative; overflow:visible; } #rb-nflgd .rb-gd-pf .bar i{ position:absolute; left:0; top:0; } #rb-nflgd .rb-gd-pf .bar .proj{ width:3px; margin-left:-1px; top:-3px; height:10px; border-radius:1px; background:var(--mute); } #rb-nflgd .rb-gd-pf.has-proj .bar{ margin-top:24px; } #rb-nflgd .rb-gd-pf .bar .pl{ position:absolute; bottom:8px; transform:translateX(-50%); font-style:normal; font-size:var(--fs-1); line-height:14px; font-weight:600; color:var(--mute); white-space:nowrap; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-pf .bar .pl.r{ transform:translateX(-100%); } #rb-nflgd .rb-gd-pf .bar .pl.l{ transform:none; } #rb-nflgd #rb-gd-s-performers .segwrap, #rb-nflgd #rb-gd-s-scorers .segwrap{ padding:0 14px 6px; } /* ══ usage ════════════════════════════════════════════════════════════════════════════════ */ #rb-nflgd .rb-gd-use{ padding:0 14px 12px; overflow-x:auto; } #rb-nflgd .rb-gd-use .note{ margin:8px 4px 0; font-size:var(--fs-1); line-height:16px; color:var(--mute); } #rb-nflgd .rb-gd-use table{ width:100%; border-collapse:collapse; font-size:var(--fs-2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-use th, #rb-nflgd .rb-gd-use td{ padding:7px 4px; text-align:center; border-bottom:1px solid var(--hair); white-space:nowrap; } #rb-nflgd .rb-gd-use th{ font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; color:var(--mute); font-weight:800; cursor:help; } #rb-nflgd .rb-gd-use th:first-child, #rb-nflgd .rb-gd-use td:first-child{ text-align:left; padding-left:0; } #rb-nflgd .rb-gd-use td:first-child{ font-weight:700; max-width:150px; overflow:hidden; text-overflow:ellipsis; } #rb-nflgd .rb-gd-use td:first-child i{ font-style:normal; font-size:var(--fs-1); color:var(--mute); font-weight:600; margin-left:6px; } /* Phones: fixed columns, the name narrower and the two counts ("12 / 32%") on one line each (Alex, 2026-10-02). */ @media (max-width:619px){ #rb-nflgd .rb-gd-use table{ table-layout:fixed; } #rb-nflgd .rb-gd-use col.c-nm{ width:36%; } #rb-nflgd .rb-gd-use col.c-sn{ width:14%; } #rb-nflgd .rb-gd-use col.c-ct{ width:20%; } #rb-nflgd .rb-gd-use col.c-rz{ width:10%; } #rb-nflgd .rb-gd-use th, #rb-nflgd .rb-gd-use td{ padding:7px 2px; } #rb-nflgd .rb-gd-use td:first-child{ max-width:none; } } #rb-nflgd .rb-gd-use .segwrap{ padding:2px 0 8px; } /* ══ bet tracker ══════════════════════════════════════════════════════════════════════════ */ #rb-nflgd .rb-gd-bets{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; padding:4px 14px 14px; } #rb-nflgd .rb-gd-bets .t{ background:var(--card2); border:1px solid var(--hair); border-radius:10px; padding:10px 12px; display:grid; gap:2px; align-content:start; } #rb-nflgd .rb-gd-bets .k{ font-size:var(--fs-1); line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); font-weight:800; } #rb-nflgd .rb-gd-bets b{ font-size:var(--fs-3); line-height:20px; font-weight:800; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-bets .n{ font-size:var(--fs-2); line-height:18px; color:var(--ink2); font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-bets .pill{ justify-self:start; margin-top:4px; font-style:normal; font-size:var(--fs-1); line-height:16px; font-weight:800; padding:1px 8px; border-radius:999px; } #rb-nflgd .rb-gd-bets .pill.hit{ background:var(--goodbg); color:var(--good); } #rb-nflgd .rb-gd-bets .pill.miss{ background:var(--turnbg); color:var(--turn); } #rb-nflgd .rb-gd-bets .pill.over, #rb-nflgd .rb-gd-bets .pill.under{ background:var(--tint); color:var(--blue); } #rb-nflgd .rb-gd-bets .pill.push{ background:var(--chip); color:var(--chipink); } /* ══ key plays, every game ════════════════════════════════════════════════════════════════ A strip above the board that scrolls sideways: one card a play, the newest at the left, the kind in its flash colour down the card's edge (Alex, 2026-10-01). */ #rb-nflgd .rb-gd-kps{ margin:0 10px 14px; } #rb-nflgd .rb-gd-kps .hd{ display:flex; align-items:baseline; gap:10px; padding:0 2px 8px; } #rb-nflgd .rb-gd-kps .hd .t{ font-size:var(--fs-3); font-weight:800; } #rb-nflgd .rb-gd-kps .hd .a{ font-size:var(--fs-1); color:var(--mute); font-weight:600; } #rb-nflgd .rb-gd-kps .row{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } #rb-nflgd .rb-gd-kp{ flex:0 0 250px; scroll-snap-align:start; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--kc, var(--blue)); border-radius:10px; box-shadow:var(--shadow2); overflow:hidden; } #rb-nflgd .rb-gd-kp.is-td{ --kc:rgb(17,128,79); } #rb-nflgd .rb-gd-kp.is-to{ --kc:var(--live); } #rb-nflgd .rb-gd-kp.is-big{ --kc:rgb(0,109,200); } #rb-nflgd .rb-gd-kp .go{ display:block; text-align:left; padding:9px 11px 6px; flex:1 1 auto; color:inherit; } #rb-nflgd .rb-gd-kp .go:hover{ background:var(--card2); } #rb-nflgd .rb-gd-kp .top{ display:flex; align-items:center; gap:7px; } #rb-nflgd .rb-gd-kp .top .lg{ width:22px; height:22px; object-fit:contain; } #rb-nflgd .rb-gd-kp .top b{ font-size:var(--fs-2); line-height:18px; font-weight:800; color:var(--kc); text-transform:uppercase; letter-spacing:.04em; } #rb-nflgd .rb-gd-kp .top .q{ margin-left:auto; font-size:var(--fs-1); line-height:16px; color:var(--mute); font-weight:700; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-kp .d{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:5px; font-size:var(--fs-2); line-height:18px; color:var(--ink2); } #rb-nflgd .rb-gd-kp .gm{ display:block; text-align:left; padding:6px 11px 8px; border-top:1px solid var(--hair); font-size:var(--fs-1); line-height:16px; font-weight:800; color:var(--blue); font-variant-numeric:tabular-nums; } /* ══ win probability: the biggest swings ══════════════════════════════════════════════════ Numbered on the chart where they happened, listed under it (Alex, 2026-10-01). */ #rb-nflgd .rb-gd-wpsw{ position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--ink); color:var(--card); border:2px solid var(--card); font-size:var(--fs-1); line-height:14px; font-weight:800; text-align:center; pointer-events:none; z-index:2; } /* The strip under the score and the chart: three tiles in a row, stacked on a phone (Alex, 2026-10-01). The number and the gain wear the team's colour that gained. */ #rb-nflgd .rb-gd-swingcard{ margin-top:12px; } #rb-nflgd .rb-gd-swings{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; padding:2px 14px 14px; } #rb-nflgd .rb-gd-swings .sw{ display:grid; gap:6px; align-content:start; padding:10px 12px; border:1px solid var(--hair); border-top:3px solid var(--tc); border-radius:10px; background:var(--card2); cursor:pointer; } #rb-nflgd .rb-gd-swings .sw:hover{ background:var(--card); box-shadow:var(--shadow2); } #rb-nflgd .rb-gd-swings .top{ display:flex; align-items:center; gap:8px; } #rb-nflgd .rb-gd-swings .k{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--ink); color:var(--card); font-size:var(--fs-1); line-height:20px; font-weight:800; text-align:center; } #rb-nflgd .rb-gd-swings .top b{ font-size:var(--fs-2); line-height:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #rb-nflgd .rb-gd-swings .w{ margin-left:auto; font-size:var(--fs-2); line-height:18px; font-weight:800; color:var(--tc); white-space:nowrap; font-variant-numeric:tabular-nums; } #rb-nflgd .rb-gd-swings .d{ font-size:var(--fs-2); line-height:18px; color:var(--ink2); } #rb-nflgd .rb-gd-swings .go{ justify-self:end; line-height:0; } /* ══ the live game screen (Alex, 2026-10-05) ══════════════════════════════════════════════ See liveDetailHTML. The Current Drive card: the field, then the drive newest snap first and the drives before it under it, in one box that scrolls like Top Scorers; then the way to every play. */ #rb-nflgd .rb-gd-drivelist{ height:250px; overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--line); } #rb-nflgd .rb-gd-drivelist .cur > .rb-gd-pl:first-child{ border-top:0; } /* An earlier drive's name, on the line before its plays. */ #rb-nflgd .rb-gd-drsep{ padding:7px 13px; border-top:1px solid var(--line); background:var(--card2); font-size:var(--fs-1); line-height:16px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); } #rb-nflgd .rb-gd-allplays{ display:block; width:100%; padding:11px 13px; border-top:1px solid var(--line); font-size:var(--fs-2); line-height:18px; font-weight:800; color:var(--blue); text-align:center; } #rb-nflgd .rb-gd-allplays::after{ content:" \2192"; } #rb-nflgd .rb-gd-allplays:hover{ background:var(--tint); } /* The swings, one under another. */ #rb-nflgd .rb-gd-swings.is-stack{ grid-template-columns:1fr; } /* Scrubbing the chart names the play's fantasy scorers, chips as in the plays list. */ #rb-nflgd .rb-gd-wpread .fp{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:5px; } #rb-nflgd .rb-gd-wpread .fp:empty{ display:none; } #rb-nflgd .rb-gd-wpread .fp .fpr{ display:inline-flex; align-items:center; gap:6px; } #rb-nflgd .rb-gd-wpread .fp .nm{ font-size:var(--fs-2); line-height:18px; font-weight:800; color:var(--ink); } #rb-nflgd .rb-gd-wpread .fp .v{ font-style:normal; font-size:var(--fs-2); line-height:18px; font-weight:800; padding:0 6px; border-radius:6px; } #rb-nflgd .rb-gd-wpread .fp .v.pos{ background:var(--goodbg); color:var(--good); } #rb-nflgd .rb-gd-wpread .fp .v.neg{ background:var(--turnbg); color:var(--turn); } #rb-nflgd .rb-gd-wpread .fp .v.nil{ background:var(--chip); color:var(--chipink); } /* Desktop: the score and Top Scorers on the left, the Current Drive on the right, one height — the taller side's (sizeLive sets the floors), the other filling it with more of its list. */ @media (min-width:980px){ #rb-nflgd .rb-gd-live{ display:grid; grid-template-columns:1fr 1fr; gap:0 11px; align-items:stretch; } #rb-nflgd .rb-gd-lcol, #rb-nflgd .rb-gd-rcol{ min-width:0; display:flex; flex-direction:column; } #rb-nflgd .rb-gd-lcol > .rb-gd-hdr, #rb-nflgd .rb-gd-lcol > .rb-gd-card{ margin-left:10px; margin-right:0; } #rb-nflgd .rb-gd-rcol > .rb-gd-card{ margin-left:0; margin-right:10px; } #rb-nflgd .rb-gd-live .rb-gd-hdrpad{ display:none; } #rb-nflgd .rb-gd-lcol > #rb-gd-s-performers{ flex:1 1 auto; display:flex; flex-direction:column; } #rb-nflgd .rb-gd-lcol .rb-gd-card.is-live .rb-gd-pflist{ flex:1 1 0; max-height:none; } #rb-nflgd .rb-gd-rcol > #rb-gd-s-field{ flex:1 1 auto; display:flex; flex-direction:column; } #rb-nflgd .rb-gd-rcol .rb-gd-drivelist{ flex:1 1 0; height:auto; } /* Win Probability: the chart half as tall again, the three swings beside it. */ #rb-nflgd .rb-gd-wpduo{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:0 11px; align-items:stretch; } #rb-nflgd .rb-gd-wpduo > .rb-gd-card{ margin-left:0; margin-right:0; } #rb-nflgd .rb-gd-wpduo .rb-gd-wpchart{ height:282px; } #rb-nflgd .rb-gd-wpduo .rb-gd-swings{ padding-top:2px; } } /* The section buttons. A desktop: one row of six, big. */ #rb-nflgd .rb-gd-ltabs{ display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr)); gap:10px; padding:0 10px 11px; } #rb-nflgd .rb-gd-ltabs button{ box-sizing:border-box; display:flex; align-items:center; justify-content:center; min-height:64px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); font-size:var(--fs-3); line-height:18px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink2); text-align:center; } #rb-nflgd .rb-gd-ltabs button:hover{ border-color:var(--blue); color:var(--blue); } #rb-nflgd .rb-gd-ltabs button[aria-selected="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; } /* Narrower: one row that scrolls sideways, each button narrow, two lines where a label needs them. */ @media (max-width:979px){ #rb-nflgd .rb-gd-ltabs{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; } #rb-nflgd .rb-gd-ltabs::-webkit-scrollbar{ display:none; } #rb-nflgd .rb-gd-ltabs button{ flex:0 0 92px; min-height:52px; padding:6px 7px; font-size:var(--fs-1); line-height:15px; } } #rb-nflgd .rb-gd-lpanel > *{ grid-column:1 / -1; } #rb-nflgd .rb-gd-totop{ display:block; width:100%; margin:0 0 11px; padding:10px; font-size:var(--fs-2); line-height:18px; font-weight:700; color:var(--blue); text-align:center; } #rb-nflgd .rb-gd-totop::before{ content:"\2191 "; } /* Round three (Alex, 2026-10-05). The live score card's own heading, as the sections beside it have; gone when the card is pinned to one line on a phone. */ #rb-nflgd .rb-gd-hdr > .hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px 2px; } #rb-nflgd .rb-gd-hdr > .hd .rb-gd-upd{ font-size:var(--fs-1); min-width:0; } #rb-nflgd .rb-gd-hdr > .hd .t{ font-size:var(--fs-4); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); } #rb-nflgd .rb-gd-hdr.is-cond > .hd{ display:none; } /* More room under the second team. */ #rb-nflgd .rb-gd-live .rb-gd-hdr > .tm + .tm{ padding-bottom:16px; } /* A section opened from the buttons shows whole: Top Scorers does not scroll inside itself there. */ #rb-nflgd .rb-gd-lpanel .rb-gd-card.is-live .rb-gd-pflist{ max-height:none; overflow:visible; } /* The two team buttons over the usage table, apart. */ #rb-nflgd .rb-gd-seg.is-teams{ gap:10px; } /* Phone: section headings two pixels smaller (16 -> 14). */ @media (max-width:619px){ #rb-nflgd .rb-gd-card > .hd .t, #rb-nflgd .rb-gd-hdr > .hd .t{ font-size:var(--fs-3); } } /* ══ win probability, round two (Alex, 2026-10-06) ════════════════════════════════════════ Every word in the card a pixel bigger: the card redefines the size tokens it inherits, one pixel up at each width, so the scale, the quarters, the heading and the readout all follow. */ #rb-nflgd #rb-gd-s-winprob{ --fs-0:12px; --fs-1:13px; --fs-2:14px; --fs-3:15px; --fs-4:17px; --fs-5:20px; } @media (min-width:820px){ #rb-nflgd #rb-gd-s-winprob{ --fs-0:13px; --fs-1:14px; --fs-2:15px; --fs-3:16px; --fs-4:18px; --fs-5:22px; } } /* The play being read sits under the chart, not over it, in one fixed height (Alex, 2026-10-06: the card must not change length as a finger scrubs, and must not hold a band of white either). So the reading is made to fit: the clock line, the play in at most three lines on a phone and two on a desktop, and the scorers on one line. At rest it reads the latest play. */ #rb-nflgd .rb-gd-wpread, #rb-nflgd .rb-gd-wpread.on{ position:static; opacity:1; visibility:visible; pointer-events:auto; background:none; border:0; border-top:1px solid var(--hair); border-radius:0; box-shadow:none; margin:6px 0 0; padding:9px 0 0; min-height:120px; box-sizing:border-box; transition:none; } #rb-nflgd .rb-gd-wpread .hd{ line-height:20px; } #rb-nflgd .rb-gd-wpread .d{ line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } #rb-nflgd .rb-gd-wpread .fp .fpr{ white-space:nowrap; } #rb-nflgd #rb-gd-s-winprob .rb-gd-wp{ padding-bottom:10px; } @media (min-width:620px){ #rb-nflgd .rb-gd-wpread{ margin:6px var(--wpr) 0 40px; } } @media (min-width:980px){ #rb-nflgd .rb-gd-wpread{ min-height:100px; } #rb-nflgd .rb-gd-wpread .d{ -webkit-line-clamp:2; } /* The chart card ends at its reading, not at the height of the swings column beside it. */ #rb-nflgd .rb-gd-wpduo{ align-items:start; } } /* A finished game's top row (Alex, 2026-10-06): the chart and its swings stand where a live game's drive does; the swings card takes up whatever height the score and top five leave. */ @media (min-width:980px){ #rb-nflgd .rb-gd-live.is-final .rb-gd-rcol > #rb-gd-s-swings{ flex:1 1 auto; } } /* 2026-10-06. Key Plays: who the play helped and by how much, lower right. */ #rb-nflgd .rb-gd-kp{ position:relative; } #rb-nflgd .rb-gd-kp .sw{ position:absolute; right:11px; bottom:8px; pointer-events:none; font-size:var(--fs-1); line-height:16px; font-weight:800; color:var(--tc, var(--kc)); font-variant-numeric:tabular-nums; } /* the team it helped */ /* Usage: the full name, or "J. Love" on a phone. */ #rb-nflgd .rb-gd-use .nms{ display:none; } @media (max-width:619px){ #rb-nflgd .rb-gd-use .nmf{ display:none; } #rb-nflgd .rb-gd-use .nms{ display:inline; } /* Top Scorers' points two pixels smaller on a phone. */ #rb-nflgd .rb-gd-pf .v b{ font-size:var(--fd-1s); } }