/* =========================================================================== GRIDIRON — brand.css Design tokens + base element styles. Dark-first, broadcast-graphics meets trading terminal. AGENT 6: use these tokens everywhere; do not hardcode colors. Load order: brand.css -> cards.css. --------------------------------------------------------------------------- TOKEN REFERENCE (all defined on :root) --------------------------------------------------------------------------- SURFACES / COLOR --gi-bg page background (deepest) --gi-bg-2 secondary background (rails, sunken wells) --gi-surface card / panel surface --gi-surface-2 raised surface (hover, popovers, thead) --gi-line hairline border --gi-line-strong emphasized border --gi-text primary text (chalk white) --gi-text-dim secondary text --gi-text-mute tertiary / labels --gi-accent THE hot accent (first-down orange) --gi-accent-2 accent hover / lighter --gi-accent-ink text color to sit on --gi-accent --gi-field deep field green --gi-field-2 brighter field green --gi-good positive / edge+ (green) --gi-bad negative / edge- (red) --gi-warn caution (amber) --gi-info informational (cyan) --gi-chalk chalk line color (field markings, dividers on green) TYPE --gi-font UI sans stack --gi-font-cond condensed display stack (headings, numbers, wordmark) --gi-font-mono tabular / terminal stack --gi-fs-3xs 10px --gi-fs-2xs 11px --gi-fs-xs 12px --gi-fs-sm 13px --gi-fs-md 15px --gi-fs-lg 18px --gi-fs-xl 22px --gi-fs-2xl 28px --gi-fs-3xl 38px --gi-fs-4xl 52px --gi-lh-tight 1.1 --gi-lh 1.45 --gi-tracking-caps letter-spacing for uppercase labels SPACE (4px base) --gi-sp-1 4 --gi-sp-2 8 --gi-sp-3 12 --gi-sp-4 16 --gi-sp-5 24 --gi-sp-6 32 --gi-sp-7 48 --gi-sp-8 64 RADIUS --gi-r-xs 3 --gi-r-sm 6 --gi-r-md 10 --gi-r-lg 16 --gi-r-xl 22 --gi-r-pill 999px SHADOW / GLOW --gi-shadow-1 subtle lift --gi-shadow-2 panel --gi-shadow-3 floating / card hover --gi-glow-accent accent glow --gi-inset-hair 1px inner top highlight MOTION --gi-ease standard ease --gi-ease-out decelerate --gi-ease-spring overshoot (flip, pop) --gi-dur-1 120ms --gi-dur-2 200ms --gi-dur-3 320ms --gi-dur-4 520ms LAYOUT --gi-maxw app max width --gi-header-h sticky header height --------------------------------------------------------------------------- BASE CLASSES PROVIDED .gi-app .gi-header .gi-brand .gi-panel .gi-panel__title (.gi-header is full-width and self-padding: place it OUTSIDE .gi-app, as a direct child of . It never uses negative margins.) .gi-btn (.gi-btn--primary .gi-btn--ghost .gi-btn--danger .gi-btn--lg .gi-btn--sm) .gi-input .gi-select .gi-field .gi-label .gi-hint .gi-tabs .gi-tab (.is-active) .gi-table (wrap in .gi-table-wrap) .gi-num (tabular numerals) .gi-spinner .gi-bar (.gi-bar__fill) .gi-badge (.gi-badge--good .gi-badge--bad .gi-badge--warn .gi-badge--info) .gi-kv .gi-kv__k .gi-kv__v .gi-stack .gi-row .gi-spacer .gi-caps .gi-mono .gi-dim .gi-mute .gi-error .gi-empty .gi-sr-only =========================================================================== */ :root { color-scheme: dark; /* --- surfaces / color ------------------------------------------------- */ --gi-bg: #06090B; --gi-bg-2: #0A0F13; --gi-surface: #10161B; --gi-surface-2: #171F26; --gi-line: #212C34; --gi-line-strong: #33424D; --gi-text: #EAF2EE; --gi-text-dim: #A5B4B0; --gi-text-mute: #6E7F7B; --gi-accent: #FF5A1F; --gi-accent-2: #FF7A3D; --gi-accent-ink: #150703; --gi-field: #0C2419; --gi-field-2: #1B5C40; --gi-good: #2FD07A; --gi-bad: #FF4D5E; --gi-warn: #FFC53D; --gi-info: #35C2E0; --gi-chalk: #F4FBF7; /* --- type -------------------------------------------------------------- */ --gi-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --gi-font-cond: "Oswald", "Bebas Neue", "Archivo Narrow", "Segoe UI Semibold", "Arial Narrow", "Haettenschweiler", Impact, var(--gi-font); --gi-font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", "SF Mono", "Roboto Mono", ui-monospace, monospace; --gi-fs-3xs: 10px; --gi-fs-2xs: 11px; --gi-fs-xs: 12px; --gi-fs-sm: 13px; --gi-fs-md: 15px; --gi-fs-lg: 18px; --gi-fs-xl: 22px; --gi-fs-2xl: 28px; --gi-fs-3xl: 38px; --gi-fs-4xl: 52px; --gi-lh-tight: 1.1; --gi-lh: 1.45; --gi-tracking-caps: 0.14em; /* --- space ------------------------------------------------------------- */ --gi-sp-1: 4px; --gi-sp-2: 8px; --gi-sp-3: 12px; --gi-sp-4: 16px; --gi-sp-5: 24px; --gi-sp-6: 32px; --gi-sp-7: 48px; --gi-sp-8: 64px; /* --- radius ------------------------------------------------------------ */ --gi-r-xs: 3px; --gi-r-sm: 6px; --gi-r-md: 10px; --gi-r-lg: 16px; --gi-r-xl: 22px; --gi-r-pill: 999px; /* --- shadow / glow ----------------------------------------------------- */ --gi-shadow-1: 0 1px 2px rgba(0,0,0,.45); --gi-shadow-2: 0 4px 14px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset; --gi-shadow-3: 0 18px 44px rgba(0,0,0,.62), 0 2px 10px rgba(0,0,0,.5); --gi-glow-accent: 0 0 0 1px rgba(255,90,31,.55), 0 0 22px rgba(255,90,31,.28); --gi-inset-hair: inset 0 1px 0 rgba(255,255,255,.06); /* --- motion ------------------------------------------------------------ */ --gi-ease: cubic-bezier(.4, 0, .2, 1); --gi-ease-out: cubic-bezier(.16, .84, .34, 1); --gi-ease-spring: cubic-bezier(.34, 1.56, .48, 1); --gi-dur-1: 120ms; --gi-dur-2: 200ms; --gi-dur-3: 320ms; --gi-dur-4: 520ms; /* --- layout ------------------------------------------------------------ */ --gi-maxw: 1520px; --gi-header-h: 62px; /* minimum; the header grows if its contents wrap */ } /* =========================== base elements ============================= */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; overflow-x: clip; background: radial-gradient(1200px 600px at 12% -8%, rgba(27,92,64,.20), transparent 60%), radial-gradient(900px 500px at 105% 0%, rgba(255,90,31,.09), transparent 55%), var(--gi-bg); background-attachment: fixed; color: var(--gi-text); font-family: var(--gi-font); font-size: var(--gi-fs-md); line-height: var(--gi-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--gi-font-cond); font-weight: 700; line-height: var(--gi-lh-tight); letter-spacing: .01em; margin: 0 0 var(--gi-sp-3); text-transform: uppercase; } h1 { font-size: var(--gi-fs-3xl); letter-spacing: .02em; } h2 { font-size: var(--gi-fs-2xl); } h3 { font-size: var(--gi-fs-lg); letter-spacing: .06em; } h4 { font-size: var(--gi-fs-sm); letter-spacing: var(--gi-tracking-caps); color: var(--gi-text-dim); } p { margin: 0 0 var(--gi-sp-3); } a { color: var(--gi-accent); text-decoration: none; } a:hover { color: var(--gi-accent-2); text-decoration: underline; } code, kbd, pre, .gi-mono { font-family: var(--gi-font-mono); font-size: .92em; } img, svg, video, canvas { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--gi-line); margin: var(--gi-sp-5) 0; } ::selection { background: var(--gi-accent); color: var(--gi-accent-ink); } :focus-visible { outline: 2px solid var(--gi-accent); outline-offset: 2px; border-radius: var(--gi-r-xs); } /* scrollbars */ * { scrollbar-color: var(--gi-line-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gi-line-strong); border-radius: var(--gi-r-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: #465966; background-clip: padding-box; } /* ============================== layout ================================= */ .gi-app { max-width: var(--gi-maxw); margin: 0 auto; padding: 0 var(--gi-sp-5) var(--gi-sp-8); } .gi-header { position: sticky; top: 0; z-index: 40; min-height: var(--gi-header-h); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gi-sp-2) var(--gi-sp-4); padding-block: var(--gi-sp-2); padding: 0 var(--gi-sp-5); /* Full-bleed WITHOUT a negative-margin escape: the old `margin: 0 -24px` overflowed the viewport by 48px whenever the header sat outside a padded container, which scrolled the whole page sideways. `width: 100%` + box-sizing keeps it inside the viewport either way. */ width: 100%; max-width: 100%; margin: 0 0 var(--gi-sp-5); background: rgba(6,9,11,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gi-line); } .gi-brand { min-width: 0; display: flex; align-items: center; gap: var(--gi-sp-3); font-family: var(--gi-font-cond); font-size: var(--gi-fs-xl); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--gi-text); transform: skewX(-8deg); } .gi-brand img, .gi-brand svg { height: 30px; width: auto; display: block; transform: skewX(8deg); } .gi-price-format { display: inline-flex; align-items: center; gap: 7px; color: var(--gi-text-mute); font: 700 var(--gi-fs-2xs)/1 var(--gi-font-cond); letter-spacing: .06em; text-transform: uppercase; } .gi-price-format select { min-height: 34px; padding: 5px 28px 5px 9px; border: 1px solid var(--gi-line-strong); border-radius: var(--gi-r-pill); color: var(--gi-text); background-color: var(--gi-surface-2); font: 700 var(--gi-fs-xs)/1 var(--gi-font-mono); } @media (max-width: 760px) { .gi-price-format > span { display: none; } .gi-price-format select { max-width: 104px; } } .gi-stack { display: flex; flex-direction: column; gap: var(--gi-sp-3); } .gi-row { display: flex; align-items: center; gap: var(--gi-sp-3); flex-wrap: wrap; } .gi-spacer{ flex: 1 1 auto; } .gi-panel { background: linear-gradient(180deg, var(--gi-surface), var(--gi-bg-2)); border: 1px solid var(--gi-line); border-radius: var(--gi-r-lg); box-shadow: var(--gi-shadow-2); padding: var(--gi-sp-5); } .gi-panel__title { font-family: var(--gi-font-cond); font-size: var(--gi-fs-sm); letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; color: var(--gi-text-dim); display: flex; align-items: center; gap: var(--gi-sp-2); margin-bottom: var(--gi-sp-4); } .gi-panel__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gi-line), transparent); } /* ============================= typography ============================== */ .gi-caps { font-family: var(--gi-font-cond); text-transform: uppercase; letter-spacing: var(--gi-tracking-caps); font-size: var(--gi-fs-2xs); color: var(--gi-text-mute); } .gi-dim { color: var(--gi-text-dim); } .gi-mute { color: var(--gi-text-mute); } .gi-num { font-family: var(--gi-font-mono); font-variant-numeric: tabular-nums; } .gi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================== buttons ================================ */ .gi-btn { --_bg: var(--gi-surface-2); --_fg: var(--gi-text); --_bd: var(--gi-line-strong); appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--gi-sp-2); padding: 9px var(--gi-sp-4); font-family: var(--gi-font-cond); font-size: var(--gi-fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--gi-r-sm); box-shadow: var(--gi-inset-hair); cursor: pointer; white-space: nowrap; transition: transform var(--gi-dur-1) var(--gi-ease), background-color var(--gi-dur-2) var(--gi-ease), border-color var(--gi-dur-2) var(--gi-ease), box-shadow var(--gi-dur-2) var(--gi-ease), opacity var(--gi-dur-2) var(--gi-ease); } .gi-btn:hover { background: #1E2830; border-color: #45565f; } .gi-btn:active { transform: translateY(1px); } .gi-btn[disabled], .gi-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; } .gi-btn--primary { --_bg: linear-gradient(180deg, var(--gi-accent-2), var(--gi-accent)); --_fg: var(--gi-accent-ink); --_bd: #ff8a4d; text-shadow: none; } .gi-btn--primary:hover { background: linear-gradient(180deg, #ff8f57, var(--gi-accent-2)); border-color: #ffa06b; box-shadow: var(--gi-glow-accent); } .gi-btn--ghost { --_bg: transparent; --_bd: var(--gi-line); --_fg: var(--gi-text-dim); } .gi-btn--ghost:hover { background: var(--gi-surface-2); color: var(--gi-text); } .gi-btn--danger { --_bg: transparent; --_bd: #5b2630; --_fg: var(--gi-bad); } .gi-btn--danger:hover { background: #2a1219; border-color: var(--gi-bad); } .gi-btn--lg { padding: 14px var(--gi-sp-6); font-size: var(--gi-fs-lg); letter-spacing: .14em; border-radius: var(--gi-r-md); } .gi-btn--sm { padding: 5px var(--gi-sp-3); font-size: var(--gi-fs-2xs); } /* =============================== forms ================================= */ .gi-field { position: relative; display: flex; flex-direction: column; gap: var(--gi-sp-1); min-width: 0; } .gi-label { font-family: var(--gi-font-cond); font-size: var(--gi-fs-2xs); letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; color: var(--gi-text-mute); } .gi-hint { font-size: var(--gi-fs-xs); color: var(--gi-text-mute); } .gi-input, .gi-select, input[type="text"], input[type="number"], input[type="search"], select, textarea { appearance: none; width: 100%; padding: 9px var(--gi-sp-3); font-family: var(--gi-font-mono); font-size: var(--gi-fs-sm); font-variant-numeric: tabular-nums; color: var(--gi-text); background: #0B1116; border: 1px solid var(--gi-line); border-radius: var(--gi-r-sm); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); transition: border-color var(--gi-dur-2) var(--gi-ease), box-shadow var(--gi-dur-2) var(--gi-ease); } .gi-input::placeholder, input::placeholder { color: var(--gi-text-mute); } .gi-input:hover, .gi-select:hover, input:hover, select:hover { border-color: var(--gi-line-strong); } .gi-input:focus, .gi-select:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gi-accent); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(255,90,31,.18); } .gi-select, select { padding-right: var(--gi-sp-6); background-image: linear-gradient(45deg, transparent 50%, var(--gi-text-dim) 50%), linear-gradient(135deg, var(--gi-text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; } option { background: var(--gi-surface); color: var(--gi-text); } input[type="range"] { accent-color: var(--gi-accent); } input[type="checkbox"], input[type="radio"] { accent-color: var(--gi-accent); width: auto; } /* ================================ tabs ================================= */ .gi-tabs { display: flex; gap: var(--gi-sp-1); border-bottom: 1px solid var(--gi-line); margin-bottom: var(--gi-sp-5); overflow-x: auto; scrollbar-width: none; } .gi-tabs::-webkit-scrollbar { display: none; } .gi-tab { position: relative; appearance: none; background: transparent; border: 0; padding: var(--gi-sp-3) var(--gi-sp-4); font-family: var(--gi-font-cond); font-size: var(--gi-fs-sm); font-weight: 700; letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; color: var(--gi-text-mute); cursor: pointer; white-space: nowrap; transition: color var(--gi-dur-2) var(--gi-ease); } .gi-tab::after { content: ""; position: absolute; left: var(--gi-sp-3); right: var(--gi-sp-3); bottom: -1px; height: 3px; background: var(--gi-accent); border-radius: 3px 3px 0 0; transform: scaleX(0); transform-origin: 50% 100%; transition: transform var(--gi-dur-2) var(--gi-ease-out); } .gi-tab:hover { color: var(--gi-text-dim); } .gi-tab.is-active { color: var(--gi-text); } .gi-tab.is-active::after { transform: scaleX(1); } /* =============================== tables ================================ */ .gi-table-wrap { overflow: auto; border: 1px solid var(--gi-line); border-radius: var(--gi-r-md); background: var(--gi-surface); box-shadow: var(--gi-shadow-1); max-height: 70vh; } .gi-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--gi-fs-sm); } .gi-table thead th { position: sticky; top: 0; z-index: 2; background: var(--gi-surface-2); font-family: var(--gi-font-cond); font-size: var(--gi-fs-2xs); font-weight: 700; letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; color: var(--gi-text-dim); text-align: left; padding: var(--gi-sp-3); border-bottom: 1px solid var(--gi-line-strong); white-space: nowrap; cursor: default; } .gi-table thead th[data-sort] { cursor: pointer; user-select: none; } .gi-table thead th[data-sort]:hover { color: var(--gi-text); } .gi-table thead th.is-sorted { color: var(--gi-accent); } .gi-table tbody td { padding: var(--gi-sp-3); border-bottom: 1px solid var(--gi-line); color: var(--gi-text-dim); white-space: nowrap; } .gi-table tbody td:first-child { color: var(--gi-text); font-weight: 600; } .gi-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.014); } .gi-table tbody tr:hover td { background: rgba(255,90,31,.07); color: var(--gi-text); } .gi-table tbody tr.js-week-projection { cursor: pointer; } .gi-table tbody tr.js-week-projection:focus-visible { outline: 2px solid var(--gi-accent); outline-offset: -2px; } .gi-table tbody tr:last-child td { border-bottom: 0; } .gi-table td.gi-num, .gi-table th.gi-num { text-align: right; font-variant-numeric: tabular-nums; } /* ============================== badges ================================= */ .gi-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--gi-sp-2); font-family: var(--gi-font-cond); font-size: var(--gi-fs-3xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--gi-r-xs); border: 1px solid var(--gi-line-strong); background: var(--gi-surface-2); color: var(--gi-text-dim); white-space: nowrap; } .gi-badge--good { color: var(--gi-good); border-color: rgba(47,208,122,.4); background: rgba(47,208,122,.10); } .gi-badge--bad { color: var(--gi-bad); border-color: rgba(255,77,94,.4); background: rgba(255,77,94,.10); } .gi-badge--warn { color: var(--gi-warn); border-color: rgba(255,197,61,.4); background: rgba(255,197,61,.10); } .gi-badge--info { color: var(--gi-info); border-color: rgba(53,194,224,.4); background: rgba(53,194,224,.10); } /* ========================== key/value readout ========================== */ .gi-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--gi-sp-1) var(--gi-sp-4); align-items: baseline; } .gi-kv__k { font-family: var(--gi-font-cond); font-size: var(--gi-fs-2xs); letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; color: var(--gi-text-mute); } .gi-kv__v { font-family: var(--gi-font-mono); font-variant-numeric: tabular-nums; color: var(--gi-text); } /* =========================== stat explanations ======================== */ .gi-help { appearance: none; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; padding: 0; vertical-align: 1px; border: 1px solid rgba(53, 194, 224, .58); border-radius: 50%; background: rgba(53, 194, 224, .10); color: var(--gi-info); font: 700 11px/1 var(--gi-font); letter-spacing: 0; text-transform: none; cursor: help; transition: background var(--gi-dur-1), color var(--gi-dur-1), transform var(--gi-dur-1); } .gi-help:hover, .gi-help:focus-visible { color: var(--gi-bg); background: var(--gi-info); transform: translateY(-1px); } .gi-card__stats .gi-help { width: 15px; height: 15px; font-size: 10px; } .gi-help--label { position: absolute; top: -2px; right: 0; margin-left: 0; } .gi-stat-guide { appearance: none; margin-left: auto; padding: 5px 10px; border: 1px solid var(--gi-line-strong); border-radius: var(--gi-r-pill); background: var(--gi-surface); color: var(--gi-text-dim); font: 700 var(--gi-fs-2xs)/1.2 var(--gi-font-cond); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .gi-stat-guide span { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; background: var(--gi-info); color: var(--gi-bg); } .gi-stat-guide:hover { color: var(--gi-text); border-color: var(--gi-info); } .gi-help-dialog { position: relative; width: min(560px, calc(100vw - 32px)); max-height: min(78vh, 680px); overflow: auto; padding: 62px var(--gi-sp-6) var(--gi-sp-6); border: 1px solid var(--gi-line-strong); border-radius: var(--gi-r-lg); background: var(--gi-surface-2); color: var(--gi-text); box-shadow: var(--gi-shadow-3); } .gi-help-dialog::backdrop { background: rgba(1, 4, 6, .76); backdrop-filter: blur(3px); } .gi-help-dialog h2 { margin-top: var(--gi-sp-2); color: var(--gi-text); } .gi-help-dialog p { color: var(--gi-text-dim); font-size: var(--gi-fs-md); } .gi-help-dialog__note { margin: var(--gi-sp-5) 0 0 !important; padding-top: var(--gi-sp-4); border-top: 1px solid var(--gi-line); color: var(--gi-text-mute) !important; font-size: var(--gi-fs-xs) !important; } .gi-help-dialog__close { position: absolute; top: 10px; right: 14px; appearance: none; border: 0; background: transparent; color: var(--gi-text-dim); font-size: 28px; cursor: pointer; } .gi-help-dialog__close:hover { color: var(--gi-text); } @media (max-width: 700px) { .gi-stat-guide { margin-left: 0; } .gi-help-dialog { padding: 58px var(--gi-sp-5) var(--gi-sp-5); } } /* =========================== bar / meter =============================== */ .gi-bar { position: relative; height: 6px; border-radius: var(--gi-r-pill); background: #0C1318; border: 1px solid var(--gi-line); overflow: hidden; } .gi-bar__fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gi-field-2), var(--gi-accent)); transform-origin: 0 50%; transform: scaleX(var(--gi-bar-value, 0)); /* JS sets --gi-bar-value: 0..1 */ transition: transform var(--gi-dur-4) var(--gi-ease-out); } /* ============================= spinner ================================= */ .gi-spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gi-line-strong); border-top-color: var(--gi-accent); animation: gi-spin 720ms linear infinite; vertical-align: -4px; } .gi-spinner--lg { width: 40px; height: 40px; border-width: 3px; } @keyframes gi-spin { to { transform: rotate(360deg); } } /* indeterminate progress sweep (for long simulate runs) */ .gi-sweep { position: relative; height: 3px; border-radius: var(--gi-r-pill); background: var(--gi-line); overflow: hidden; } .gi-sweep::after { content: ""; position: absolute; inset: 0; width: 34%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--gi-accent), transparent); animation: gi-sweep 1.1s var(--gi-ease) infinite; } @keyframes gi-sweep { from { transform: translateX(-110%); } to { transform: translateX(400%); } } /* ========================== error / empty ============================== */ .gi-error { border: 1px solid rgba(255,77,94,.45); background: rgba(255,77,94,.08); color: #FFC2C8; border-left-width: 4px; border-radius: var(--gi-r-sm); padding: var(--gi-sp-3) var(--gi-sp-4); font-family: var(--gi-font-mono); font-size: var(--gi-fs-xs); white-space: pre-wrap; } .gi-empty { padding: var(--gi-sp-7) var(--gi-sp-4); text-align: center; color: var(--gi-text-mute); font-family: var(--gi-font-cond); letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; font-size: var(--gi-fs-sm); } /* Compact sportsbook drill-down: one market row until the user asks for detail. */ .gi-book-detail > td { padding: 0 !important; background: rgba(7, 14, 18, .96) !important; } .gi-book-panel { padding: var(--gi-sp-4); border-left: 3px solid var(--gi-accent); box-shadow: inset 0 1px 0 var(--gi-line); } .gi-book-panel__head { margin-bottom: var(--gi-sp-3); color: var(--gi-text); font-family: var(--gi-font-cond); font-weight: 700; letter-spacing: var(--gi-tracking-caps); text-transform: uppercase; } .gi-book-panel .gi-table-wrap { max-height: 310px; } .gi-book-actions { display: flex; gap: var(--gi-sp-2); margin-top: var(--gi-sp-3); } /* Live-game lobby and direct entry controls. */ .gi-ms-live-nav .gi-live-dot{width:7px;height:7px;margin-right:6px;vertical-align:1px} .gi-gamecast-btn{white-space:nowrap;border-color:rgba(53,194,224,.42);color:var(--gi-accent-2)} .gi-gamecast-btn:hover{border-color:var(--gi-accent-2);background:rgba(53,194,224,.1)} .gi-gamecast-btn.is-live{border-color:rgba(44,224,142,.55);color:var(--gi-good);background:rgba(44,224,142,.08)} .gi-gamecast-btn .gi-live-dot{width:7px;height:7px;margin-right:7px;vertical-align:1px} .gi-live-lobby{display:flex;align-items:center;justify-content:space-between;gap:var(--gi-sp-5); margin-bottom:var(--gi-sp-5);padding:clamp(18px,4vw,32px);border:1px solid rgba(44,224,142,.38); border-radius:var(--gi-r-lg);background:linear-gradient(135deg,rgba(44,224,142,.12), rgba(16,31,36,.98) 55%,rgba(53,194,224,.08));box-shadow:var(--gi-inset-hair)} .gi-live-lobby h2{margin:6px 0 8px;font:850 clamp(1.55rem,4vw,2.6rem)/.98 var(--gi-font-cond);text-transform:uppercase} .gi-live-lobby p{max-width:720px;margin:0;color:var(--gi-text-dim);line-height:1.5} .gi-live-lobby__count{flex:0 0 auto;display:grid;place-items:center;min-width:105px;min-height:105px; border:1px solid rgba(44,224,142,.38);border-radius:50%;background:rgba(4,11,14,.58)} .gi-live-lobby__count strong{font:850 2.2rem/.9 var(--gi-font-mono);color:var(--gi-good)} .gi-live-lobby__count span{font:800 var(--gi-fs-3xs)/1 var(--gi-font-cond);letter-spacing:.16em;color:var(--gi-text-mute)} /* Live Game + Continuous Math. The field/diamond is drawn from normalized play state; it is a data visualization, never rebroadcast video. */ .gi-live-host { margin: var(--gi-sp-5) 0; } .gi-live-game { overflow: hidden; border: 1px solid rgba(44, 224, 142, .38); border-radius: var(--gi-r-md); background: linear-gradient(155deg, rgba(16, 31, 36, .98), rgba(7, 14, 18, .96)); box-shadow: 0 18px 50px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.035); } .gi-live-game.is-stale { border-color: rgba(255, 197, 61, .55); } .gi-free-play { margin:var(--gi-sp-4); padding:18px; border:1px solid var(--gi-line); border-radius:var(--gi-r-md); background:linear-gradient(135deg,rgba(255,103,52,.09),rgba(42,222,142,.035)); } .gi-free-play__top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .gi-free-play__top h3 { margin:4px 0 3px; font-size:var(--gi-fs-lg); } .gi-free-play__top p,.gi-free-play__notice { margin:0; color:var(--gi-text-mute); font-size:var(--gi-fs-xs); } .gi-free-play__balances { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .gi-free-play__balances span { padding:8px 10px; border:1px solid var(--gi-line); background:var(--gi-surface); color:var(--gi-text-mute); font:600 var(--gi-fs-3xs)/1.2 var(--gi-font-cond); text-transform:uppercase; letter-spacing:.06em; } .gi-free-play__balances b { color:var(--gi-text); font-family:var(--gi-font-mono); } .gi-free-play__actions { display:flex; justify-content:flex-end; margin-top:10px; } .gi-free-play__prompt { margin-top:16px; color:var(--gi-text); font-weight:800; } .gi-free-play__choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; } .gi-free-play__choice { border:1px solid var(--gi-line); background:var(--gi-surface); color:var(--gi-text-dim); min-height:42px; border-radius:var(--gi-r-sm); font-weight:750; cursor:pointer; } .gi-free-play__choice:hover,.gi-free-play__choice.is-selected { border-color:var(--gi-accent); color:var(--gi-text); background:rgba(255,103,52,.13); } .gi-free-play__entry { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .gi-free-play__feedback { color:var(--gi-good); font-size:var(--gi-fs-xs); } .gi-free-play__notice { margin-top:10px; } .gi-play-mode__lamp{width:9px;height:9px;border-radius:50%;background:var(--gi-text-mute);box-shadow:0 0 0 4px rgba(255,255,255,.04)} .gi-play-mode[aria-pressed="true"]{border-color:var(--gi-accent)!important;color:var(--gi-accent)!important;background:rgba(255,103,52,.08)!important} .gi-play-mode[aria-pressed="true"] .gi-play-mode__lamp{background:var(--gi-accent);box-shadow:0 0 0 4px rgba(255,103,52,.15)} .gi-free-play[hidden]{display:none!important}.gi-free-play__modebar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.gi-free-play__modebar h3{margin:3px 0}.gi-free-play__workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:14px;margin-top:14px}.gi-free-play__ticket,.gi-free-play__market{border:1px solid var(--gi-line);border-radius:var(--gi-r-sm);background:rgba(4,11,14,.48);padding:14px}.gi-free-play__ticket[hidden]{display:none!important}.gi-free-play__stake{display:grid;grid-template-columns:auto minmax(180px,1fr) 88px;align-items:center;gap:10px;margin:12px 0}.gi-free-play__stake output{font:800 var(--gi-fs-md)/1 var(--gi-font-mono);color:var(--gi-accent);min-width:80px;text-align:right}.gi-free-play__stake input[type="range"]{width:100%;accent-color:var(--gi-accent)}.gi-free-play__stake input[type="number"]{width:88px}.gi-free-play__market-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.gi-free-play__market-head h4{margin:0;font-size:var(--gi-fs-sm)}.gi-free-play__quote{display:grid;gap:5px;padding:9px 0;border-bottom:1px solid var(--gi-line)}.gi-free-play__quote:last-child{border-bottom:0}.gi-free-play__quote-top{display:flex;justify-content:space-between;gap:10px;color:var(--gi-text-dim);font-size:var(--gi-fs-2xs)}.gi-free-play__quote-outcomes{display:flex;gap:7px;flex-wrap:wrap}.gi-free-play__quote-outcomes span{border:1px solid var(--gi-line);padding:5px 7px;color:var(--gi-text);font:700 var(--gi-fs-3xs)/1 var(--gi-font-mono)}.gi-free-play__providers{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.gi-free-play__providers span{padding:4px 6px;border:1px solid var(--gi-line);color:var(--gi-text-mute);font:700 var(--gi-fs-3xs)/1 var(--gi-font-cond);text-transform:uppercase}.gi-free-play__providers .is-exact{border-color:rgba(44,224,142,.5);color:var(--gi-good)} @media(max-width:900px){.gi-free-play__workspace{grid-template-columns:1fr}} @media(max-width:600px){.gi-play-mode__text{display:none}.gi-free-play__stake{grid-template-columns:1fr auto}.gi-free-play__stake label{grid-column:1/-1}} .gi-live-game.is-stale .gi-live-game__fresh { color: var(--gi-warn); } .gi-live-game__head, .gi-live-scoreboard { display: flex; align-items: center; justify-content: space-between; gap: var(--gi-sp-3); } .gi-live-game__head { padding: 12px var(--gi-sp-4); border-bottom: 1px solid var(--gi-line); background: rgba(4, 11, 14, .65); } .gi-live-game__label { color: var(--gi-good); font: 800 var(--gi-fs-2xs)/1 var(--gi-font-cond); letter-spacing: .13em; } .gi-live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--gi-good); box-shadow: 0 0 0 4px rgba(44, 224, 142, .12), 0 0 15px rgba(44, 224, 142, .55); animation: gi-live-pulse 1.8s ease-in-out infinite; } @keyframes gi-live-pulse { 50% { opacity: .42; transform: scale(.78); } } .gi-live-game__fresh { color: var(--gi-text-mute); font: 600 var(--gi-fs-3xs)/1.2 var(--gi-font-mono); } .gi-live-scoreboard { padding: var(--gi-sp-4); } .gi-live-team { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .gi-live-team span { color: var(--gi-text-dim); font: 800 var(--gi-fs-sm)/1 var(--gi-font-cond); text-transform: uppercase; } .gi-live-team strong { color: var(--gi-text); font: 800 clamp(1.8rem, 6vw, 3rem)/.9 var(--gi-font-mono); } .gi-live-team--home { justify-content: flex-end; text-align: right; } .gi-live-clock { display: grid; gap: 3px; text-align: center; } .gi-live-clock strong { color: var(--gi-accent-2); font: 800 var(--gi-fs-sm)/1 var(--gi-font-mono); } .gi-live-clock span { color: var(--gi-text-mute); font: 700 var(--gi-fs-3xs)/1.2 var(--gi-font-cond); text-transform: uppercase; } .gi-live-field { position: relative; height: 112px; margin: 0 var(--gi-sp-4); overflow: hidden; border: 2px solid rgba(239, 250, 245, .55); border-radius: 5px; background: repeating-linear-gradient(90deg, #175e3a 0, #175e3a 10%, #1a6840 10%, #1a6840 20%); } .gi-live-field::after { content:"50"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.28); font:800 1.4rem var(--gi-font-mono); } .gi-live-field__line { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.35); } .gi-live-field__ball { position:absolute; top:50%; width:20px; height:12px; transition:left 1.05s cubic-bezier(.28,.7,.25,1); transform:translate(-50%,-50%) rotate(-22deg); border:2px solid #f2d3a6; border-radius:50%; background:#8c481f; box-shadow:0 0 0 5px rgba(255,197,61,.18), 0 2px 8px rgba(0,0,0,.7); z-index:2; } .gi-live-field__ball.is-air { animation:gi-football-air .72s cubic-bezier(.2,.8,.3,1); } .gi-live-field__ball.is-ground { animation:gi-football-ground .58s ease-out; } @keyframes gi-football-air { 0% { top:72%; transform:translate(-50%,-50%) rotate(-70deg) scale(.72); } 48% { top:19%; transform:translate(-50%,-50%) rotate(80deg) scale(1.12); } 100% { top:50%; transform:translate(-50%,-50%) rotate(158deg); } } @keyframes gi-football-ground { 0% { transform:translate(-50%,-50%) rotate(-22deg) scale(.72); } 55% { transform:translate(-50%,-50%) rotate(160deg) scale(1.08); } } .gi-live-field__flight { position:absolute; top:50%; z-index:1; height:2px; transform:translateY(-50%); transform-origin:left center; pointer-events:none; } .gi-live-field__flight.is-run { border-top:2px dashed rgba(255,213,103,.72); } .gi-live-field__flight.is-pass { top:24%; height:38%; border-top:2px solid rgba(178,239,255,.8); border-radius:50% 50% 0 0; box-shadow:0 -4px 14px rgba(178,239,255,.22); } .gi-live-field__end { position:absolute; top:50%; transform:translateY(-50%) rotate(-90deg); color:rgba(255,255,255,.6); font:800 var(--gi-fs-3xs) var(--gi-font-cond); letter-spacing:.13em; } .gi-live-field__end--away { left:4px; } .gi-live-field__end--home { right:4px; transform:translateY(-50%) rotate(90deg); } .gi-live-touchdown { position:absolute; inset:0; z-index:7; display:grid; place-content:center; text-align:center; background:radial-gradient(circle,rgba(255,210,67,.42),rgba(2,13,9,.88) 68%); animation:gi-touchdown-celebrate 2.4s ease both; pointer-events:none; } .gi-live-touchdown::before,.gi-live-touchdown::after { content:""; position:absolute; inset:-25%; background:repeating-conic-gradient(from 0deg,transparent 0 13deg,rgba(255,215,79,.32) 14deg 16deg); animation:gi-touchdown-rays 2.2s ease-out both; } .gi-live-touchdown span { position:relative; z-index:1; color:#fff4bd; font:900 clamp(1.5rem,7vw,3.25rem)/.85 var(--gi-font-cond); letter-spacing:.08em; text-shadow:0 0 18px rgba(255,203,43,.72); } .gi-live-touchdown strong { position:relative; z-index:1; margin-top:8px; color:#fff; font:900 var(--gi-fs-sm)/1 var(--gi-font-mono); letter-spacing:.16em; } .gi-live-field-goal { background:linear-gradient(180deg,rgba(33,214,148,.22),rgba(2,13,9,.92) 72%); } .gi-live-field-goal::before,.gi-live-field-goal::after { display:none; } .gi-live-field-goal span { color:#9fffd7; text-shadow:0 0 18px rgba(33,214,148,.7); } .gi-live-view-actions { margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end; } .gi-live-view-toggle { border:1px solid rgba(140,225,255,.38);border-radius:999px;background:rgba(8,27,34,.86);color:#bcefff;padding:7px 11px;font:800 10px/1 var(--gi-font-mono);letter-spacing:.08em;cursor:pointer;white-space:nowrap; } .gi-live-view-toggle:hover { border-color:#8ce1ff;color:#fff;background:rgba(13,48,61,.96); } .gi-live-game:fullscreen { width:100vw;min-height:100vh;overflow:auto;padding:18px;background:linear-gradient(180deg,#071116,#020607); } .gi-live-game:fullscreen .gi-live-field { min-height:min(42vh,430px); } .gi-live-game:-webkit-full-screen { width:100vw;min-height:100vh;overflow:auto;padding:18px;background:linear-gradient(180deg,#071116,#020607); } .gi-live-game:-webkit-full-screen .gi-live-field { min-height:min(42vh,430px); } .gi-live-game.is-fullscreen { position:fixed;inset:0;z-index:10000;width:100vw;height:100vh;overflow:auto;padding:18px;background:linear-gradient(180deg,#071116,#020607);border-radius:0; } .gi-live-game.is-fullscreen .gi-live-game__head { position:sticky;top:0;z-index:20; } .gi-live-game.is-fullscreen .gi-live-field { min-height:min(42vh,430px); } @keyframes gi-touchdown-celebrate { 0% { opacity:0; transform:scale(.72); } 12%,78% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.08); visibility:hidden; } } @keyframes gi-touchdown-rays { from { transform:rotate(-22deg) scale(.5); opacity:0; } 25% { opacity:1; } to { transform:rotate(18deg) scale(1.35); opacity:0; } } .gi-live-players { margin:10px var(--gi-sp-4) 0; border:1px solid rgba(178,239,255,.18); border-radius:10px; background:rgba(2,12,16,.62); overflow:hidden; } .gi-live-players__teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; border-bottom:1px solid rgba(178,239,255,.12); background:rgba(178,239,255,.025); } .gi-live-team-choice { min-height:46px; padding:9px 12px; overflow:hidden; border:1px solid rgba(178,239,255,.2); border-radius:7px; background:rgba(8,27,33,.86); color:var(--gi-text-dim); font:900 var(--gi-fs-sm)/1 var(--gi-font-cond); text-overflow:ellipsis; white-space:nowrap; cursor:pointer; } .gi-live-team-choice:hover,.gi-live-team-choice:focus-visible,.gi-live-team-choice.is-active { border-color:var(--gi-accent-2); background:rgba(178,239,255,.1); color:#fff; outline:none; box-shadow:0 0 0 2px rgba(178,239,255,.09); } .gi-live-players__nav { padding:11px 12px 12px; } .gi-live-players__roster-label { margin-bottom:8px; color:var(--gi-text-mute); font:800 var(--gi-fs-3xs)/1 var(--gi-font-cond); letter-spacing:.09em; } .gi-live-players__rail { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; } .gi-live-player-chip { flex:0 0 auto; min-height:42px; padding:9px 13px; border:1px solid rgba(178,239,255,.2); border-radius:999px; background:rgba(8,27,33,.86); color:var(--gi-text-dim); font:800 var(--gi-fs-xs)/1 var(--gi-font-cond); cursor:pointer; } .gi-live-player-chip:hover,.gi-live-player-chip:focus-visible,.gi-live-player-chip.is-active { border-color:var(--gi-accent-2); color:#fff; outline:none; box-shadow:0 0 0 2px rgba(178,239,255,.1); } .gi-live-player-card { position:relative; display:grid; grid-template-columns:minmax(150px,.42fr) minmax(0,1.58fr); gap:20px; align-items:start; min-height:190px; padding:20px; border-top:1px solid rgba(178,239,255,.14); background:linear-gradient(125deg,rgba(178,239,255,.05),transparent 55%); } .gi-live-player-card__identity { display:grid; gap:6px; min-width:0; } .gi-live-player-card__identity strong { color:#fff; font:900 var(--gi-fs-xl)/.95 var(--gi-font-cond); } .gi-live-player-card__eyebrow { color:var(--gi-accent-2)!important; letter-spacing:.11em; } .gi-live-player-card small { color:var(--gi-text-mute); font:700 var(--gi-fs-3xs)/1.2 var(--gi-font-cond); } .gi-live-player-card__metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; width:100%; } .gi-live-player-card__metric { display:grid; gap:7px; min-height:70px; padding:11px 12px; border:1px solid rgba(178,239,255,.12); border-radius:7px; background:rgba(2,12,16,.45); text-align:left; cursor:pointer; } .gi-live-player-card__metric:not(:disabled):hover,.gi-live-player-card__metric:not(:disabled):focus-visible { border-color:rgba(178,239,255,.28); background:rgba(178,239,255,.06); outline:none; } .gi-live-player-card__metric:disabled { cursor:default; } .gi-live-player-card__metrics small { color:var(--gi-accent-2); } .gi-live-player-card__metrics b { color:var(--gi-text); font:800 var(--gi-fs-md)/1 var(--gi-font-mono); } .gi-live-player-card__projected,.gi-player-card__projected { color:var(--gi-accent-2); font-style:normal; font-weight:700; opacity:.58; } .gi-live-player-card__projected.is-up { color:var(--gi-good); opacity:.88; text-shadow:0 0 12px rgba(89,255,159,.2); } .gi-live-player-card__projected.is-down { color:#ff6f78; opacity:.88; text-shadow:0 0 12px rgba(255,87,99,.18); } .gi-live-player-card__projected.is-steady { color:var(--gi-accent-2); opacity:.58; } .gi-live-player-card__basis { grid-column:1/-1; text-align:right; opacity:.72; } .gi-live-stat-range { position:absolute; inset:5px; z-index:12; max-height:290px; overflow:auto; padding:12px; border:1px solid rgba(178,239,255,.34); border-radius:8px; background:rgba(2,12,16,.97); box-shadow:0 18px 45px rgba(0,0,0,.58); backdrop-filter:blur(12px); } .gi-live-stat-range__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .gi-live-stat-range__head>div { display:grid; gap:3px; } .gi-live-stat-range__head strong { color:#fff; font:900 var(--gi-fs-xs)/1 var(--gi-font-cond); letter-spacing:.05em; } .gi-live-stat-range__close { width:28px; height:28px; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(255,255,255,.05); color:#fff; font-size:1rem; cursor:pointer; } .gi-live-stat-range__summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; } .gi-live-stat-range__summary span { display:grid; gap:3px; padding:7px; border:1px solid rgba(178,239,255,.12); border-radius:5px; background:rgba(178,239,255,.04); } .gi-live-stat-range__summary b { color:#fff; font:900 var(--gi-fs-xs)/1 var(--gi-font-mono); } .gi-live-stat-range__ladder { display:grid; gap:5px; } .gi-live-stat-range__ladder>div { display:grid; grid-template-columns:42px minmax(90px,1fr) 50px; gap:8px; align-items:center; color:var(--gi-text-dim); font:800 var(--gi-fs-3xs)/1 var(--gi-font-mono); } .gi-live-stat-range__ladder i { height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); } .gi-live-stat-range__ladder i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gi-accent-2),var(--gi-good)); } .gi-live-stat-range__ladder strong { color:#fff; text-align:right; font:800 var(--gi-fs-3xs)/1 var(--gi-font-mono); } .gi-live-stat-range__note { display:block; margin-top:9px; color:var(--gi-text-mute); } @media (max-width:640px) { .gi-live-players { margin-inline:10px; } .gi-live-players__teams { padding:10px; } .gi-live-team-choice { min-height:48px; font-size:var(--gi-fs-xs); } .gi-live-player-chip { min-height:44px; } .gi-live-player-card { grid-template-columns:1fr; gap:14px; min-height:0; padding:16px 12px; } .gi-live-player-card__metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .gi-live-player-card__metric { min-height:72px; } .gi-live-player-card__basis { text-align:left; } .gi-live-stat-range { position:fixed; inset:auto 8px 8px; max-height:min(72vh,520px); } .gi-live-field { height:132px; } } /* Compact practice drawer + broadcast-style football field HUD. */ .gi-free-play{margin:10px var(--gi-sp-4) 0;padding:0;overflow:hidden;background:rgba(4,13,17,.72)} .gi-free-play__toggle{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:0;background:linear-gradient(90deg,rgba(255,103,52,.09),rgba(178,239,255,.035));color:var(--gi-text);text-align:left;cursor:pointer} .gi-free-play__toggle>span:first-child{display:flex;align-items:baseline;gap:10px;min-width:0}.gi-free-play__toggle b{font:900 var(--gi-fs-xs)/1 var(--gi-font-cond);letter-spacing:.055em;text-transform:uppercase}.gi-free-play__toggle small{overflow:hidden;color:var(--gi-text-mute);font:700 var(--gi-fs-3xs)/1 var(--gi-font-cond);text-overflow:ellipsis;white-space:nowrap} .gi-free-play__toggle-summary{flex:none;color:var(--gi-accent);font:900 var(--gi-fs-3xs)/1 var(--gi-font-mono);letter-spacing:.08em}.gi-free-play__toggle-summary i{display:inline-block;margin-left:5px;font-style:normal;font-size:1rem;transition:transform .18s ease}.gi-free-play.is-open .gi-free-play__toggle-summary i{transform:rotate(180deg)} .gi-free-play__drawer{padding:14px;border-top:1px solid rgba(255,255,255,.08)}.gi-free-play__drawer[hidden]{display:none!important} .gi-live-field{height:214px;margin:0 2px;border-radius:8px;background:linear-gradient(90deg,rgba(4,22,18,.72) 0 5%,transparent 5% 95%,rgba(4,22,18,.72) 95%),repeating-linear-gradient(90deg,#155d39 0,#155d39 10%,#1a6840 10%,#1a6840 20%);box-shadow:inset 0 0 35px rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.18)} .gi-live-field__hud{position:absolute;inset:7px 48px auto;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:38px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(2,10,13,.72);box-shadow:0 6px 20px rgba(0,0,0,.25);backdrop-filter:blur(8px)} .gi-live-field__hud-main,.gi-live-field__hud-meta{display:flex;align-items:center;gap:9px;white-space:nowrap}.gi-live-field__hud-main strong{color:#fff;font:900 var(--gi-fs-sm)/1 var(--gi-font-mono)}.gi-live-field__hud-main span,.gi-live-field__hud-meta span,.gi-live-field__timeouts{color:rgba(235,249,243,.75);font:800 var(--gi-fs-3xs)/1 var(--gi-font-cond);letter-spacing:.045em}.gi-live-field__hud-meta{justify-content:center}.gi-live-field__status-rail{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}.gi-live-field__event{padding:5px 7px;border:1px solid;border-radius:999px;font:900 9px/1 var(--gi-font-mono);letter-spacing:.05em}.gi-live-field__event.is-penalty{border-color:#ffd257;color:#ffe49a;background:rgba(255,189,35,.16)}.gi-live-field__event.is-review{border-color:#8ce1ff;color:#c9f2ff;background:rgba(45,169,215,.17)}.gi-live-field__event.is-timeout{border-color:#ff9e78;color:#ffd1bf;background:rgba(255,103,52,.17)} .gi-live-goalpost{display:none!important} @media(max-width:760px){.gi-live-field{height:168px;margin-inline:6px}.gi-live-field__hud{inset:6px 34px auto;grid-template-columns:1fr auto;gap:5px 10px}.gi-live-field__hud-meta{justify-content:flex-end}.gi-live-field__status-rail{grid-column:1/-1;justify-content:flex-start;overflow-x:auto;padding-top:3px}.gi-live-field__timeouts{font-size:9px}.gi-live-goalpost--left{left:9px}.gi-live-goalpost--right{right:9px}.gi-free-play{margin-inline:6px}.gi-free-play__toggle{min-height:48px}.gi-free-play__toggle small{display:none}.gi-free-play__drawer{padding:12px}} .gi-next-snap { position:absolute; left:50%; bottom:6px; z-index:3; display:flex; align-items:center; gap:9px; max-width:calc(100% - 64px); padding:7px 11px; transform:translateX(-50%); border:1px solid rgba(178, 239, 255, .28); border-radius:999px; background:rgba(3, 12, 16, .86); box-shadow:0 6px 18px rgba(0,0,0,.28); white-space:nowrap; backdrop-filter:blur(8px); } .gi-next-snap__label { color:var(--gi-accent-2); font:800 .58rem/1 var(--gi-font-cond); letter-spacing:.11em; } .gi-next-snap strong { color:var(--gi-text); font:800 var(--gi-fs-3xs)/1 var(--gi-font-mono); } .gi-next-snap__target { overflow:hidden; color:var(--gi-good); font:700 var(--gi-fs-3xs)/1 var(--gi-font-cond); text-overflow:ellipsis; } .gi-ballpark { position:relative; width:calc(100% - (var(--gi-sp-4) * 2)); max-width:680px; height:clamp(228px, 44vw, 300px); margin:2px auto 12px; overflow:hidden; border:1px solid rgba(178,239,255,.18); border-radius:10px; background: linear-gradient(180deg, rgba(2,8,12,.08), rgba(2,8,12,.72)), repeating-linear-gradient(90deg, #17252b 0 18px, #101b20 18px 35px); box-shadow:inset 0 0 45px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.18); isolation:isolate; } .gi-ballpark__stands { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 9%, rgba(137,172,176,.22), transparent 48%); } .gi-ballpark__track, .gi-ballpark__grass { position:absolute; clip-path:polygon(50% 98%, 1% 34%, 2% 22%, 7% 11%, 20% 3%, 50% 0, 80% 3%, 93% 11%, 98% 22%, 99% 34%); } .gi-ballpark__track { inset:9px 2.5% 5px; background:linear-gradient(180deg,#9d7445,#75502f 58%,#9b7041); filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); } .gi-ballpark__grass { inset:15px 3.7% 11px; background: linear-gradient(180deg, rgba(236,255,236,.08), transparent 38%), repeating-linear-gradient(108deg, rgba(255,255,255,.035) 0 30px, rgba(0,0,0,.035) 30px 60px), #247344; box-shadow:inset 0 -32px 42px rgba(0,38,22,.25); } .gi-ballpark__distance { position:absolute; top:12px; z-index:4; color:rgba(239,250,245,.58); font:800 .56rem/1 var(--gi-font-mono); text-shadow:0 1px 2px #000; } .gi-ballpark__distance--left { left:8.5%; transform:rotate(-11deg); } .gi-ballpark__distance--center { left:50%; transform:translateX(-50%); } .gi-ballpark__distance--right { right:8.5%; transform:rotate(11deg); } .gi-ballpark__foul { position:absolute; bottom:8%; left:50%; z-index:5; width:52%; height:1px; transform-origin:0 50%; background:rgba(255,255,255,.82); box-shadow:0 0 2px rgba(255,255,255,.35); } .gi-ballpark__foul--left { transform:rotate(-151deg); } .gi-ballpark__foul--right { transform:rotate(-29deg); } .gi-ballpark__infield { position:absolute; left:50%; bottom:15%; z-index:2; width:116px; height:116px; transform:translateX(-50%) rotate(45deg); border-radius:30% 8% 30% 8%; background:#aa7a48; box-shadow:0 0 0 2px rgba(104,67,35,.26), inset 0 0 18px rgba(85,48,22,.28); } .gi-ballpark__infield-grass { position:absolute; inset:25px; border-radius:18%; background:#27794a; box-shadow:inset 0 0 10px rgba(0,0,0,.2); } .gi-ballpark__mound { position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%); border-radius:50%; background:#b88755; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .gi-live-base { position:absolute; z-index:7; width:12px; height:12px; transform:translate(-50%,50%) rotate(45deg); border:1px solid rgba(255,255,255,.92); background:#f3f1e8; box-shadow:0 2px 4px rgba(0,0,0,.48); } .gi-live-base.is-on { background:var(--gi-warn); box-shadow:0 0 0 3px rgba(255,197,61,.16), 0 0 12px rgba(255,197,61,.64); } .gi-live-base--second { bottom:52%; left:50%; } .gi-live-base--third { bottom:29%; left:37%; } .gi-live-base--first { bottom:29%; left:63%; } .gi-live-base--home { bottom:9%; left:50%; } .gi-player { position:absolute; z-index:8; width:24px; height:38px; padding:0; transform:translateX(-50%); border:0; background:transparent; pointer-events:none; } .gi-player[data-player-id] { cursor:pointer; pointer-events:auto; } .gi-player[data-player-id]:hover .gi-player__figure, .gi-player[data-player-id]:focus-visible .gi-player__figure { filter:drop-shadow(0 0 5px var(--gi-accent-2)); transform:translateY(-3px) scale(1.08); } .gi-player[data-player-id]:focus-visible { outline:2px solid var(--gi-accent-2); outline-offset:2px; border-radius:12px; } .gi-player i, .gi-player span { position:absolute; display:block; } .gi-player__shadow { bottom:0; left:4px; width:16px; height:5px; border-radius:50%; background:rgba(0,0,0,.42); filter:blur(1px); } .gi-player__figure { inset:0; transform-origin:50% 100%; animation:gi-player-bob 1.45s ease-in-out infinite; animation-delay:var(--player-delay, 0s); } .gi-player__head { top:5px; left:5px; z-index:2; width:14px; height:14px; border:1px solid rgba(67,39,25,.42); border-radius:48% 48% 44% 44%; background:#d6a073; box-shadow:inset -2px -2px 0 rgba(84,43,25,.16); } .gi-player__cap { top:2px; left:4px; z-index:3; width:16px; height:8px; border-radius:9px 9px 2px 2px; background:var(--uniform-primary,#263f5b); box-shadow:inset 0 -2px 0 rgba(8,15,20,.38); } .gi-player__cap::after { content:""; position:absolute; right:-4px; bottom:0; width:8px; height:3px; border-radius:50%; background:var(--uniform-secondary,#e7edf0); } .gi-player__body { top:18px; left:5px; width:14px; height:13px; border-radius:5px 5px 3px 3px; clip-path:polygon(12% 0,88% 0,100% 24%,88% 100%,12% 100%,0 24%); background:var(--uniform-primary,#263f5b); box-shadow:inset 3px 0 0 var(--uniform-secondary,#e7edf0),inset -3px 0 0 var(--uniform-secondary,#e7edf0); } .gi-player__body::before { content:""; position:absolute; top:1px; left:4px; right:4px; height:2px; border-radius:2px; background:var(--uniform-secondary,#e7edf0); } .gi-player__body::after { content:attr(data-team); position:absolute; inset:4px 0 auto; overflow:hidden; color:#fff; font:900 4.8px/1 var(--gi-font-cond); letter-spacing:-.02em; text-align:center; text-shadow:0 1px 1px rgba(0,0,0,.76); } .gi-player__feet { top:30px; left:5px; width:14px; height:7px; border-radius:1px 1px 3px 3px; border-left:4px solid var(--uniform-primary,#263f5b); border-right:4px solid var(--uniform-primary,#263f5b); background:#cbd1d3; } .gi-player--defense { --uniform-primary:var(--def-primary,#263f5b); --uniform-secondary:var(--def-secondary,#e7edf0); transform:translateX(-50%) scale(.78); transform-origin:50% 100%; } .gi-player--runner,.gi-player--batter { --uniform-primary:var(--off-primary,#d94f2b); --uniform-secondary:var(--off-secondary,#ff8a5c); } .gi-player.gi-uniform--home .gi-player__body { background:repeating-linear-gradient(90deg,#f4f2ea 0 3px,#dfe4e5 3px 4px); box-shadow:inset 3px 0 0 var(--uniform-primary),inset -3px 0 0 var(--uniform-primary),inset 0 -2px 0 var(--uniform-primary); } .gi-player.gi-uniform--home .gi-player__body::before { background:var(--uniform-primary); } .gi-player.gi-uniform--home .gi-player__body::after { color:var(--uniform-primary); text-shadow:0 1px 0 #fff; } .gi-player.gi-uniform--home .gi-player__feet { background:#f1f0eb; border-color:var(--uniform-primary); } .gi-player.gi-uniform--away .gi-player__body { background:var(--uniform-primary); box-shadow:inset 3px 0 0 var(--uniform-secondary),inset -3px 0 0 var(--uniform-secondary),inset 0 -2px 0 rgba(0,0,0,.25); } .gi-player.gi-uniform--away .gi-player__feet { background:#b7c0c4; border-color:var(--uniform-primary); } .gi-player--catcher { bottom:6%; left:49%; } .gi-player--pitcher { bottom:29%; left:50%; } .gi-player--first-baseman { bottom:37%; left:67%; } .gi-player--second-baseman { bottom:48%; left:58%; } .gi-player--shortstop { bottom:48%; left:42%; } .gi-player--third-baseman { bottom:37%; left:33%; } .gi-player--left-field { bottom:65%; left:23%; } .gi-player--center-field { bottom:73%; left:50%; } .gi-player--right-field { bottom:65%; left:77%; } .gi-player--batter { bottom:8%; left:53%; transform:translateX(-50%) scale(.92); transform-origin:50% 100%; } .gi-live-base .gi-player { bottom:13px; left:50%; transform:translateX(-50%) rotate(-45deg) scale(.9); transform-origin:50% 100%; } .gi-player-card { position:absolute; left:12px; bottom:12px; z-index:30; width:min(310px,calc(100% - 24px)); max-height:calc(100% - 62px); padding:48px 13px 13px; overflow:auto; border:1px solid rgba(76,194,255,.48); border-radius:10px; background:rgba(3,12,16,.96); box-shadow:0 14px 38px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.06); color:var(--gi-text); backdrop-filter:blur(12px); } .gi-player-card__back { position:absolute; top:8px; left:10px; min-height:27px; padding:0 9px; border:1px solid var(--gi-line); border-radius:999px; background:rgba(255,255,255,.05); color:var(--gi-text); font:800 .58rem/1 var(--gi-font-cond); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; } .gi-player-card__back:hover,.gi-player-card__back:focus-visible { border-color:var(--gi-info); color:var(--gi-info); } .gi-player-card__close { position:absolute; top:7px; right:8px; width:25px; height:25px; padding:0; border:1px solid var(--gi-line); border-radius:50%; background:rgba(255,255,255,.05); color:var(--gi-text); font:800 1rem/1 var(--gi-font-cond); cursor:pointer; } .gi-player-card__eyebrow,.gi-player-card__label { display:block; color:var(--gi-accent-2); font:800 .52rem/1 var(--gi-font-cond); letter-spacing:.11em; } .gi-player-card__name { display:block; max-width:calc(100% - 28px); margin:4px 0 10px; overflow:hidden; font:850 1rem/1.05 var(--gi-font-cond); text-overflow:ellipsis; white-space:nowrap; } .gi-player-card__label { margin-bottom:6px; color:var(--gi-text-mute); } .gi-player-card__metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--gi-line); border-radius:6px; background:var(--gi-line); } .gi-player-card__metrics > div { min-width:0; padding:6px; background:rgba(10,24,29,.96); } .gi-player-card__metrics span { display:block; overflow:hidden; color:var(--gi-text-mute); font:750 .45rem/1 var(--gi-font-cond); letter-spacing:.06em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } .gi-player-card__metrics strong { display:block; margin-top:3px; overflow:hidden; color:var(--gi-good); font:800 .65rem/1 var(--gi-font-mono); text-overflow:ellipsis; white-space:nowrap; } .gi-player-card__metrics .gi-player-card__projected { color:var(--gi-accent-2); } .gi-player-card__projection { margin:9px 0 5px; color:var(--gi-text); font:700 .63rem/1.3 var(--gi-font-cond); } .gi-player-card small { display:block; color:var(--gi-text-mute); font:500 .48rem/1.25 var(--gi-font-cond); } .gi-player--arrival { opacity:0; animation:gi-runner-arrival .14s 2.18s forwards; } .gi-player--deferred { opacity:0; animation:gi-runner-arrival .14s var(--player-arrival-delay,2.28s) forwards; } .gi-player--fielding { z-index:13; animation:gi-fielder-chase 2.1s cubic-bezier(.32,.7,.35,1) .5s forwards; } .gi-player--covering { z-index:12; animation:gi-fielder-chase 1.35s cubic-bezier(.32,.7,.35,1) .9s forwards; } .gi-player-path { position:absolute; inset:0; z-index:10; pointer-events:none; } .gi-player-path:not(.is-out) { animation:gi-runner-path-clear .14s 2.18s forwards; } .gi-player-path--home-home:not(.is-out) { animation-delay:3.36s; } .gi-player-path--first-home:not(.is-out) { animation-delay:2.86s; } .gi-player-path .gi-player { animation-duration:2.3s; animation-timing-function:cubic-bezier(.45,.05,.55,.95); animation-fill-mode:forwards; } .gi-player-path--home-first .gi-player { animation-name:gi-run-first; } .gi-player-path--home-second .gi-player { animation-name:gi-run-second; } .gi-player-path--home-third .gi-player { animation-name:gi-run-third; } .gi-player-path--home-home .gi-player { animation-name:gi-run-bases; animation-duration:3.5s; } .gi-player-path--first-second .gi-player { animation-name:gi-run-first-second; } .gi-player-path--first-third .gi-player { animation-name:gi-run-first-third; } .gi-player-path--first-home .gi-player { animation-name:gi-run-first-home; animation-duration:3s; } .gi-player-path--second-third .gi-player { animation-name:gi-run-second-third; } .gi-player-path--second-home .gi-player { animation-name:gi-run-second-home; } .gi-player-path--third-home .gi-player { animation-name:gi-run-third-home; } .gi-player-path.is-out { animation:gi-runner-out 2.4s forwards; } .gi-team-key { position:absolute; top:36px; z-index:14; display:flex; align-items:center; gap:4px; padding:4px 6px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(3,12,16,.76); box-shadow:0 4px 12px rgba(0,0,0,.22); backdrop-filter:blur(5px); } .gi-team-key--batting { left:10px; } .gi-team-key--fielding { right:10px; } .gi-team-key i { position:relative;width:12px;height:12px;border:2px solid;border-radius:3px 3px 4px 4px;clip-path:polygon(12% 0,88% 0,100% 24%,88% 100%,12% 100%,0 24%); } .gi-team-key--batting { --key-primary:var(--off-primary);--key-secondary:var(--off-secondary); } .gi-team-key--fielding { --key-primary:var(--def-primary);--key-secondary:var(--def-secondary); } .gi-team-key.gi-uniform--away i { border-color:var(--key-secondary);background:var(--key-primary);box-shadow:inset 3px 0 var(--key-secondary),inset -3px 0 var(--key-secondary); } .gi-team-key.gi-uniform--home i { border-color:var(--key-primary);background:#f4f2ea;box-shadow:inset 3px 0 var(--key-primary),inset -3px 0 var(--key-primary); } .gi-team-key span { color:var(--gi-text-mute); font:800 .48rem/1 var(--gi-font-cond); letter-spacing:.08em; } .gi-team-key strong { color:#fff; font:900 .56rem/1 var(--gi-font-mono); } .gi-pitch-ball { position:absolute; bottom:36%; left:50%; z-index:14; width:7px; height:7px; border-radius:50%; background:#f8f4e9; box-shadow:0 0 0 1px rgba(80,26,18,.55),0 0 8px rgba(255,255,255,.8); animation:gi-pitch-delivery .72s cubic-bezier(.55,.05,.72,.5) forwards; } .gi-pitch-ball--ball { animation-name:gi-pitch-ball; } .gi-pitch-ball--foul { animation-name:gi-pitch-foul; animation-duration:1.15s; } .gi-pitch-ball--contact { animation-name:gi-pitch-delivery; animation-duration:.52s; } .gi-ball-flight { position:absolute; inset:0; z-index:12; width:100%; height:100%; overflow:visible; pointer-events:none; } .gi-ball-flight__trail { fill:none; stroke:rgba(255,241,185,.84); stroke-width:1.3; stroke-linecap:round; stroke-dasharray:120; stroke-dashoffset:120; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 2px rgba(255,255,255,.9)); animation:gi-flight-draw 1.65s ease-out .48s forwards; } .gi-ball-flight__ball { fill:#fffdf2; stroke:#892319; stroke-width:.45; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 2px #fff); } .gi-ball-flight__landing { fill:none; stroke:rgba(255,197,61,.9); stroke-width:.8; opacity:0; vector-effect:non-scaling-stroke; animation:gi-landing-pulse .7s 1.9s ease-out 2; } .gi-fielding-call { position:absolute; z-index:16; max-width:145px; padding:4px 6px; transform:translate(-50%,-115%); border:1px solid rgba(255,255,255,.2); border-radius:5px; background:rgba(3,12,16,.88); color:#fff; font:900 .5rem/1.1 var(--gi-font-cond); letter-spacing:.05em; text-align:center; animation:gi-field-call 3.1s both; pointer-events:none; } .gi-pitch-zone { position:absolute; top:64px; right:12px; z-index:15; width:72px; padding:5px; border:1px solid rgba(178,239,255,.27); border-radius:7px; background:rgba(3,12,16,.78); box-shadow:0 5px 16px rgba(0,0,0,.3); backdrop-filter:blur(6px); } .gi-pitch-zone__label { display:block; margin-bottom:4px; color:var(--gi-text-mute); font:800 .44rem/1 var(--gi-font-cond); letter-spacing:.08em; text-align:center; } .gi-pitch-zone__plot { position:relative; height:76px; background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:25% 25%; } .gi-pitch-zone__box { position:absolute; inset:18% 22%; border:1px solid rgba(255,255,255,.78); background:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:33.333% 33.333%; } .gi-pitch-zone__dot { position:absolute; width:9px; height:9px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; box-shadow:0 0 7px currentColor; } .gi-pitch-zone__dot.is-strike { color:#ff5a1f; background:#ff5a1f; } .gi-pitch-zone__dot.is-ball { color:#4cc2ff; background:#4cc2ff; } .gi-play-call { position:absolute; top:28px; left:50%; z-index:15; min-width:126px; max-width:72%; padding:6px 10px; transform:translateX(-50%); border:1px solid rgba(178,239,255,.25); border-radius:7px; background:rgba(3,12,16,.86); box-shadow:0 5px 16px rgba(0,0,0,.32); text-align:center; backdrop-filter:blur(7px); } .gi-play-call strong { display:block; overflow:hidden; color:#fff; font:900 .68rem/1.05 var(--gi-font-cond); letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } .gi-play-call span { display:block; margin-top:4px; color:var(--gi-accent-2); font:800 .55rem/1 var(--gi-font-mono); letter-spacing:.06em; } .gi-live-matchup { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:-7px var(--gi-sp-4) var(--gi-sp-3); overflow:hidden; border:1px solid var(--gi-line); border-radius:var(--gi-r-sm); background:var(--gi-line); } .gi-live-matchup > div { min-width:0; padding:8px 11px; background:rgba(7,18,23,.9); } .gi-live-matchup span { display:block; margin-bottom:3px; color:var(--gi-text-mute); font:800 .56rem/1 var(--gi-font-cond); letter-spacing:.11em; } .gi-live-matchup strong { display:block; overflow:hidden; color:var(--gi-text); font:750 var(--gi-fs-3xs)/1.2 var(--gi-font-cond); text-overflow:ellipsis; white-space:nowrap; } @keyframes gi-player-bob { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-2px) rotate(1deg); } } @keyframes gi-pitch-delivery { 0% { bottom:36%; left:50%; transform:scale(.75); } 76% { opacity:1; } 100% { bottom:11%; left:51%; transform:scale(1.1); opacity:.2; } } @keyframes gi-pitch-ball { 0% { bottom:36%; left:50%; } 70% { opacity:1; } 100% { bottom:10%; left:55%; opacity:.15; } } @keyframes gi-pitch-foul { 0% { bottom:36%; left:50%; } 45% { bottom:11%; left:51%; } 100% { bottom:50%; left:var(--foul-end-left,9%); opacity:.05; } } @keyframes gi-pitch-contact { 0% { bottom:36%; left:50%; } 38% { bottom:11%; left:51%; } 100% { bottom:72%; left:65%; transform:scale(.58); opacity:.15; } } @keyframes gi-run-first { 0% { bottom:8%; left:50%; } 100% { bottom:29%; left:63%; } } @keyframes gi-run-second { 0% { bottom:8%; left:50%; } 50% { bottom:29%; left:63%; } 100% { bottom:52%; left:50%; } } @keyframes gi-run-third { 0% { bottom:8%; left:50%; } 34% { bottom:29%; left:63%; } 67% { bottom:52%; left:50%; } 100% { bottom:29%; left:37%; } } @keyframes gi-run-first-second { 0% { bottom:29%; left:63%; } 100% { bottom:52%; left:50%; } } @keyframes gi-run-first-third { 0% { bottom:29%; left:63%; } 52% { bottom:52%; left:50%; } 100% { bottom:29%; left:37%; } } @keyframes gi-run-first-home { 0% { bottom:29%; left:63%; } 34% { bottom:52%; left:50%; } 67% { bottom:29%; left:37%; } 100% { bottom:8%; left:50%; } } @keyframes gi-run-second-third { 0% { bottom:52%; left:50%; } 100% { bottom:29%; left:37%; } } @keyframes gi-run-second-home { 0% { bottom:52%; left:50%; } 50% { bottom:29%; left:37%; } 100% { bottom:8%; left:50%; } } @keyframes gi-run-third-home { 0% { bottom:29%; left:37%; } 100% { bottom:8%; left:50%; } } @keyframes gi-run-bases { 0%,100% { bottom:8%; left:50%; transform:translateX(-50%) rotate(0); } 25% { bottom:29%; left:63%; transform:translateX(-50%) rotate(-7deg); } 50% { bottom:52%; left:50%; transform:translateX(-50%) rotate(0); } 75% { bottom:29%; left:37%; transform:translateX(-50%) rotate(7deg); } } @keyframes gi-runner-arrival { to { opacity:1; } } @keyframes gi-runner-path-clear { to { opacity:0; visibility:hidden; } } @keyframes gi-runner-out { 0%,84% { opacity:1; } 100% { opacity:0; } } @keyframes gi-fielder-chase { to { left:var(--field-end-left); bottom:var(--field-end-bottom); transform:translateX(-50%) scale(.88); } } @keyframes gi-flight-draw { to { stroke-dashoffset:0; } } @keyframes gi-landing-pulse { 0% { opacity:0; r:1.2; } 40% { opacity:1; } 100% { opacity:0; r:4.5; } } @keyframes gi-field-call { 0%,44% { opacity:0; transform:translate(-50%,-90%); } 54%,88% { opacity:1; transform:translate(-50%,-115%); } 100% { opacity:0; } } .gi-live-context { display:grid; grid-template-columns:minmax(150px,1.3fr) minmax(130px,1fr) minmax(150px,1.15fr) auto; gap:1px; margin:0 var(--gi-sp-4) var(--gi-sp-3); overflow:hidden; border:1px solid var(--gi-line); border-radius:var(--gi-r-sm); background:var(--gi-line); } .gi-live-context > * { min-width:0; padding:9px 11px; background:rgba(7,18,23,.9); } .gi-live-context span { display:block; margin-bottom:3px; color:var(--gi-text-mute); font:800 .58rem/1 var(--gi-font-cond); letter-spacing:.11em; } .gi-live-context strong { display:block; overflow:hidden; color:var(--gi-text); font:700 var(--gi-fs-xs)/1.25 var(--gi-font-cond); text-overflow:ellipsis; white-space:nowrap; } .gi-live-context__facts { color:var(--gi-text-dim); font:600 var(--gi-fs-3xs)/1.3 var(--gi-font-mono); } .gi-live-countdown { display:flex; grid-column:1/-1; align-items:center; justify-content:center; color:var(--gi-warn); font:800 var(--gi-fs-xs)/1 var(--gi-font-mono); white-space:nowrap; } .gi-live-countdown[hidden] { display:none; } .gi-live-situation { padding:0 var(--gi-sp-4) var(--gi-sp-3); color:var(--gi-accent-2); text-align:center; font:700 var(--gi-fs-xs)/1.4 var(--gi-font-mono); } .gi-live-last { display:grid; gap:4px; margin:0 var(--gi-sp-4); padding:12px 14px; border-left:3px solid var(--gi-accent); background:rgba(255,90,31,.07); } .gi-live-last.is-pregame { border-left-color:var(--gi-accent-2); background:rgba(76,194,255,.055); } .gi-live-last span { color:var(--gi-accent); font:800 var(--gi-fs-3xs)/1 var(--gi-font-cond); letter-spacing:.12em; } .gi-live-last strong { color:var(--gi-text); font-size:var(--gi-fs-sm); } .gi-live-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--gi-sp-4); border-top:1px solid var(--gi-line); border-bottom:1px solid var(--gi-line); } .gi-live-metric { display:grid; gap:5px; padding:14px; border-right:1px solid var(--gi-line); border-bottom:1px solid var(--gi-line); } .gi-live-metric:nth-child(3n) { border-right:0; } .gi-live-metric:nth-last-child(-n+3) { border-bottom:0; } .gi-live-metric span { color:var(--gi-text-mute); font:700 var(--gi-fs-3xs)/1.25 var(--gi-font-cond); letter-spacing:.09em; text-transform:uppercase; } .gi-live-metric strong { color:var(--gi-good); font:800 var(--gi-fs-lg)/1 var(--gi-font-mono); } .gi-live-game > h3 { margin:var(--gi-sp-5) var(--gi-sp-4) var(--gi-sp-2); } .gi-live-game > .gi-table-wrap, .gi-live-game > .gi-msg, .gi-live-game > .gi-error { margin-left:var(--gi-sp-4); margin-right:var(--gi-sp-4); } .gi-live-game > .gi-msg:last-child { margin-bottom:var(--gi-sp-4); } .gi-live-prop { margin:var(--gi-sp-5) var(--gi-sp-4); padding:var(--gi-sp-4); border:1px solid var(--gi-line); border-radius:var(--gi-r-md); background:rgba(7, 18, 23, .66); } .gi-live-prop > h3 { margin:0 0 var(--gi-sp-2); } .gi-live-prop__controls { display:grid; grid-template-columns:minmax(180px, 1.4fr) repeat(4, minmax(100px, .8fr)) auto; gap:var(--gi-sp-2); align-items:end; margin-top:var(--gi-sp-4); } .gi-live-prop__controls .gi-btn { min-height:39px; white-space:nowrap; } .gi-live-prop__result { margin-top:var(--gi-sp-4); } .gi-live-prop__metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--gi-line); } .gi-live-prop__metrics .gi-live-metric:nth-child(4n) { border-right:0; } .gi-live-prop__result > h4 { margin:var(--gi-sp-4) 0 var(--gi-sp-2); } @media (max-width: 650px) { .gi-live-game__head { align-items:flex-start; } .gi-live-game__fresh { text-align:right; } .gi-live-scoreboard { gap:8px; } .gi-live-team { display:grid; gap:4px; } .gi-live-team--home { display:grid; } .gi-live-team--home strong { order:2; } .gi-live-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .gi-live-metric:nth-child(3n) { border-right:1px solid var(--gi-line); } .gi-live-metric:nth-child(even) { border-right:0; } .gi-live-metric:nth-last-child(-n+3) { border-bottom:1px solid var(--gi-line); } .gi-live-metric:nth-last-child(-n+2) { border-bottom:0; } .gi-live-prop { margin:var(--gi-sp-4) var(--gi-sp-2); padding:var(--gi-sp-3); } .gi-live-prop__controls { grid-template-columns:1fr; } .gi-live-prop__metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .gi-live-prop__metrics .gi-live-metric:nth-child(4n) { border-right:1px solid var(--gi-line); } .gi-live-prop__metrics .gi-live-metric:nth-child(even) { border-right:0; } .gi-live-context { grid-template-columns:1fr 1fr; margin-left:var(--gi-sp-2); margin-right:var(--gi-sp-2); } .gi-live-matchup { grid-template-columns:1fr 1fr; margin-left:var(--gi-sp-2); margin-right:var(--gi-sp-2); } .gi-live-matchup > div:last-child { grid-column:1 / -1; } .gi-live-context strong { overflow:visible; text-overflow:clip; white-space:normal; } .gi-ballpark { width:calc(100% - (var(--gi-sp-2) * 2)); height:220px; } .gi-ballpark__foul { width:58%; } .gi-ballpark__foul--left { transform:rotate(-128deg); } .gi-ballpark__foul--right { transform:rotate(-52deg); } .gi-player--defense { transform:translateX(-50%) scale(.68); } .gi-player-card { left:7px; bottom:7px; width:calc(100% - 14px); max-height:calc(100% - 54px); } .gi-team-key { top:34px; padding:3px 5px; } .gi-team-key span { display:none; } .gi-pitch-zone { top:58px; right:7px; width:58px; padding:4px; } .gi-pitch-zone__plot { height:60px; } .gi-fielding-call { max-width:105px; font-size:.43rem; } .gi-next-snap { gap:6px; max-width:calc(100% - 48px); } .gi-next-snap__label { display:none; } .gi-next-snap__target { max-width:150px; } } @media (prefers-reduced-motion: reduce) { .gi-live-dot, .gi-player__figure, .gi-player-path .gi-player, .gi-pitch-ball, .gi-player--fielding, .gi-player--covering, .gi-player--arrival, .gi-player--deferred, .gi-ball-flight__trail, .gi-ball-flight__landing, .gi-fielding-call { animation:none; } .gi-player-path { display:none; } .gi-pitch-ball { display:none; } .gi-player--arrival, .gi-player--deferred { opacity:1; } .gi-ball-flight__trail { stroke-dashoffset:0; } .gi-ball-flight__landing { opacity:.8; } .gi-fielding-call { opacity:1; } } /* Alternate game-total distribution shown inside the matchup drawer. */ .gi-total-fan { margin-top: var(--gi-sp-5); } .gi-total-fan__row { display: grid; grid-template-columns: minmax(92px, auto) minmax(120px, 1fr) minmax(260px, 1.8fr); align-items: center; gap: var(--gi-sp-3); padding: var(--gi-sp-2) 0; border-bottom: 1px solid var(--gi-line); } .gi-total-fan__row.is-market { color: var(--gi-accent-2); } .gi-total-fan__line, .gi-total-fan__values { font-family: var(--gi-font-mono); font-variant-numeric: tabular-nums; } .gi-total-fan__line { color: var(--gi-text); } .gi-total-fan__values { color: var(--gi-text-dim); font-size: var(--gi-fs-xs); } .gi-total-fan__track { display: flex; height: 10px; overflow: hidden; border-radius: var(--gi-r-pill); background: var(--gi-surface-2); } .gi-total-fan__over { background: var(--gi-good); } .gi-total-fan__under { background: var(--gi-info); } @media (max-width: 650px) { .gi-total-fan__row { grid-template-columns: 92px minmax(100px, 1fr); gap: var(--gi-sp-2); } .gi-total-fan__values { grid-column: 1 / -1; } } /* Exact discrete outcomes returned by each sport's simulation engine. */ .gi-sim-distribution { margin-top: var(--gi-sp-5); padding: var(--gi-sp-4); border: 1px solid var(--gi-line); border-radius: var(--gi-r-md); background: linear-gradient(180deg, rgba(20, 31, 38, .88), rgba(8, 14, 18, .72)); overflow: hidden; } .gi-sim-distribution__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gi-sp-4); } .gi-sim-distribution__heading h3 { margin: 0 0 var(--gi-sp-1); } .gi-sim-distribution__peak { flex: none; padding: 5px 9px; border: 1px solid rgba(44, 224, 142, .3); border-radius: var(--gi-r-pill); color: var(--gi-good); background: rgba(44, 224, 142, .08); font: 700 var(--gi-fs-xs)/1 var(--gi-font-mono); font-variant-numeric: tabular-nums; } .gi-sim-read { display: grid; gap: 6px; margin-top: var(--gi-sp-3); padding: 12px 14px; border-left: 3px solid var(--gi-good); border-radius: 0 var(--gi-r-sm) var(--gi-r-sm) 0; background: rgba(44, 224, 142, .07); } .gi-sim-read__verdict { color: var(--gi-text); font: 800 var(--gi-fs-md)/1.25 var(--gi-font-cond); letter-spacing: .025em; } .gi-sim-read__facts { color: var(--gi-text-dim); font: 700 var(--gi-fs-xs)/1.5 var(--gi-font-mono); font-variant-numeric: tabular-nums; } .gi-sim-distribution__tabs { display: flex; gap: 5px; margin: var(--gi-sp-4) 0 var(--gi-sp-3); padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; } .gi-sim-distribution__tab { flex: none; min-height: 34px; padding: 6px 11px; border: 1px solid var(--gi-line); border-radius: var(--gi-r-pill); color: var(--gi-text-dim); background: var(--gi-surface-2); font: 700 var(--gi-fs-xs)/1 var(--gi-font-cond); letter-spacing: .04em; cursor: pointer; } .gi-sim-distribution__tab:hover, .gi-sim-distribution__tab:focus-visible { color: var(--gi-text); border-color: var(--gi-line-strong); } .gi-sim-distribution__tab.is-active { color: #06100c; border-color: var(--gi-good); background: var(--gi-good); } .gi-sim-histogram { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 34px 2px 22px; } .gi-sim-histogram__plot { display: flex; align-items: flex-end; /* Keep the first outcome anchored to the visible left edge. Centering an overflowing flex row clips both ends, hiding the low buckets users need for the full distribution and its tooltips. */ justify-content: flex-start; gap: clamp(2px, .45vw, 6px); min-width: max(100%, 420px); height: 190px; padding: 0 14px; box-sizing: border-box; border-bottom: 1px solid var(--gi-line-strong); background-image: linear-gradient(to top, rgba(138, 165, 181, .08) 1px, transparent 1px); background-size: 100% 25%; } .gi-sim-histogram__bar { position: relative; flex: 1 1 0; min-width: 8px; max-width: 34px; height: calc(100% * var(--gi-bucket-height)); min-height: 2px; border-radius: 4px 4px 0 0; outline: none; background: linear-gradient(180deg, var(--gi-accent-2), var(--gi-field-2)); box-shadow: inset 0 1px rgba(255, 255, 255, .22); transition: filter var(--gi-dur-2) var(--gi-ease), transform var(--gi-dur-2) var(--gi-ease); } .gi-sim-histogram__bar:hover, .gi-sim-histogram__bar:focus-visible { z-index: 3; filter: brightness(1.35); transform: scaleX(1.08); } .gi-sim-histogram__bar::after { content: attr(data-tooltip); position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 220px; padding: 6px 8px; border: 1px solid var(--gi-line-strong); border-radius: var(--gi-r-sm); color: var(--gi-text); background: #071015; box-shadow: var(--gi-shadow-2); font: 700 var(--gi-fs-xs)/1.25 var(--gi-font-mono); pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--gi-dur-2) var(--gi-ease), transform var(--gi-dur-2) var(--gi-ease); } .gi-sim-histogram__bar:hover::after, .gi-sim-histogram__bar:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .gi-sim-histogram__label { position: absolute; top: calc(100% + 6px); left: 50%; color: var(--gi-text-mute); font: var(--gi-fs-3xs)/1 var(--gi-font-mono); transform: translateX(-50%); } .gi-sim-histogram__axis { color: var(--gi-text-mute); font-size: var(--gi-fs-xs); text-align: center; } .gi-sim-distribution > h4 { margin: var(--gi-sp-5) 0 var(--gi-sp-2); } .gi-sim-distribution .gi-table-wrap { max-height: 280px; } .gi-tennis-card.is-clickable { cursor: pointer; } .gi-tennis-card.is-clickable:focus-visible { outline: 2px solid var(--gi-accent); outline-offset: 3px; } @media (max-width: 650px) { .gi-sim-distribution { padding: var(--gi-sp-3); } .gi-sim-distribution__heading { display: block; } .gi-sim-distribution__peak { display: inline-block; margin-top: var(--gi-sp-2); } .gi-sim-histogram { margin-inline: calc(-1 * var(--gi-sp-3)); padding-inline: var(--gi-sp-3); } .gi-sim-histogram__plot { height: 160px; min-width: 480px; } .gi-sim-histogram__bar { min-width: 9px; } } /* ---------------------------------------------------------- NFL live lobby */ .gi-nfl-live-head { display:flex; align-items:center; justify-content:space-between; gap:var(--gi-sp-4); } .gi-live-lobby-summary { display:flex; align-items:end; justify-content:space-between; gap:var(--gi-sp-3); margin-bottom:var(--gi-sp-3); } .gi-live-lobby-summary span { display:block; color:var(--gi-accent); font:800 var(--gi-fs-2xs)/1 var(--gi-font-mono); letter-spacing:.12em; } .gi-live-lobby-summary strong { display:block; margin-top:6px; font-size:var(--gi-fs-xl); } .gi-live-lobby-summary small { color:var(--gi-text-faint); } .gi-nfl-live-card { display:grid; grid-template-columns:minmax(170px,.8fr) minmax(320px,1.8fr) minmax(120px,.7fr) auto; align-items:center; gap:var(--gi-sp-3); padding:var(--gi-sp-4); margin-bottom:var(--gi-sp-3); background:linear-gradient(110deg,rgba(15,29,34,.96),rgba(8,18,23,.96)); border:1px solid var(--gi-line); border-radius:var(--gi-r-md); box-shadow:var(--gi-shadow-1); } .gi-nfl-live-card.is-live { border-color:rgba(39,224,139,.5); box-shadow:inset 3px 0 0 var(--gi-accent),var(--gi-shadow-1); } .gi-nfl-live-card__status { color:var(--gi-text-dim); font:800 var(--gi-fs-xs)/1.25 var(--gi-font-mono); text-transform:uppercase; } .gi-nfl-live-card.is-live .gi-nfl-live-card__status { color:var(--gi-accent); } .gi-nfl-live-card__matchup { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--gi-sp-3); font-weight:800; } .gi-nfl-live-card__matchup span:last-child { text-align:right; } .gi-nfl-live-card__matchup b { color:var(--gi-text); font:900 var(--gi-fs-xl)/1 var(--gi-font-mono); white-space:nowrap; } .gi-nfl-live-card > small { color:var(--gi-text-faint); } @media (max-width:760px) { .gi-nfl-live-head,.gi-live-lobby-summary { align-items:flex-start; flex-direction:column; } .gi-nfl-live-card { grid-template-columns:1fr auto; } .gi-nfl-live-card__matchup { grid-column:1/-1; grid-row:1; } .gi-nfl-live-card__status { grid-column:1; } .gi-nfl-live-card > small { grid-column:1; } .gi-nfl-live-card .gi-btn { grid-column:2; grid-row:2/4; } } /* -------------------------------------------------------------- Trade Lab */ .gi-trade-launch { display:flex; align-items:center; gap:var(--gi-sp-3); padding:var(--gi-sp-3) 0 var(--gi-sp-5); color:var(--gi-text-dim); font-size:var(--gi-fs-xs); } .gi-trade-dialog { width:min(1120px, calc(100vw - 28px)); max-height:calc(100vh - 28px); margin:auto; padding:64px clamp(20px, 3vw, 38px) clamp(20px, 3vw, 38px); overflow:auto; color:var(--gi-text); background:radial-gradient(circle at 90% 0, rgba(39,224,139,.12), transparent 31%), linear-gradient(155deg,#101b20 0%,#0b1318 68%,#091015 100%); border:1px solid var(--gi-line-strong); border-radius:18px; box-shadow:0 28px 90px rgba(0,0,0,.72); } .gi-trade-dialog::backdrop { background:rgba(2,7,10,.82); backdrop-filter:blur(6px); } .gi-trade-dialog h2 { margin:var(--gi-sp-1) 0 0; font-size:clamp(28px,4vw,46px); } .gi-trade-dialog__close { position:absolute; top:14px; right:18px; border:0; background:transparent; color:var(--gi-text-dim); font-size:32px; cursor:pointer; } .gi-trade-dialog__close:hover { color:var(--gi-text); } .gi-trade-context { color:var(--gi-accent); font:700 var(--gi-fs-lg)/1.3 var(--gi-font-mono); } .gi-trade-controls { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:var(--gi-sp-3); margin:var(--gi-sp-5) 0; } .gi-trade-controls label,.gi-trade-leg label { display:flex; flex-direction:column; gap:7px; color:var(--gi-text-dim); font-size:var(--gi-fs-2xs); font-weight:700; letter-spacing:.04em; } .gi-trade-controls input,.gi-trade-controls select,.gi-trade-leg input,.gi-trade-leg select { min-width:0; height:42px; padding:0 11px; color:var(--gi-text); background:#0a151a; border:1px solid var(--gi-line); border-radius:8px; font:700 var(--gi-fs-sm)/1 var(--gi-font-mono); } .gi-trade-controls label:nth-child(2) { position:relative; } .gi-trade-controls label:nth-child(2) span { position:absolute; right:10px; bottom:12px; color:var(--gi-text-faint); } .gi-trade-toolbar { display:flex; flex-wrap:wrap; gap:var(--gi-sp-2); } .gi-trade-legend { margin:var(--gi-sp-3) 0; color:var(--gi-text-faint); font-size:var(--gi-fs-2xs); } .gi-trade-leg { display:grid; grid-template-columns:1.25fr .7fr .65fr 1fr .8fr .8fr 40px; gap:var(--gi-sp-2); align-items:end; padding:var(--gi-sp-3); margin-bottom:var(--gi-sp-2); background:rgba(10,21,26,.82); border:1px solid var(--gi-line); border-radius:10px; } .gi-trade-leg__remove { width:40px; height:42px; border:1px solid rgba(255,103,96,.34); border-radius:8px; background:rgba(255,103,96,.08); color:#ff8c85; font-size:24px; cursor:pointer; } .gi-trade-run { width:100%; margin:var(--gi-sp-3) 0 var(--gi-sp-5); } .gi-trade-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gi-sp-2); } .gi-trade-metric,.gi-trade-goals>div { padding:var(--gi-sp-3); background:rgba(17,34,39,.82); border:1px solid var(--gi-line); border-radius:10px; } .gi-trade-metric span,.gi-trade-goals span { display:block; color:var(--gi-text-dim); font-size:var(--gi-fs-2xs); } .gi-trade-metric strong,.gi-trade-goals strong { display:block; margin-top:5px; color:var(--gi-accent); font:800 var(--gi-fs-xl)/1.2 var(--gi-font-mono); } .gi-trade-goals { display:grid; grid-template-columns:1fr 1fr; gap:var(--gi-sp-3); margin-top:var(--gi-sp-3); } .gi-trade-goals small { display:block; margin-top:7px; color:var(--gi-text-faint); line-height:1.45; } #trade-lab-results .gi-table-wrap { max-height:340px; } @media (max-width:850px) { .gi-trade-leg { grid-template-columns:repeat(3,1fr); } .gi-trade-leg__remove { grid-column:3; justify-self:end; } .gi-trade-metrics { grid-template-columns:1fr 1fr; } } @media (max-width:620px) { .gi-trade-dialog { width:calc(100vw - 12px); max-height:calc(100vh - 12px); padding:58px 14px 20px; } .gi-trade-launch { align-items:flex-start; flex-direction:column; } .gi-trade-controls,.gi-trade-leg,.gi-trade-goals { grid-template-columns:1fr; } .gi-trade-leg__remove { grid-column:1; justify-self:stretch; width:100%; } } /* ========================= reduced motion ============================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .gi-spinner { border-top-color: var(--gi-accent); animation: none; } } /* Compact exchange ticket: closed quotes stay small; one tapped line expands inline. */ .gi-free-play__quote-button{display:flex;align-items:center;gap:8px;border:1px solid var(--gi-line);border-radius:6px;padding:7px 9px;background:rgba(255,255,255,.025);color:var(--gi-text);font:700 var(--gi-fs-3xs)/1 var(--gi-font-mono);cursor:pointer}.gi-free-play__quote-button:hover,.gi-free-play__quote-button:focus-visible{border-color:var(--gi-accent);background:rgba(255,103,52,.09)}.gi-free-play__quote-button b{color:var(--gi-good)} .gi-order-ticket{grid-column:1/-1;margin-top:8px;padding:12px;border:1px solid rgba(255,103,52,.45);border-radius:9px;background:linear-gradient(150deg,rgba(15,24,28,.99),rgba(6,12,15,.99));box-shadow:0 18px 40px rgba(0,0,0,.34)}.gi-order-ticket h4{margin:5px 0 10px;font-size:var(--gi-fs-sm)}.gi-order-ticket__venues{display:flex;gap:7px;overflow-x:auto;padding:2px 0 9px}.gi-order-ticket__venue{min-width:126px;display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--gi-line);border-radius:7px;background:rgba(255,255,255,.025);color:var(--gi-text-dim);padding:8px;cursor:pointer}.gi-order-ticket__venue span{font:750 var(--gi-fs-3xs)/1 var(--gi-font-cond);text-transform:uppercase}.gi-order-ticket__venue i{font-style:normal;color:var(--gi-good);font-size:.65rem}.gi-order-ticket__venue b{font-family:var(--gi-font-mono)}.gi-order-ticket__venue.is-active{border-color:var(--gi-accent);color:var(--gi-text);background:rgba(255,103,52,.10)}.gi-order-ticket__venue--arb{border-color:rgba(44,224,142,.58);color:var(--gi-good)}.gi-order-ticket__types{display:flex;gap:5px;margin-bottom:10px}.gi-order-ticket__types button{flex:1;border:1px solid var(--gi-line);background:transparent;color:var(--gi-text-mute);padding:8px;cursor:pointer}.gi-order-ticket__types button.is-active{border-color:var(--gi-accent);background:rgba(255,103,52,.11);color:var(--gi-text)}.gi-order-ticket__form{display:grid;grid-template-columns:minmax(145px,1fr) minmax(145px,1fr) minmax(170px,1.1fr);gap:9px;align-items:end}.gi-order-stepper>.gi-label{display:block;margin-bottom:5px}.gi-order-stepper__controls{display:grid;grid-template-columns:34px minmax(70px,1fr) 34px}.gi-order-stepper__controls button{border:1px solid var(--gi-line);background:var(--gi-surface);color:var(--gi-text);cursor:pointer}.gi-order-stepper__controls input{border-radius:0;text-align:center}.gi-order-ticket__economics{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;padding:8px;border:1px solid var(--gi-line);color:var(--gi-text-mute);font-size:var(--gi-fs-2xs)}.gi-order-ticket__economics b{color:var(--gi-text);font-family:var(--gi-font-mono)}.gi-order-ticket__result{grid-column:1/-1;display:grid;gap:5px;margin-top:9px;color:var(--gi-text-dim);font-size:var(--gi-fs-xs)}.gi-order-ticket__result strong{color:var(--gi-text)} @media(max-width:600px){.gi-order-ticket__form{grid-template-columns:1fr 1fr}.gi-order-ticket__form>.gi-field{grid-column:1/-1}.gi-order-ticket__venues{margin-right:-8px}.gi-order-ticket{padding:10px}.gi-order-ticket__economics{gap:8px}} .gi-nfl-overview-score{margin:10px 0 6px;color:var(--gi-good);font:850 var(--gi-fs-md)/1.1 var(--gi-font-mono);letter-spacing:.02em} .gi-market-card-toggle,.gi-replay-market__top.gi-market-card-toggle{cursor:pointer;user-select:none;transition:color .16s ease,background .16s ease}.gi-market-card-toggle:hover{color:var(--gi-accent)}.gi-market-card-toggle:focus-visible{outline:2px solid var(--gi-accent);outline-offset:4px}.gi-market-card-toggle::after{content:"⌃";flex:0 0 auto;color:var(--gi-text-mute);font:800 .85rem/1 var(--gi-font-mono);transition:transform .16s ease}.gi-market-card.is-collapsed>.gi-market-card-toggle::after,.gi-replay-market.is-collapsed>.gi-market-card-toggle::after{transform:rotate(180deg)}.gi-market-card.is-collapsed>:not(.gi-market-card-toggle),.gi-replay-market.is-collapsed>:not(.gi-market-card-toggle){display:none!important}.gi-order-ticket__result.is-success{border:1px solid rgba(44,224,142,.55);border-radius:8px;background:rgba(44,224,142,.09);padding:10px}.gi-order-ticket__result.is-error{border:1px solid rgba(255,96,96,.5);border-radius:8px;background:rgba(255,96,96,.08);padding:10px}.gi-order-success{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}.gi-order-success b{color:var(--gi-good);font:850 var(--gi-fs-xs)/1.2 var(--gi-font-cond);letter-spacing:.06em}.gi-order-success span{grid-column:1/-1;color:var(--gi-text)}.gi-order-success a{grid-column:2;grid-row:1;color:var(--gi-info);font-weight:800} /* ---- live field: yard numbers + last-play caption ----------------------- Added so a viewer can read field position at a glance and see what just happened without hunting the HUD. Both sit under the ball and the HUD in z-order, so nothing they overlap becomes unreadable. */ .gi-live-field__yard{position:absolute;top:50%;transform:translate(-50%,-50%); z-index:0;color:rgba(226,248,238,.24); font:900 30px/1 var(--gi-font-cond);letter-spacing:.02em; text-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none;user-select:none} .gi-live-field__play{position:absolute;left:50%;bottom:14px; transform:translateX(-50%);z-index:4;max-width:min(78%,620px); padding:7px 14px;border-radius:8px;text-align:center; border:1px solid rgba(255,255,255,.16);background:rgba(2,10,13,.8); backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.35)} .gi-live-field__play span{display:block; color:rgba(235,249,243,.6);font:900 8.5px/1 var(--gi-font-mono); letter-spacing:.18em} .gi-live-field__play strong{display:block;margin-top:4px;color:#fff; font:700 12.5px/1.35 var(--gi-font-cond); overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} @media(max-width:760px){ .gi-live-field__yard{font-size:20px} .gi-live-field__play{bottom:9px;max-width:90%;padding:5px 10px} .gi-live-field__play strong{font-size:11px} }