/* ============================================================================= MLB PICK'EM — daily YES/NO home-run card (v2, founder 2026-07-27) Design tokens are LOCAL custom properties (--pk-*) declared on the .pb-pickem root: the original demo declared them on :root, which would clobber core/themes.css. No :root declarations may ever appear in this file, and every selector stays scoped under .pb-pickem (or body.pickem-*). Media-query ORDER MATTERS here (2026-07-27 fix): the 1000px block is the mobile SCALE-UP (the app ships no viewport meta, so phones render the ~980px legacy layout), and any small-window DOWNSCALE has to come after it — equal specificity, later wins, and both match below 760px. Order in this file: 1240 → 1000 → 760. ============================================================================= */ /* STICKY ENABLER — core/style.css sets `html,body{overflow-x:hidden}`. When one axis is hidden the other computes to `auto`, so the ROOT becomes a scroll container and position:sticky stops working for every descendant. `clip` suppresses horizontal overflow exactly the same way but does NOT create a scroll container, so sticky survives. Scoped to the Pick'em route via the class the page module sets (mlb/pickem/index.js), so no other page's overflow behaviour changes. */ html.is-pickem, html.is-pickem body { overflow-x: clip; } /* ── Page shell (mirror of arena.css's body.arena-active handling) ── */ body.pickem-active { background: #000; padding-bottom: calc(var(--pb-bottom-nav-height, 64px) + max(env(safe-area-inset-bottom), 12px)); } /* Keep bottom nav visible on pick'em (clone of the dashboard.css pattern) */ body.pickem-active .pb-bottom-nav { display: flex !important; } /* FULL equivalent of the doc-write pre-hide (#pickem-init-styles), so the module can own its shell from mount() alone. The doc-write only ever runs on a DIRECT load of /mlb/pickem — it exists to beat the first paint and avoid a flash of workbench chrome. On an SPA hop INTO Pick'em there is no second document, so nothing injects it and `body.pickem-active` is the only thing standing between the user and a half-hidden workbench. These selectors therefore mirror that block rule for rule; keep the two in sync. .navbar is a SIBLING of .landing-nav — the sport selector stays visible. */ body.pickem-active #cover-page, body.pickem-active .navbar, body.pickem-active .workbench-layout, body.pickem-active .sidebar, body.pickem-active #main-app-wrapper, body.pickem-active #loading-animation { display: none !important; } /* The sport selector is the only shell chrome Pick'em keeps. Pinning it is part of the doc-write block, so it has to be here too — without it an SPA entry scrolls the selector away with the page. */ body.pickem-active .landing-nav { display: block !important; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } body.pickem-active .landing-nav .sport-selector { display: flex !important; } #pickem-root { display: none; /* revealed by the pickem-init-styles doc-write + module */ } body.pickem-active #pickem-root { display: block; min-height: 100vh; } /* ── Design tokens (demo :root → local) ── */ .pb-pickem { --pk-bg: #000; --pk-surface: #0d1420; --pk-surface-2: #111a29; --pk-panel: rgba(255, 255, 255, .045); --pk-panel-2: rgba(255, 255, 255, .07); --pk-border: rgba(148, 163, 184, .16); --pk-border-soft: rgba(148, 163, 184, .10); --pk-text: #E6EDF3; --pk-muted: #8b98a5; --pk-accent: #00D3BD; --pk-accent-dim: rgba(0, 211, 189, .10); --pk-accent-border: rgba(0, 211, 189, .55); --pk-gold: #f5b942; --pk-gold-dim: rgba(245, 185, 66, .12); --pk-purple: #b48af7; --pk-purple-dim: rgba(180, 138, 247, .12); --pk-blue: #6cb2ff; --pk-blue-dim: rgba(108, 178, 255, .12); --pk-red: #ef4444; --pk-red-dim: rgba(239, 68, 68, .12); --pk-r-lg: 16px; --pk-r-md: 14px; background: var(--pk-bg); color: var(--pk-text); font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; min-height: 100vh; display: flex; justify-content: center; } .pb-pickem * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .pb-pickem .app { width: 100%; max-width: 1560px; padding: calc(84px + env(safe-area-inset-top, 0px)) 36px 60px; } /* ── Loading / error / empty ── */ .pb-pickem .pk-loading { display: flex; align-items: center; justify-content: center; min-height: 40vh; font-size: 28px; color: var(--pk-muted); } .pb-pickem .pk-empty { max-width: 560px; margin: 8vh auto 0; text-align: center; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg); padding: 42px 30px; } .pb-pickem .pk-empty .big { font-size: 40px; margin-bottom: 12px; } .pb-pickem .pk-empty .t { font-size: 19px; font-weight: 800; } .pb-pickem .pk-empty .s { font-size: 14px; color: var(--pk-muted); margin-top: 8px; line-height: 1.55; } /* ══════════════ DRAFT ══════════════ */ /* ── Page header: rules banner left + lock countdown right ── */ .pb-pickem .dhdr { display: flex; align-items: stretch; justify-content: space-between; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; } .pb-pickem .dhdr .instr { flex: 1 1 460px; min-width: 0; margin-bottom: 0; } .pb-pickem .dhdr .stat-card { justify-content: center; } .pb-pickem .hdr-title { font-size: 46px; font-weight: 800; letter-spacing: 1px; line-height: 1.05; } .pb-pickem .hdr-title span { color: var(--pk-accent); } .pb-pickem .hdr-sub { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: var(--pk-accent); margin-bottom: 4px; } .pb-pickem .dhdr-right { display: flex; gap: 14px; } .pb-pickem .stat-card { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-md); min-width: 160px; padding: 14px 20px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .pb-pickem .stat-card .val { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; } .pb-pickem .stat-card.lock .val { color: var(--pk-accent); } .pb-pickem .stat-card .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--pk-muted); } /* ── Rules banner ── */ .pb-pickem .instr { display: flex; align-items: center; gap: 20px; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg); padding: 20px 24px; } .pb-pickem .instr-txt { font-size: 15.5px; line-height: 1.6; color: var(--pk-muted); } .pb-pickem .instr-txt .lead { color: var(--pk-accent); font-weight: 800; letter-spacing: .4px; margin-right: 6px; } .pb-pickem .instr-txt b { color: var(--pk-text); } /* ── Running summary (sticky: picks / chips / POTENTIAL + confirm) ── The potential is the hook — it must stay on screen while the user works down ten cards, so the whole bar sticks just under the fixed landing-nav (top matches .app's own top padding). */ .pb-pickem .pk-summary { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 6; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg); padding: 16px 20px 18px; margin-bottom: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); } .pb-pickem .sum-grid { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; } .pb-pickem .sum-cell { min-width: 0; } .pb-pickem .sum-cell.grow { margin-left: auto; text-align: right; } .pb-pickem .sum-cell .n { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pb-pickem .sum-cell .n .of { font-size: 17px; font-weight: 700; color: var(--pk-muted); margin-left: 2px; } .pb-pickem .sum-cell .n.gold { color: var(--pk-gold); } .pb-pickem .sum-cell .n.teal { color: var(--pk-accent); } .pb-pickem .sum-cell .k { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--pk-muted); margin-top: 6px; } .pb-pickem .sum-expr { font-size: 13.5px; color: var(--pk-muted); line-height: 1.5; margin-top: 12px; } .pb-pickem .sum-expr b { color: var(--pk-text); } .pb-pickem .sum-expr.mult b { color: var(--pk-accent); } .pb-pickem .sum-warn { margin-top: 10px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--pk-gold); background: var(--pk-gold-dim); border: 1px solid rgba(245, 185, 66, .35); border-radius: 10px; padding: 8px 12px; } .pb-pickem .sum-err { margin-top: 10px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--pk-red); background: var(--pk-red-dim); border: 1px solid rgba(239, 68, 68, .4); border-radius: 10px; padding: 9px 12px; } .pb-pickem .sum-err[hidden] { display: none; } .pb-pickem .confirm-btn { width: 100%; margin-top: 14px; padding: 15px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 2px; cursor: pointer; background: rgba(255, 255, 255, .04); color: var(--pk-muted); border: 1px solid var(--pk-border); transition: background .15s, color .15s, transform .1s; } .pb-pickem .confirm-btn:disabled { cursor: default; } .pb-pickem .confirm-btn:not(:disabled) { background: var(--pk-accent); color: #00110f; border-color: var(--pk-accent); } .pb-pickem .confirm-btn:not(:disabled):active { transform: scale(.995); } .pb-pickem .sum-cancel { display: block; margin: 10px auto 0; padding: 6px 12px; border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--pk-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .pb-pickem .sum-cancel:hover { color: var(--pk-text); } /* ── Card-list note ── */ .pb-pickem .sel-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .pb-pickem .sel-note { font-size: 14px; color: var(--pk-muted); display: flex; align-items: center; gap: 9px; } .pb-pickem .sel-note .i { width: 20px; height: 20px; border-radius: 50%; background: var(--pk-panel-2); border: 1px solid var(--pk-border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--pk-muted); flex-shrink: 0; } /* ── Hitter grid ── */ /* auto-fill: 3 across on a wide desktop, 2 at ~1100, 1 on the mobile scale-up (see the 1000px block). No grid-auto-rows:1fr — it would force every row to the GLOBAL tallest card. */ .pb-pickem .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; } .pb-pickem .pl-card { text-align: left; background: var(--pk-surface); border: 1.5px solid var(--pk-border); border-radius: 20px; padding: 15px 18px 13px; color: var(--pk-text); position: relative; display: flex; flex-direction: column; font-family: inherit; transition: border-color .15s, background .15s, box-shadow .15s; box-shadow: inset 0 1px 0 rgba(108, 178, 255, .05); } /* Answered-card tints. The card body carries the SAME hue as the button that set it, so a glance down the grid reads which way each call went without having to find the small YES/NO control. Kept low-alpha: on a pure-black page a 10% wash is clearly visible without turning the grid into stripes. Now that the page is #000 rather than #07090c, these read stronger than they did — hence .13 rather than a bigger jump. */ .pb-pickem .pl-card.is-yes { border-color: var(--pk-accent-border); background: linear-gradient(180deg, rgba(0, 211, 189, .13), rgba(0, 211, 189, .04)); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } .pb-pickem .pl-card.is-no { border-color: rgba(224, 90, 90, .45); background: linear-gradient(180deg, rgba(224, 90, 90, .12), rgba(224, 90, 90, .035)); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } .pb-pickem .headshot { width: 80px; height: 80px; border-radius: 50%; background: #101a28; object-fit: cover; border: 1.5px solid rgba(108, 178, 255, .28); flex-shrink: 0; } .pb-pickem .headshot-fb { width: 80px; height: 80px; border-radius: 50%; background: #101a28; color: var(--pk-muted); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; border: 1.5px solid rgba(108, 178, 255, .28); flex-shrink: 0; } .pb-pickem .pl-card .headshot, .pb-pickem .pl-card .headshot-fb { width: 64px; height: 64px; } .pb-pickem .pl-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 9px; } .pb-pickem .pl-id { flex: 1; min-width: 0; padding-top: 2px; } .pb-pickem .pl-id .nm { font-size: 19px; font-weight: 800; line-height: 1.12; } .pb-pickem .pl-id .tm { font-size: 13px; color: var(--pk-muted); margin-top: 3px; } .pb-pickem .pl-pitcher { font-size: 13px; font-weight: 700; color: #dbe4ec; margin-top: 5px; line-height: 1.3; } .pb-pickem .pl-vals { text-align: right; flex-shrink: 0; } .pb-pickem .val-odds { font-size: 21px; font-weight: 800; color: var(--pk-gold); line-height: 1; font-variant-numeric: tabular-nums; } /* What a correct YES is worth — the number the whole game runs on. */ .pb-pickem .val-worth { font-size: 22px; font-weight: 800; color: var(--pk-accent); line-height: 1; margin-top: 5px; font-variant-numeric: tabular-nums; } .pb-pickem .val-worth span { font-size: 13px; letter-spacing: .5px; } .pb-pickem .val-lbl { font-size: 8.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--pk-muted); margin-top: 3px; } /* factor strip */ .pb-pickem .factor-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: auto; background: rgba(255, 255, 255, .028); border: 1px solid var(--pk-border-soft); border-radius: 14px; padding: 10px 0 9px; } .pb-pickem .factor { display: flex; flex-direction: column; align-items: center; gap: 2px; border-left: 1px solid var(--pk-border-soft); } .pb-pickem .factor:first-child { border-left: none; } .pb-pickem .f-ico { color: var(--pk-accent); } .pb-pickem .f-lbl { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: var(--pk-muted); } .pb-pickem .f-val { font-size: 15px; font-weight: 800; color: var(--pk-accent); font-variant-numeric: tabular-nums; } /* Factor tones. Teal = helps, red = hurts, grey = neutral or unknown. The red is deliberately desaturated against --pk-red (#ef4444), which is reserved for the NO pick state and wrong-answer results — a factor being unfavourable is information, not an error, and matching that red would make ten cards look like ten failures. */ .pb-pickem .factor.f-neg .f-ico { color: #c76a6a; opacity: .85; } .pb-pickem .factor.f-neg .f-val { color: #e08a8a; } .pb-pickem .factor.f-na .f-ico { color: var(--pk-muted); opacity: .6; } .pb-pickem .factor.f-na .f-val { color: #9aa7b4; } /* badges row (tier + strongest factor) */ .pb-pickem .pl-foot { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; min-height: 20px; flex-wrap: wrap; } .pb-pickem .pl-badge, .pb-pickem .tier-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; padding: 4px 11px; border: 1px solid; } .pb-pickem .b-teal { color: var(--pk-accent); border-color: var(--pk-accent-border); background: var(--pk-accent-dim); } .pb-pickem .b-purple { color: var(--pk-purple); border-color: rgba(180, 138, 247, .45); background: var(--pk-purple-dim); } .pb-pickem .b-blue { color: var(--pk-blue); border-color: rgba(108, 178, 255, .45); background: var(--pk-blue-dim); } .pb-pickem .b-gray { color: var(--pk-muted); border-color: var(--pk-border); background: var(--pk-panel); } /* tier bands (elite / good / neutral — 'poor'/'bad' are never dealt) */ .pb-pickem .tk-elite { color: var(--pk-gold); border-color: rgba(245, 185, 66, .5); background: var(--pk-gold-dim); } .pb-pickem .tk-good { color: var(--pk-blue); border-color: rgba(108, 178, 255, .45); background: var(--pk-blue-dim); } .pb-pickem .tk-neutral { color: var(--pk-muted); border-color: var(--pk-border); background: var(--pk-panel); } .pb-pickem .ico { display: inline-flex; } .pb-pickem .ico svg { width: 100%; height: 100%; } /* ── YES / NO toggle ── */ .pb-pickem .pk-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; } .pb-pickem .pk-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 8px; border-radius: 12px; cursor: pointer; font-family: inherit; background: rgba(255, 255, 255, .035); border: 1.5px solid var(--pk-border); color: var(--pk-text); transition: background .14s, border-color .14s, color .14s, transform .1s; } .pb-pickem .pk-btn .t { font-size: 14px; font-weight: 800; letter-spacing: 1.6px; } .pb-pickem .pk-btn .v { font-size: 10.5px; font-weight: 700; color: var(--pk-muted); font-variant-numeric: tabular-nums; } .pb-pickem .pk-btn:hover { background: rgba(255, 255, 255, .07); border-color: rgba(148, 163, 184, .34); } .pb-pickem .pk-btn:active { transform: scale(.985); } .pb-pickem .pk-yes.on { background: var(--pk-accent); border-color: var(--pk-accent); color: #00110f; } .pb-pickem .pk-yes.on .v { color: rgba(0, 17, 15, .72); } /* Selected NO. Was #7d8b9c — a light slate that read as plain white and gave the two answers no colour relationship at all. Red is the natural partner to the teal YES, and it is the same language the result screen already speaks (teal = it happened, red = it didn't). Softer than --pk-red (#ef4444): a NO is a legitimate answer, not an error state, so it should not carry the same weight as a wrong-pick marker. */ .pb-pickem .pk-no.on { background: #e05a5a; border-color: #e05a5a; color: #200909; } .pb-pickem .pk-no.on .v { color: rgba(32, 9, 9, .72); } /* ── Locked card foot ───────────────────────────────────────────────────── Replaces the YES/NO toggles once the slate locks. Same height budget as .pk-choice so the grid does not reflow at first pitch. */ .pb-pickem .pk-locked { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--pk-border-soft); min-height: 42px; } .pb-pickem .pk-locked.is-void { opacity: .55; } .pb-pickem .lk-call { font-size: 11px; font-weight: 800; letter-spacing: 1.3px; border-radius: 999px; padding: 4px 11px; border: 1px solid; flex: 0 0 auto; } .pb-pickem .lk-call.y { color: var(--pk-accent); border-color: var(--pk-accent-border); background: var(--pk-accent-dim); } .pb-pickem .lk-call.n { color: #e79a9a; border-color: rgba(224, 90, 90, .40); background: rgba(224, 90, 90, .10); } .pb-pickem .lk-call.none { color: var(--pk-muted); border-color: var(--pk-border-soft); background: none; } .pb-pickem .lk-hr { font-size: 12px; font-weight: 700; color: var(--pk-muted); font-variant-numeric: tabular-nums; } .pb-pickem .lk-hr.on { color: var(--pk-accent); } /* Right-aligned outcome. margin-left:auto rather than a spacer so the row still reads left-to-right when the HR count is absent. */ .pb-pickem .lk-pts, .pb-pickem .lk-pend, .pb-pickem .lk-void { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: .6px; font-variant-numeric: tabular-nums; } .pb-pickem .lk-pts.good { color: var(--pk-accent); font-size: 15px; } .pb-pickem .lk-pts.bad { color: #e08a8a; font-size: 15px; } .pb-pickem .lk-pend { color: var(--pk-muted); font-size: 10.5px; letter-spacing: 1.2px; } .pb-pickem .lk-void { color: var(--pk-muted); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; } /* ══════════════ Screens ══════════════ */ .pb-pickem .screen { display: none; } .pb-pickem .screen.on { display: block; animation: pk-fadein .25s ease; } @keyframes pk-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } } .pb-pickem .pk-narrow { max-width: 760px; margin: 0 auto; padding-bottom: 30px; } .pb-pickem .hdr { display: flex; align-items: center; justify-content: space-between; } .pb-pickem .hdr-date-sm { font-size: 12px; color: var(--pk-muted); margin-top: 2px; } .pb-pickem .cta { width: 100%; background: var(--pk-accent); color: #00110f; font-family: inherit; font-size: 15px; font-weight: 800; border: none; border-radius: 13px; padding: 15px; cursor: pointer; letter-spacing: .3px; transition: opacity .15s, transform .1s; } .pb-pickem .cta:disabled { opacity: .25; cursor: default; } .pb-pickem .cta:not(:disabled):active { transform: scale(.985); } .pb-pickem .cta.ghost { background: var(--pk-panel-2); color: var(--pk-text); border: 1px solid var(--pk-border); } .pb-pickem .pk-back { display: inline-block; margin-bottom: 14px; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--pk-border); color: var(--pk-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s; } .pb-pickem .pk-back:hover { color: var(--pk-text); border-color: rgba(148, 163, 184, .32); } /* ══════════════ LOCKED — your ten, live ══════════════ */ .pb-pickem .lb-hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .pb-pickem .lb-hdr-main { min-width: 0; } .pb-pickem .lb-hdr .hdr-title { font-size: 38px; } .pb-pickem .lb-sub { font-size: 15px; color: var(--pk-muted); margin-top: 7px; } .pb-pickem .lb-panel { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg); padding: 20px 22px; margin-bottom: 18px; } .pb-pickem .lb-panel-title { font-size: 12.5px; font-weight: 800; letter-spacing: 2px; color: var(--pk-accent); margin-bottom: 14px; } /* running score */ .pb-pickem .pk-live { text-align: center; padding: 4px 0 2px; } .pb-pickem .pk-live-score .n { font-size: 66px; font-weight: 800; line-height: 1; color: var(--pk-accent); font-variant-numeric: tabular-nums; } .pb-pickem .pk-live-score .n.mut { color: var(--pk-muted); } .pb-pickem .pk-live-score .k { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; color: var(--pk-muted); margin-top: 10px; } .pb-pickem .pk-live-note { font-size: 13.5px; color: var(--pk-muted); line-height: 1.55; margin-top: 14px; } .pb-pickem .pk-live-note b { color: var(--pk-text); } /* per-slot rows (locked + result) */ .pb-pickem .pk-rows { display: block; } .pb-pickem .pk-row { display: grid; grid-template-columns: 56px 52px minmax(0, 1fr) 46px 64px; align-items: center; gap: 12px; padding: 11px 0; } .pb-pickem .pk-row + .pk-row { border-top: 1px solid var(--pk-border-soft); } .pb-pickem .pk-row .lb-hs { width: 52px; height: 52px; font-size: 17px; } .pb-pickem .pk-row.unpicked { opacity: .55; } .pb-pickem .pk-row.dead { opacity: .4; } .pb-pickem .pk-row.dead .nm { text-decoration: line-through; } .pb-pickem .pk-row-id { min-width: 0; } .pb-pickem .pk-row-id .nm { font-size: 16px; font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: 8px; } .pb-pickem .pk-row-id .sub { font-size: 12.5px; color: var(--pk-muted); margin-top: 3px; } .pb-pickem .pk-row-hr { text-align: center; font-variant-numeric: tabular-nums; } .pb-pickem .pk-row-hr b { display: block; font-size: 19px; font-weight: 800; color: var(--pk-muted); line-height: 1; } .pb-pickem .pk-row-hr span { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: var(--pk-muted); } .pb-pickem .pk-row-hr.hot b { color: var(--pk-gold); } .pb-pickem .pk-row-val { text-align: right; font-size: 19px; font-weight: 800; color: var(--pk-muted); font-variant-numeric: tabular-nums; } .pb-pickem .pk-row-val.good { color: var(--pk-accent); } .pb-pickem .pk-row-val.bad { color: var(--pk-red); } .pb-pickem .pk-row-val.wait { color: var(--pk-muted); opacity: .6; } .pb-pickem .pk-row-val.void, .pb-pickem .pk-row-val.skip { font-size: 11px; letter-spacing: 1.2px; } .pb-pickem .pk-rows-note { font-size: 12px; color: var(--pk-muted); line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pk-border-soft); } /* your call chip */ .pb-pickem .pk-chip { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; line-height: 1; border-radius: 999px; padding: 7px 0; width: 100%; border: 1px solid; } .pb-pickem .pk-chip.y { color: var(--pk-accent); border-color: var(--pk-accent-border); background: var(--pk-accent-dim); } /* Matches the red NO button on the draft screen — the same call must not be slate here and red there. */ .pb-pickem .pk-chip.n { color: #e79a9a; border-color: rgba(224, 90, 90, .40); background: rgba(224, 90, 90, .10); } .pb-pickem .pk-chip.none { color: var(--pk-muted); border-color: var(--pk-border-soft); background: none; } /* live status dot + tag */ .pb-pickem .lb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, .4); flex-shrink: 0; } .pb-pickem .lb-dot.on { background: var(--pk-accent); box-shadow: 0 0 6px rgba(0, 211, 189, .6); } .pb-pickem .lb-dot.live { background: var(--pk-accent); animation: pk-live-pulse 1.6s ease-in-out infinite; } @keyframes pk-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 211, 189, .55); } 50% { box-shadow: 0 0 0 5px rgba(0, 211, 189, 0); } } .pb-pickem .lb-status-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--pk-gold); background: var(--pk-gold-dim); border: 1px solid rgba(245, 185, 66, .35); } /* action row */ .pb-pickem .lb-actions { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .pb-pickem .lb-actions .cta { width: auto; flex: 0 1 auto; padding: 14px 28px; font-size: 14px; border-radius: 12px; } /* ── Notices ── */ /* Block, not flex: these notes are SENTENCES with inline — a flex container turns each bold run into its own item and gaps the sentence apart ("1 hitter was scratched — those slots…"). */ .pb-pickem .lock-note { text-align: center; background: var(--pk-panel); border: 1px solid var(--pk-border); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; font-size: 12.5px; color: var(--pk-muted); line-height: 1.55; } .pb-pickem .lock-note b { color: var(--pk-text); } .pb-pickem .changed-note { background: rgba(180, 138, 247, .1); border: 1px solid rgba(180, 138, 247, .4); color: var(--pk-purple); border-radius: 11px; padding: 10px 13px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; } .pb-pickem .prov-badge { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--pk-blue); background: var(--pk-blue-dim); border: 1px solid rgba(108, 178, 255, .45); border-radius: 999px; padding: 6px 13px; } /* ══════════════ RESULT ══════════════ */ .pb-pickem .res-hero { text-align: center; padding: 26px 16px 22px; margin: 16px 0 14px; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-r-lg); } .pb-pickem .res-score { display: flex; align-items: baseline; justify-content: center; gap: 10px; } .pb-pickem .res-score .n { font-size: 72px; font-weight: 800; line-height: 1; color: var(--pk-accent); font-variant-numeric: tabular-nums; } .pb-pickem .res-score .n.mut { color: var(--pk-muted); } .pb-pickem .res-score .of { font-size: 32px; font-weight: 800; color: var(--pk-muted); font-variant-numeric: tabular-nums; } .pb-pickem .res-big { font-size: 34px; font-weight: 800; letter-spacing: .5px; color: var(--pk-muted); } .pb-pickem .res-k { font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; color: var(--pk-muted); margin-top: 12px; } .pb-pickem .res-sub { font-size: 12.5px; color: var(--pk-muted); margin-top: 8px; line-height: 1.5; } .pb-pickem .res-chips { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: var(--pk-gold-dim); border: 1px solid rgba(245, 185, 66, .35); color: var(--pk-gold); border-radius: 11px; padding: 10px 15px; font-size: 13px; font-weight: 800; } .pb-pickem .res-chips .spent { color: var(--pk-muted); font-weight: 700; } .pb-pickem .res-hero.void .res-big { color: var(--pk-gold); } /* the multiplier beat */ .pb-pickem .mult-note { border-radius: 13px; padding: 14px 16px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.55; font-weight: 600; } .pb-pickem .mult-note b { font-weight: 800; } .pb-pickem .mult-note.fired { color: var(--pk-accent); background: var(--pk-accent-dim); border: 1px solid var(--pk-accent-border); } .pb-pickem .mult-note.broke { color: var(--pk-gold); background: var(--pk-gold-dim); border: 1px solid rgba(245, 185, 66, .38); } .pb-pickem .mult-note.none { color: var(--pk-muted); background: var(--pk-panel); border: 1px solid var(--pk-border); } /* ── YOUR RECENT CARDS (history — shared by locked/result/no-card hosts) ── */ .pb-pickem .pk-history { margin-top: 20px; } .pb-pickem .lb-recent-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pb-pickem .lb-recent-title { font-size: 12.5px; font-weight: 800; letter-spacing: 2px; color: var(--pk-accent); } .pb-pickem .lb-viewall { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--pk-muted); background: none; border: 1px solid var(--pk-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color .15s, border-color .15s; } .pb-pickem .lb-viewall:hover { color: var(--pk-text); border-color: rgba(148, 163, 184, .3); } /* auto-fill (not -fit): a lone card keeps its ~1-of-3 track instead of stretching full-width; the expanded 10 simply wrap. */ .pb-pickem .lb-recent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .pb-pickem .lb-rcard { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 14px; padding: 14px 16px; text-align: left; font-family: inherit; color: var(--pk-text); cursor: pointer; display: block; transition: border-color .15s, background .15s; } .pb-pickem .lb-rcard:hover { background: var(--pk-surface-2); border-color: rgba(148, 163, 184, .32); } .pb-pickem .lb-rcard .d { font-size: 11px; color: var(--pk-muted); } .pb-pickem .lb-rcard .r { font-size: 18px; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; } .pb-pickem .lb-rcard .r.w { color: var(--pk-accent); } .pb-pickem .lb-rcard .r.l { color: var(--pk-muted); } .pb-pickem .lb-rcard .r.p { color: var(--pk-gold); } .pb-pickem .lb-rcard .tb { font-size: 11.5px; color: var(--pk-muted); margin-top: 4px; } .pb-pickem .lb-rcard .chips { font-size: 12px; font-weight: 800; color: var(--pk-gold); margin-top: 6px; } .pb-pickem .lb-recent-empty { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 14px; padding: 18px 20px; font-size: 13px; color: var(--pk-muted); line-height: 1.5; } /* ── Logged-out promo (guest view once the card is locked) ── */ .pb-pickem #pk-promo .lb-hdr { justify-content: center; text-align: center; margin-bottom: 18px; } .pb-pickem #pk-promo .lb-hdr-main { max-width: 560px; } .pb-pickem .lb-steps { display: flex; gap: 12px; position: relative; } /* connector spans center-to-center of the outer step circles (1/6 in from each edge for 3 across); the opaque z-index:1 circles cover it at the ends. */ .pb-pickem .lb-steps::before { content: ''; position: absolute; top: 14px; left: 16.66%; right: 16.66%; height: 2px; background: var(--pk-border-soft); } .pb-pickem .lb-step { flex: 1; min-width: 0; position: relative; text-align: center; } .pb-pickem .lb-step .c { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--pk-surface); border: 1px solid var(--pk-border); color: var(--pk-muted); position: relative; z-index: 1; /* surface bg sits on the connecting line */ } .pb-pickem .lb-step .t { font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--pk-text); } .pb-pickem .lb-step .s { font-size: 11px; color: var(--pk-muted); margin-top: 3px; line-height: 1.35; } .pb-pickem .pk-promo-teaser { margin-top: 14px; } .pb-pickem .pk-promo-trio { display: flex; justify-content: center; gap: 28px; margin-bottom: 14px; flex-wrap: wrap; } .pb-pickem .pk-promo-plr { display: flex; flex-direction: column; align-items: center; text-align: center; width: 92px; } .pb-pickem .pk-promo-hs { width: 56px; height: 56px; font-size: 18px; margin-bottom: 9px; } .pb-pickem .pk-promo-nm { font-size: 12.5px; font-weight: 700; line-height: 1.22; } .pb-pickem .pk-promo-nm .fn, .pb-pickem .pk-promo-nm .ln { display: block; } .pb-pickem .pk-promo-odds { font-size: 11px; font-weight: 700; color: var(--pk-gold); margin-top: 5px; font-variant-numeric: tabular-nums; } .pb-pickem .pk-promo-hint { text-align: center; font-size: 11.5px; color: var(--pk-muted); line-height: 1.45; } .pb-pickem .pk-promo-cta { margin-top: 22px; } .pb-pickem .pk-promo-cta .cta { max-width: 420px; margin: 0 auto; display: block; } .pb-pickem .pk-promo-note { text-align: center; font-size: 12px; color: var(--pk-muted); line-height: 1.5; margin: 12px auto 0; max-width: 460px; } /* ── Toast ── */ .pb-pickem-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .85); color: #E6EDF3; padding: 16px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .2s; font-family: Inter, system-ui, sans-serif; } /* ══════════════ Responsive — ordered widest → narrowest ══════════════ */ /* Login nudge — the CTA a guest is scrolled to when they tap a hitter. */ .pb-pickem .confirm-btn.pk-nudge { animation: pk-nudge 2.4s cubic-bezier(.4, 0, .2, 1); } @keyframes pk-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 211, 189, 0); transform: scale(1); } 8% { box-shadow: 0 0 0 10px rgba(0, 211, 189, .34); transform: scale(1.035); } 20% { box-shadow: 0 0 0 0 rgba(0, 211, 189, 0); transform: scale(1); } 34% { box-shadow: 0 0 0 10px rgba(0, 211, 189, .30); transform: scale(1.03); } 48% { box-shadow: 0 0 0 0 rgba(0, 211, 189, 0); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pb-pickem .confirm-btn.pk-nudge { animation: none; outline: 3px solid var(--pk-accent); outline-offset: 3px; } } /* ── Mobile bar (hidden above 1000px) ────────────────────────────────────── Rendered always, shown only by the 1000px block. Keeping it in the DOM at every width means no resize listener and no grid rebuild on rotation. */ .pb-pickem .pk-mbar, .pb-pickem .pk-mstats, .pb-pickem .pk-mscoring { display: none; } /* The hook line as the scoring card's footer — separated from the four rules it works through. `hidden` wins over the display below (attribute selector beats the bare class only because it comes after; keep the order). */ .pb-pickem .rail-scoring .pk-expr-slot, .pb-pickem .pk-mscoring .pk-expr-slot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--pk-border-soft); } .pb-pickem .pk-expr-slot[hidden] { display: none; } /* ───────────────────────────────────────────────────────────────────────── ORDER NOTE (2026-07-27): these v2 base rules were originally APPENDED to the end of the file, i.e. AFTER all three @media blocks. At equal specificity the later rule wins, so the two-column .pk-layout / .grid and the sticky .pk-rail beat every responsive override at EVERY width — the page rendered its desktop layout on phones and no media query did anything. Base rules must stay ABOVE the queries; the queries stay in 1240 → 1000 → 760 order below. ───────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ DRAFT LAYOUT v2 (2026-07-27) — two columns + sticky action bar. Main column holds the header, the filter tabs and the 2-up card grid; the right rail carries scoring rules, the live projection and the last card. The action bar is fixed to the bottom and sits ABOVE the app's bottom nav (--pb-bottom-nav-height), which is why body.pickem-active also pads the page by that much again — the two stack. ══════════════════════════════════════════════════════════════════════════ */ .pb-pickem .pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; /* The bottom nav is cleared by body.pickem-active's padding. */ padding-bottom: 24px; } .pb-pickem .pk-main { min-width: 0; } /* ── Header ── */ .pb-pickem .pk-hd { margin-bottom: 20px; } .pb-pickem .pk-h1 { font-size: 30px; font-weight: 800; letter-spacing: .2px; margin: 0 0 10px; color: var(--pk-text); line-height: 1.15; } /* No max-width: the explainer stretches the full main column. It sat at 78ch for readability, but the column is already bounded by the right rail and the copy is now short enough to run two lines rather than three. */ .pb-pickem .pk-hd-explain { font-size: 13.5px; line-height: 1.6; color: var(--pk-muted); margin: 0; } .pb-pickem .pk-hd-explain b { color: var(--pk-text); font-weight: 700; } .pb-pickem .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-pickem .pl-card[hidden] { display: none; } /* ── Right rail ── */ .pb-pickem .pk-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); /* Never let a tall rail trap its own content — scroll it, not the page. */ max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: thin; } /* Lock countdown — first card in the rail. */ .pb-pickem .rail-lock { display: flex; align-items: center; gap: 11px; padding: 13px 16px; } .pb-pickem .rail-lock .rl-ico { color: var(--pk-muted); display: inline-flex; flex: 0 0 auto; } .pb-pickem .rail-lock .rl-t { font-size: 15px; font-weight: 700; color: var(--pk-text); line-height: 1.25; } .pb-pickem .rail-lock .rl-t b { color: var(--pk-accent); font-variant-numeric: tabular-nums; } .pb-pickem .rail-lock .rl-s { font-size: 12px; color: var(--pk-muted); margin-top: 3px; } /* Picks-made, inside the Live Score Preview under the ring. */ .pb-pickem .pk-count { text-align: center; margin-bottom: 12px; } .pb-pickem .pk-count .n { font-size: 14px; color: var(--pk-text); font-weight: 600; } .pb-pickem .pk-count .n b { color: var(--pk-accent); font-size: 18px; font-variant-numeric: tabular-nums; } .pb-pickem .pk-count .s { font-size: 11.5px; color: var(--pk-muted); margin-top: 3px; line-height: 1.35; } /* Guest CTA. Its own rail card so no other panel's display rule can hide it — the login prompt is the one thing a logged-out visitor must always be able to reach. */ .pb-pickem .rail-login { text-align: center; } .pb-pickem .rail-login .rl-copy { font-size: 13px; color: var(--pk-muted); line-height: 1.5; margin-bottom: 4px; } .pb-pickem .rail-cta { margin-top: 12px; width: 100%; } .pb-pickem .rail-card { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 14px; padding: 16px; } /* Small print inside a rail card. The How-Scoring paragraph that used this is gone; the "no settled card yet" empty state still needs it. */ .pb-pickem .score-note { font-size: 12px; line-height: 1.55; color: var(--pk-muted); margin: 0; } .pb-pickem .score-note.dim { opacity: .78; } .pb-pickem .score-note b { color: var(--pk-text); } .pb-pickem .rail-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 12px; color: var(--pk-text); } /* Scoring rules */ .pb-pickem .score-rules { list-style: none; margin: 0 0 12px; padding: 0; } .pb-pickem .score-rules li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; color: var(--pk-text); } .pb-pickem .score-rules li + li { border-top: 1px solid var(--pk-border-soft); } .pb-pickem .score-rules .ic { display: inline-flex; flex: 0 0 auto; } .pb-pickem .score-rules .ic.ok { color: var(--pk-accent); } .pb-pickem .score-rules .ic.bad { color: var(--pk-red); } .pb-pickem .score-rules .ic.star { color: var(--pk-gold); } .pb-pickem .score-rules .lb { flex: 1 1 auto; font-weight: 600; } .pb-pickem .score-rules .lb.gold { color: var(--pk-gold); } .pb-pickem .score-rules .vl { flex: 0 0 auto; font-size: 12px; color: var(--pk-muted); text-align: right; font-variant-numeric: tabular-nums; } /* Live score ring */ .pb-pickem .pk-ring-wrap { position: relative; width: 150px; margin: 2px auto 6px; } .pb-pickem .pk-ring { width: 150px; height: 150px; transform: rotate(-90deg); display: block; } .pb-pickem .pk-ring-bg { fill: none; stroke: var(--pk-border); stroke-width: 8; } .pb-pickem .pk-ring-fg { fill: none; stroke: var(--pk-accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .35s ease; } .pb-pickem .pk-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .pb-pickem .pk-ring-mid .k { font-size: 10px; color: var(--pk-muted); font-weight: 700; } .pb-pickem .pk-ring-mid .n { font-size: 34px; font-weight: 800; color: var(--pk-text); line-height: 1.05; font-variant-numeric: tabular-nums; } .pb-pickem .pk-ring-mid .u { font-size: 11px; color: var(--pk-muted); } .pb-pickem .pk-ring-sub { text-align: center; font-size: 12px; color: var(--pk-muted); margin-bottom: 10px; } .pb-pickem .pk-chipline { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--pk-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pk-border-soft); } .pb-pickem .pk-chipline .held { color: var(--pk-gold); font-weight: 700; } /* Last card */ .pb-pickem .yr-grid { display: flex; align-items: center; gap: 14px; } .pb-pickem .yr-big { text-align: center; flex: 0 0 auto; } .pb-pickem .yr-big .n { font-size: 34px; font-weight: 800; color: var(--pk-text); line-height: 1; font-variant-numeric: tabular-nums; } .pb-pickem .yr-big .k { font-size: 10px; color: var(--pk-muted); font-weight: 700; } .pb-pickem .yr-side { flex: 1 1 auto; border-left: 1px solid var(--pk-border-soft); padding-left: 14px; } .pb-pickem .yr-row { font-size: 12px; color: var(--pk-muted); line-height: 1.5; } .pb-pickem .yr-row b { color: var(--pk-text); font-size: 14px; margin-right: 5px; } .pb-pickem .rail-link { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--pk-accent); font: inherit; font-size: 13px; font-weight: 700; padding: 10px 0 0; width: 100%; text-align: center; } .pb-pickem .rail-link:hover { text-decoration: underline; } /* ── Responsive ── */ @media (max-width: 1240px) { /* ── draft layout v2 ── */ .pb-pickem .pk-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; } .pb-pickem .grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px) { /* ── Mobile scale-up ────────────────────────────────────────────────────── The app ships NO viewport meta, so mobile renders the ~980px legacy layout scaled DOWN by the phone; every other page compensates with big fonts (the landing-nav uses 20-24px, chat 46px on mobile). This page is built desktop-first with small px fonts, so it would render tiny. Scale everything ~1.8x to the app's mobile convention, and fix the top padding so the content clears the fixed landing-nav (~90px). */ /* top offset + page gutters */ .pb-pickem .app { padding: calc(108px + env(safe-area-inset-top, 0px)) 20px 56px; } /* header */ .pb-pickem .hdr-title { font-size: 60px; } .pb-pickem .hdr-sub { font-size: 20px; } /* loading / empty */ .pb-pickem .pk-loading { font-size: 40px; } .pb-pickem .pk-empty { padding: 52px 34px; } .pb-pickem .pk-empty .big { font-size: 60px; } .pb-pickem .pk-empty .t { font-size: 30px; } .pb-pickem .pk-empty .s { font-size: 22px; } /* summary bar */ .pb-pickem .sum-expr { font-size: 21px; } .pb-pickem .sum-warn, .pb-pickem .sum-err { font-size: 20px; padding: 13px 16px; } .pb-pickem .confirm-btn { font-size: 22px; padding: 22px; } /* card list */ .pb-pickem .grid { grid-template-columns: 1fr; } .pb-pickem .pl-card { padding: 22px 24px 24px; } .pb-pickem .pl-card .headshot, .pb-pickem .pl-card .headshot-fb { width: 106px; height: 106px; font-size: 36px; } .pb-pickem .pl-id .nm { font-size: 30px; } .pb-pickem .pl-id .tm { font-size: 19px; } .pb-pickem .pl-pitcher { font-size: 20px; } .pb-pickem .val-odds { font-size: 36px; } .pb-pickem .val-worth { font-size: 40px; } .pb-pickem .val-worth span { font-size: 19px; } .pb-pickem .val-lbl { font-size: 14px; } .pb-pickem .f-lbl { font-size: 14px; } .pb-pickem .f-val { font-size: 24px; } .pb-pickem .pl-badge, .pb-pickem .tier-badge { font-size: 16px; padding: 7px 16px; } .pb-pickem .pk-btn { padding: 18px 10px; border-radius: 16px; } .pb-pickem .pk-btn .t { font-size: 26px; } .pb-pickem .pk-btn .v { font-size: 17px; } /* generic CTA + back */ .pb-pickem .cta { font-size: 21px; padding: 20px; } /* locked */ .pb-pickem .lb-hdr .hdr-title { font-size: 60px; } .pb-pickem .lb-panel { padding: 24px 22px; } .pb-pickem .lb-panel-title { font-size: 18px; } .pb-pickem .pk-row { grid-template-columns: 84px 74px minmax(0, 1fr) 62px 92px; gap: 16px; padding: 16px 0; } .pb-pickem .pk-row .lb-hs { width: 74px; height: 74px; font-size: 25px; } .pb-pickem .pk-row-id .nm { font-size: 24px; } .pb-pickem .pk-row-id .sub { font-size: 18px; } .pb-pickem .pk-row-hr b { font-size: 27px; } .pb-pickem .pk-row-hr span { font-size: 14px; } .pb-pickem .pk-row-val { font-size: 27px; } .pb-pickem .pk-row-val.void, .pb-pickem .pk-row-val.skip { font-size: 16px; } .pb-pickem .pk-chip { font-size: 16px; padding: 10px 0; } /* notices */ .pb-pickem .changed-note { font-size: 21px; padding: 15px 18px; } .pb-pickem .prov-badge { font-size: 18px; padding: 9px 18px; } /* result */ .pb-pickem .hdr-date-sm { font-size: 21px; } .pb-pickem .res-score .n { font-size: 116px; } .pb-pickem .res-score .of { font-size: 52px; } .pb-pickem .res-k { font-size: 17px; } .pb-pickem .res-sub { font-size: 20px; } .pb-pickem .res-chips { font-size: 22px; padding: 15px 22px; } .pb-pickem .mult-note { font-size: 21px; padding: 20px 22px; } /* history */ .pb-pickem .lb-recent-title { font-size: 18px; } .pb-pickem .lb-rcard .d { font-size: 16px; } .pb-pickem .lb-rcard .r { font-size: 25px; } .pb-pickem .lb-rcard .tb { font-size: 16px; } .pb-pickem .lb-rcard .chips { font-size: 17px; } /* logged-out promo */ .pb-pickem #pk-promo .lb-hdr { margin-top: 64px; } .pb-pickem #pk-promo .lb-hdr-main { max-width: none; } .pb-pickem .lb-step .c { width: 40px; height: 40px; font-size: 18px; } .pb-pickem .lb-step .t { font-size: 17px; } .pb-pickem .lb-step .s { font-size: 16px; } .pb-pickem .pk-promo-trio { gap: 26px; margin-bottom: 20px; } .pb-pickem .pk-promo-plr { width: 130px; } .pb-pickem .pk-promo-hs { width: 88px; height: 88px; font-size: 28px; margin-bottom: 13px; } .pb-pickem .pk-promo-nm { font-size: 20px; } .pb-pickem .pk-promo-odds { font-size: 17px; } .pb-pickem .pk-promo-hint { font-size: 19px; } /* button hugs its content (not full width) */ .pb-pickem .pk-promo-cta { text-align: center; } .pb-pickem .pk-promo-cta .cta { display: inline-block; width: auto; max-width: none; padding: 20px 64px; } .pb-pickem .pk-promo-note { font-size: 20px; max-width: none; } /* ── draft layout v2 ── */ /* Rail drops under the cards; nothing sticks on a small screen. */ .pb-pickem .pk-layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; } .pb-pickem .pk-rail { position: static; max-height: none; overflow: visible; } /* Single column here, so the CTA goes full width and Cancel sits under it — the inline row only makes sense beside a fixed-width button. */ /* ── v2 layout at mobile scale (2026-07-27) ────────────────────────── The app ships NO viewport meta, so a phone renders this page at the ~980px legacy width and everything above is scaled UP ~1.66x to stay legible. The v2 header, rail and locked rows were added after that block was written, so they were still painting at desktop sizes next to 1.66x cards — that mismatch WAS the broken layout. Same factor applied here; if you add a rail component, it needs a rule here too. */ /* single column, rail below the cards */ .pb-pickem .pk-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; } .pb-pickem .pk-rail { position: static; max-height: none; overflow: visible; gap: 22px; } /* header */ .pb-pickem .pk-hd { margin-bottom: 30px; } .pb-pickem .pk-h1 { font-size: 50px; margin-bottom: 14px; } .pb-pickem .pk-hd-explain { font-size: 22px; line-height: 1.55; } /* rail cards */ .pb-pickem .rail-card { padding: 26px; border-radius: 20px; } .pb-pickem .rail-card h3 { font-size: 25px; margin-bottom: 20px; } .pb-pickem .rail-lock { padding: 22px 26px; gap: 18px; } .pb-pickem .rail-lock .rl-ico { width: 30px; height: 30px; } .pb-pickem .rail-lock .rl-t { font-size: 25px; } .pb-pickem .rail-lock .rl-s { font-size: 19px; margin-top: 6px; } /* scoring rules */ .pb-pickem .score-rules li { font-size: 21px; padding: 13px 0; gap: 14px; } .pb-pickem .score-rules .ic { width: 24px; height: 24px; } .pb-pickem .score-rules .vl { font-size: 19px; } /* live score preview */ .pb-pickem .pk-ring-wrap { width: 250px; } .pb-pickem .pk-ring { width: 250px; height: 250px; } .pb-pickem .pk-ring-bg, .pb-pickem .pk-ring-fg { stroke-width: 7; } .pb-pickem .pk-ring-mid .n { font-size: 56px; } .pb-pickem .pk-ring-mid .u { font-size: 18px; } .pb-pickem .pk-ring-sub { font-size: 20px; margin-bottom: 18px; } .pb-pickem .pk-count { margin-bottom: 20px; } .pb-pickem .pk-count .n { font-size: 23px; } .pb-pickem .pk-count .n b { font-size: 30px; } .pb-pickem .pk-count .s { font-size: 19px; margin-top: 6px; } .pb-pickem .sum-expr { font-size: 22px; margin-top: 18px; } .pb-pickem .pk-chipline { font-size: 20px; margin-top: 18px; padding-top: 18px; } .pb-pickem .rail-cta { margin-top: 18px; } .pb-pickem .rail-login .rl-copy { font-size: 20px; line-height: 1.45; } /* last card */ .pb-pickem .yr-grid { gap: 22px; } .pb-pickem .yr-big .n { font-size: 54px; } .pb-pickem .yr-big .k { font-size: 17px; } .pb-pickem .yr-side { padding-left: 22px; } .pb-pickem .yr-row { font-size: 20px; } .pb-pickem .yr-row b { font-size: 23px; } .pb-pickem .rail-link { font-size: 21px; padding-top: 16px; } .pb-pickem .score-note { font-size: 19px; line-height: 1.5; } /* locked card foot (replaces the YES/NO row at first pitch) */ .pb-pickem .pk-locked { padding: 15px 18px; gap: 16px; min-height: 68px; border-radius: 16px; } .pb-pickem .lk-call { font-size: 18px; padding: 7px 18px; } .pb-pickem .lk-hr { font-size: 20px; } .pb-pickem .lk-pts { font-size: 25px; } .pb-pickem .lk-pts.good, .pb-pickem .lk-pts.bad { font-size: 25px; } .pb-pickem .lk-pend { font-size: 17px; } .pb-pickem .lk-void { font-size: 16px; } /* ── Mobile bar: sticky header + progress + compact stat strip ──────── Replaces the rail on a phone. The rail's lock card and ring panel are hidden here — the same numbers live in the strip, and stacking a 250px ring under ten cards buried it. */ .pb-pickem .pk-mbar { display: block; } .pb-pickem .pk-mstats { display: flex; } .pb-pickem .pk-hd { display: none; } /* the bar carries the title */ /* The bar carries the lock, and the drawer carries the rules. Hide those two rail cards outright — but NOT the preview panel: it still owns the multiplier line and, critically, the save-error slot (#pk-summary-err), which would otherwise be invisible on a phone. Only its duplicated internals (ring, count, chip line) come out. */ .pb-pickem .pk-rail .rail-lock, .pb-pickem .pk-rail .rail-scoring { display: none; } .pb-pickem .rail-preview h3, .pb-pickem .rail-preview .pk-ring-wrap, .pb-pickem .rail-preview .pk-ring-sub, .pb-pickem .rail-preview .pk-count, .pb-pickem .rail-preview .pk-chipline { display: none; } /* Everything the panel used to hold now lives in the bar, the strip or the drawer — so on mobile it is an empty bordered card UNLESS a save failed. :has() keeps the error reachable without duplicating #pk-summary-err into a second mobile-only node (one id, one update path). */ .pb-pickem .rail-preview { padding: 18px 20px; } .pb-pickem .rail-preview:not(:has(#pk-summary-err:not([hidden]))) { display: none; } .pb-pickem .pk-mbar { /* Scrolls away with the page (founder 2026-07-28). It was sticky at 100px — under the fixed .landing-nav — but on a phone the nav already eats ~108px, and a second permanent band on top of it cost roughly a fifth of the viewport before the first card. The progress and lock state are worth re-scrolling for; the cards are not worth losing. */ position: static; background: rgba(0, 0, 0, .94); backdrop-filter: blur(10px); margin: 0 -36px 0; padding: 20px 36px 20px; border-bottom: 1px solid var(--pk-border); } .pb-pickem .pk-mbar-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pb-pickem .pk-mbar-title { font-size: 34px; font-weight: 800; color: var(--pk-text); } .pb-pickem .pk-mbar-lock { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; font-size: 25px; color: var(--pk-muted); font-weight: 600; } .pb-pickem .pk-mbar-lock b { color: var(--pk-accent); font-variant-numeric: tabular-nums; } .pb-pickem .pk-mbar-prog { display: flex; align-items: center; gap: 20px; margin-top: 18px; } .pb-pickem .pk-prog { flex: 1 1 auto; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; } .pb-pickem .pk-prog span { display: block; height: 100%; border-radius: 999px; background: var(--pk-accent); transition: width .25s ease; } .pb-pickem .pk-prog-lbl { flex: 0 0 auto; font-size: 24px; color: var(--pk-muted); } .pb-pickem .pk-prog-lbl b { color: var(--pk-text); font-weight: 800; } .pb-pickem .pk-mstats { display: flex; align-items: center; gap: 10px; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 16px; padding: 16px 18px; margin: 18px 0 20px; } .pb-pickem .ms-cell { flex: 1 1 0; min-width: 0; text-align: center; } .pb-pickem .ms-cell .k { font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--pk-muted); } .pb-pickem .ms-cell .n { font-size: 34px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; } .pb-pickem .ms-cell .n.teal { color: var(--pk-accent); } .pb-pickem .ms-cell .n.gold { color: var(--pk-gold); } .pb-pickem .ms-cell .u { font-size: 15px; color: var(--pk-muted); margin-top: 2px; } .pb-pickem .ms-help { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; background: none; border: 0; border-left: 1px solid var(--pk-border-soft); padding: 4px 0 4px 16px; color: var(--pk-text); font: inherit; text-align: left; } /* The caret used to carry BOTH the "this expands" affordance and the open/closed state. With it gone, aria-expanded drives the state instead — the ? circle goes accent while the drawer is open — so nothing depends on a glyph that is no longer there. */ .pb-pickem .ms-help[aria-expanded="true"] .q { color: var(--pk-accent); border-color: var(--pk-accent-border); background: var(--pk-accent-dim); } .pb-pickem .ms-help .q { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--pk-border); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; transition: color .15s, border-color .15s, background .15s; } .pb-pickem .ms-help .t { font-size: 19px; line-height: 1.2; font-weight: 600; } .pb-pickem .pk-mscoring { display: block; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 16px; padding: 18px 20px; margin: -6px 0 20px; } .pb-pickem .pk-mscoring[hidden] { display: none; } /* ── Card breathing room ───────────────────────────────────────────── The desktop card was tightened 26% for density; at phone scale those same gaps collapse the badges, the factor strip and the YES/NO row into one dense slab. Vertical rhythm only — the 1.66x type above is unchanged, and nothing here alters the card's horizontal layout. */ .pb-pickem .pl-card { padding: 20px 22px 20px; } .pb-pickem .pl-top { margin-bottom: 16px; } .pb-pickem .pl-foot { margin: 0 0 16px; min-height: 0; gap: 12px; } .pb-pickem .factor-strip { padding: 16px 0 15px; } .pb-pickem .factor { gap: 7px; } /* icon() emits inline width/height — !important is the only way a stylesheet can resize it, and the strip is shared with desktop. */ .pb-pickem .factor-strip .f-ico .ico { width: 26px !important; height: 26px !important; } .pb-pickem .pk-choice { margin-top: 16px; gap: 14px; } .pb-pickem .pk-btn { padding: 16px 10px; gap: 5px; } .pb-pickem .pk-locked { margin-top: 16px; } } /* Small-window downscale. MUST stay AFTER the 1000px block: both match here, specificity is equal, so the later rule wins (the v1 file had this block FIRST and the downscale silently never applied). */ @media (max-width: 760px) { .pb-pickem .hdr-title { font-size: 30px; } .pb-pickem .lb-hdr .hdr-title { font-size: 30px; } .pb-pickem .hdr-sub { font-size: 12px; } .pb-pickem .sum-expr { font-size: 13px; } .pb-pickem .sum-warn, .pb-pickem .sum-err { font-size: 12.5px; padding: 9px 12px; } .pb-pickem .confirm-btn { font-size: 14px; padding: 15px; } .pb-pickem .pl-card { padding: 16px 18px 18px; } .pb-pickem .pl-card .headshot, .pb-pickem .pl-card .headshot-fb { width: 64px; height: 64px; font-size: 22px; } .pb-pickem .pl-id .nm { font-size: 19px; } .pb-pickem .pl-id .tm { font-size: 13px; } .pb-pickem .pl-pitcher { font-size: 13px; } .pb-pickem .val-odds { font-size: 22px; } .pb-pickem .val-worth { font-size: 24px; } .pb-pickem .val-worth span { font-size: 12px; } .pb-pickem .val-lbl { font-size: 9px; } .pb-pickem .f-lbl { font-size: 9px; } .pb-pickem .f-val { font-size: 16px; } .pb-pickem .pl-badge, .pb-pickem .tier-badge { font-size: 10.5px; padding: 5px 12px; } .pb-pickem .pk-btn { padding: 12px 8px; border-radius: 12px; } .pb-pickem .pk-btn .t { font-size: 15px; } .pb-pickem .pk-btn .v { font-size: 11px; } .pb-pickem .cta { font-size: 15px; padding: 15px; } .pb-pickem .lb-panel-title { font-size: 12.5px; } .pb-pickem .hdr-date-sm { font-size: 12px; } .pb-pickem .prov-badge { font-size: 11px; padding: 6px 13px; } .pb-pickem .changed-note { font-size: 12.5px; padding: 10px 13px; } .pb-pickem .lb-recent-title { font-size: 12.5px; } .pb-pickem .lb-rcard .d { font-size: 11px; } .pb-pickem .lb-rcard .r { font-size: 18px; } .pb-pickem .lb-rcard .tb { font-size: 11.5px; } .pb-pickem .lb-rcard .chips { font-size: 12px; } /* rows drop the odds column padding and shrink to fit a real phone width */ .pb-pickem .pk-row { grid-template-columns: 48px 42px minmax(0, 1fr) 34px 52px; gap: 9px; padding: 10px 0; } .pb-pickem .pk-row .lb-hs { width: 42px; height: 42px; font-size: 14px; } .pb-pickem .pk-row-id .nm { font-size: 14.5px; } .pb-pickem .pk-row-id .sub { font-size: 11.5px; } .pb-pickem .pk-row-hr b { font-size: 16px; } .pb-pickem .pk-row-hr span { font-size: 8.5px; } .pb-pickem .pk-row-val { font-size: 16px; } .pb-pickem .pk-row-val.void, .pb-pickem .pk-row-val.skip { font-size: 10px; } .pb-pickem .pk-chip { font-size: 9.5px; padding: 6px 0; } .pb-pickem .res-score .n { font-size: 60px; } .pb-pickem .res-score .of { font-size: 28px; } .pb-pickem .res-k { font-size: 10px; } .pb-pickem .res-sub { font-size: 12.5px; } .pb-pickem .res-chips { font-size: 13px; padding: 10px 15px; } .pb-pickem .mult-note { font-size: 13px; padding: 14px 16px; } .pb-pickem .lb-step .c { width: 28px; height: 28px; font-size: 13px; } .pb-pickem .lb-step .t { font-size: 12px; } .pb-pickem .lb-step .s { font-size: 11px; } .pb-pickem .pk-promo-plr { width: 92px; } .pb-pickem .pk-promo-hs { width: 56px; height: 56px; font-size: 18px; } .pb-pickem .pk-promo-nm { font-size: 12.5px; } .pb-pickem .pk-promo-odds { font-size: 11px; } .pb-pickem .pk-promo-hint { font-size: 11.5px; } .pb-pickem .pk-promo-note { font-size: 12px; } /* ── v2 layout, small-window DOWNSCALE ─────────────────────────────── This block exists because the 1000px block above is a SCALE-UP for the viewport-meta-less phone rendering; below 760px the window really is narrow and everything comes back to roughly desktop size. The card internals were already handled here — the v2 header, rail and locked rows were not, so they stayed at 1.66x while the cards shrank. */ .pb-pickem .pk-layout { gap: 16px; } .pb-pickem .pk-rail { gap: 14px; } .pb-pickem .pk-hd { margin-bottom: 18px; } .pb-pickem .pk-h1 { font-size: 30px; margin-bottom: 10px; } .pb-pickem .pk-hd-explain { font-size: 13.5px; line-height: 1.6; } .pb-pickem .rail-card { padding: 16px; border-radius: 14px; } .pb-pickem .rail-card h3 { font-size: 15px; margin-bottom: 12px; } .pb-pickem .rail-lock { padding: 13px 16px; gap: 11px; } .pb-pickem .rail-lock .rl-ico { width: 18px; height: 18px; } .pb-pickem .rail-lock .rl-t { font-size: 15px; } .pb-pickem .rail-lock .rl-s { font-size: 12px; margin-top: 3px; } .pb-pickem .score-rules li { font-size: 13px; padding: 7px 0; gap: 9px; } .pb-pickem .score-rules .ic { width: 14px; height: 14px; } .pb-pickem .score-rules .vl { font-size: 12px; } .pb-pickem .score-note { font-size: 12px; line-height: 1.55; } .pb-pickem .pk-ring-wrap { width: 150px; } .pb-pickem .pk-ring { width: 150px; height: 150px; } .pb-pickem .pk-ring-bg, .pb-pickem .pk-ring-fg { stroke-width: 8; } .pb-pickem .pk-ring-mid .n { font-size: 34px; } .pb-pickem .pk-ring-mid .u { font-size: 11px; } .pb-pickem .pk-ring-sub { font-size: 12px; margin-bottom: 10px; } .pb-pickem .pk-count { margin-bottom: 12px; } .pb-pickem .pk-count .n { font-size: 14px; } .pb-pickem .pk-count .n b { font-size: 18px; } .pb-pickem .pk-count .s { font-size: 11.5px; margin-top: 3px; } .pb-pickem .pk-chipline { font-size: 12px; margin-top: 10px; padding-top: 10px; } .pb-pickem .rail-cta { margin-top: 12px; } .pb-pickem .rail-login .rl-copy { font-size: 13px; } .pb-pickem .yr-grid { gap: 14px; } .pb-pickem .yr-big .n { font-size: 34px; } .pb-pickem .yr-big .k { font-size: 10px; } .pb-pickem .yr-side { padding-left: 14px; } .pb-pickem .yr-row { font-size: 12px; } .pb-pickem .yr-row b { font-size: 14px; } .pb-pickem .rail-link { font-size: 13px; padding-top: 10px; } .pb-pickem .pk-locked { padding: 9px 12px; gap: 10px; min-height: 42px; border-radius: 12px; } .pb-pickem .lk-call { font-size: 11px; padding: 4px 11px; } .pb-pickem .lk-hr { font-size: 12px; } .pb-pickem .lk-pts, .pb-pickem .lk-pts.good, .pb-pickem .lk-pts.bad { font-size: 15px; } .pb-pickem .lk-pend { font-size: 10.5px; } .pb-pickem .lk-void { font-size: 10px; } /* Card spacing back down for genuinely narrow windows (mirrors the 1000px breathing-room block above). */ .pb-pickem .pl-top { margin-bottom: 8px; } .pb-pickem .pl-foot { margin: 0 0 8px; gap: 8px; } .pb-pickem .factor-strip { padding: 8px 0 7px; } .pb-pickem .factor { gap: 3px; } /* Back to the inline 16px the desktop markup ships; needs !important only because the 1000px scale-up above is itself !important. */ .pb-pickem .factor-strip .f-ico .ico { width: 16px !important; height: 16px !important; } .pb-pickem .pk-choice { margin-top: 10px; gap: 9px; } .pb-pickem .pk-locked { margin-top: 10px; } }