/* dc-livematch.css · the match room's page styles, extracted with the app logic (#shell-diet, 28 Aug 2026). Same rule: edit here, bump ?v= in livematch.html and sw.js together. */ :root { --bg:#f6f8fc; --gold:#c69200; --blue:#2563eb; --ink:#0f172a; --muted:#64748b; --line:#e8edf5; --card:#ffffff; --soft:#f6f8fc; --field:#fbfcfe; --track:#eef2f7; --text2:#334155; --green:#16a34a; --red:#dc2626; --orange:#ea7a00; --purple:#7c3aed; } [data-theme="dark"] { --bg:#0a121e; --ink:#eaf1fa; --muted:#adbdd4; --line:#304066; --card:#1d2e4d; --soft:#131d31; --field:#131d31; --track:#273759; --text2:#ccd8e8; --blue:#60a5fa; } * { box-sizing:border-box; margin:0; } body { background:var(--bg); color:var(--ink); font-family:Archivo,sans-serif; } .mono { font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums lining-nums; } .wrap { max-width:1500px; margin:0 auto; padding:24px 22px 60px; } header.bar { display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:8px; padding:12px 8px 12px; border-bottom:1px solid rgba(198,146,0,.18); height:auto; min-height:0; overflow:visible; margin-top:0; margin-bottom:14px; } .wordmark { font-weight:800; font-size:1.72rem; order:1; line-height:1; color:var(--ink); padding-left:4px; text-decoration:none; } .topnav { order:3; flex:0 0 100%; width:100%; display:flex; flex-wrap:wrap; gap:4px; margin-left:0; margin-top:4px; } .topnav a { white-space:nowrap; text-decoration:none; color:var(--muted); font-weight:800; font-size:.84rem; padding:6px 11px; border-radius:10px; } .topnav a:hover { color:var(--ink); background:var(--track); } .topnav a.active { color:var(--gold); background:#c692001a; } .themeBtn { margin-left:auto; border:1px solid var(--line); background:var(--card); cursor:pointer; width:40px; height:40px; order:2; border-radius:11px; font-size:1.05rem; line-height:1; } .themeBtn:hover { background:var(--soft); } input, select { color:var(--ink); } select option { background:var(--card); color:var(--ink); } .card { background:var(--card); border-radius:16px; box-shadow:0 0 0 1px var(--line), 0 10px 30px rgba(15,23,42,.05); } .rise { animation:rise .5s cubic-bezier(.22,.61,.36,1) both; } @keyframes rise { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} } /* Hero */ .hero { padding:28px 30px; } /* Page hero wears the thin gold ring - same recipe as the venue + Match Centre heroes and the active league tab (1.5px var(--gold)). Drawn as a box-shadow ring so it adds no layout box and shifts nothing; !important because dc-mobile.css sets the .card box-shadow with !important. var(--shadow) keeps dc-mobile's theme-aware depth. */ .card.hero { box-shadow:0 0 0 1.5px var(--gold), var(--shadow, 0 10px 30px rgba(15,23,42,.05)) !important; } .heroTop { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } /* wrapper only, so the morph has one stable leaf to swap the state badge inside (SLOTS, below); it must not become a second flex item with its own box */ .heroTop .heroState { display:inline-flex; align-items:center; } .livebadge { display:inline-flex; align-items:center; gap:7px; color:#fff; background:var(--red); font-weight:800; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 11px; border-radius:999px; } .livebadge.done { background:var(--muted); } .livebadge.stale { background:#c69200; color:#1a1205; } /* dark: dc-mobile.css flips --red to #f87171 and white ink drops to 2.77:1; pin the badge fill back to #dc2626 (white ink 4.83:1) */ [data-theme="dark"] .livebadge { background:#dc2626; } [data-theme="dark"] .livebadge.done { background:var(--muted); } [data-theme="dark"] .livebadge.stale { background:#c69200; } .livedot { width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; } @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}} /* THE CALM CHIP · PAUSED. Same three rules as dc-matchcard.css's `.dcHold` (its TWIN - edit both or neither); repeated here because this page loads dc-matchcard.js for the vocabulary but not dc-matchcard.css for the card. Gold eyebrow voice, no animation, never red: at stumps nobody is playing, and a red pulse would say otherwise. */ .dcHold { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; vertical-align:middle; font:800 .6rem/1 Archivo,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; color:var(--gold); background:color-mix(in srgb,var(--gold) 13%,transparent); border:1px solid color-mix(in srgb,var(--gold) 32%,transparent); } .dcHold .dcHoldDot { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.9; flex:0 0 auto; animation:none; } .scInnTab .dcHold { font-size:.5rem; padding:2px 5px; gap:3px; margin-right:5px; letter-spacing:.03em; } .scInnTab .dcHold .dcHoldDot { width:4px; height:4px; } .upd { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.04em; } .eyebrow { color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; } /* WHICH MATCH OF WHICH SERIES · sits under the eyebrow, above the teams. Same quiet register as .sub (muted, not gold): the eyebrow above it already carries the gold, and a second gold line would compete with the score for the eye. No background, no border, no dot - it is a sentence, not a chip. */ .seriesLine { color:var(--muted); font-size:.82rem; font-weight:750; margin-top:6px; line-height:1.4; } .seriesLine b { color:var(--ink); font-weight:800; } .heroTeams { display:flex; align-items:center; gap:14px; margin-top:10px; flex-wrap:wrap; } .heroTeams h1 { display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; } .heroTeams .tmSide { display:inline-flex; align-items:center; gap:9px; min-width:0; } h1 { font-size:1.75rem; line-height:1.08; font-weight:800; letter-spacing:0; } /* #46 · compact, uniform match title */ h1 .vs { color:var(--muted); font-weight:700; font-size:1.05rem; margin:0 6px; } /* #tossline (founder, 26 Aug 2026, phone: "Toss alag cheez hai, use Sinhalese ke saath jodkar mat likho - thodi jagah do, aur jeetne wale ka naam bold; ye poora hissa kam powerful lagta hai, premium banao"). The ground, the date and the toss were ONE grey run-on that wrapped mid-thought on a phone, so the toss read as the tail of an address. They are two different facts, so they are two rows: WHERE and WHEN, then WHO won the toss - and the winner is the only ink-bold word in the block, because that is what a reader comes to this line for. The toss sits on the house's whisper-gold plate (the tint the last fallen wicket already wears), so it reads as a designed fact rather than leftover text. Fixed in the same pass: the venue link's underline was BLUE (rgba(37,99,235,.45)) - a stray blue rule in a gold house, on the very line he called weak. */ .sub { color:var(--muted); font-size:1rem; margin-top:11px; line-height:1.5; } .sub .dotSep { color:var(--muted); opacity:.55; margin:0 5px; } .sub .subWhere .vn { color:var(--text2,var(--ink)); font-weight:750; } .sub .subWhere .dt { color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } .sub a { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent); } .sub a:hover, .sub a:focus-visible { color:var(--gold); border-bottom-color:var(--gold); } .sub .subToss { display:inline-flex; align-items:baseline; gap:10px; margin-top:12px; padding:7px 14px 8px; border-radius:999px; background:color-mix(in srgb,var(--gold) 8%,transparent); border:1px solid color-mix(in srgb,var(--gold) 24%,transparent); } .sub .subToss .tossL { flex:0 0 auto; color:var(--gold); font:900 .6rem/1.6 Archivo,system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; } .sub .subToss .tossT { color:var(--muted); font-size:.93rem; font-weight:700; } .sub .subToss .tossT b { color:var(--ink); font-weight:900; } .result { margin-top:16px; padding-left:14px; border-left:3px solid var(--gold); color:var(--ink); font-weight:900; font-size:1.14rem; letter-spacing:.01em; line-height:1.4; } /* 18 Aug 13:05 founder: the Session / won-by line reads BOLD */ .quickGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:18px; } .quickGrid.quickGrid6 { grid-template-columns:repeat(6,1fr); } .kpi { padding:14px 16px; min-width:0; } .kpi .l { color:var(--muted); font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; line-height:1.25; } .kpi .v { font-size:1.15rem; font-weight:800; margin-top:5px; line-height:1.2; overflow-wrap:break-word; } .kpi .s { color:var(--muted); font-size:.73rem; font-weight:700; margin-top:4px; line-height:1.3; } .kick { margin:30px 0 10px; display:flex; align-items:end; justify-content:space-between; gap:16px; } .kick .e { color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; } .kick .t { font-size:1.35rem; font-weight:800; } .note { color:var(--muted); font-size:.82rem; line-height:1.45; } .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .panel { padding:18px 20px; overflow:hidden; } .panelHead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; } .panelHead h2 { font-size:1.12rem; font-weight:800; } .panelHead p { color:var(--muted); font-size:.82rem; margin-top:3px; line-height:1.35; } /* Live-now strip */ .crease { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; } .creaseCard { border:1px solid var(--line); border-radius:13px; background:linear-gradient(180deg,var(--field),var(--card)); padding:13px 15px; } .creaseCard .cl { color:var(--muted); font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .batLine { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); } .batLine:last-child { border-bottom:0; } .batLine .bn { font-weight:800; font-size:.95rem; display:flex; align-items:center; gap:7px; } .batLine .bn .strike { color:var(--gold); font-size:.7rem; } /* #creasetap (founder 15 Aug): "ye sare naam clickable hai, to dikhna chahiye ki click kar sakte". The names already opened a dossier; nothing on them said so. Same dotted-underline contract the partnership panel's .pnName has used all along - quiet at rest, gold on hover or keyboard focus, so the affordance is legible without turning the card into a page of links. */ .batLine .bn a.sqRow { color:var(--ink); text-decoration:none; cursor:pointer; border-bottom:1px dotted rgba(198,146,0,.55); } .batLine .bn a.sqRow:hover, .batLine .bn a.sqRow:focus-visible { color:var(--gold); border-bottom-color:var(--gold); } .batLine .bv { color:var(--ink); font-weight:800; } .batLine .bv small { color:var(--muted); font-weight:700; } /* #creaseans (founder 15 Aug): "4s kitne, answer hai 8 - aise answers golden and bold hone chahiye". The LABEL is the question and stays quiet; the NUMBER is the answer and now carries the gold. Reads as 4s 8, not as one grey run-on line. */ .nmCell .dis .notout.retd { color:var(--gold); font-weight:800; } /* #retired: undismissed, but off the field */ .batLine .bv .bvK { color:var(--muted); font-weight:700; } .batLine .bv .bvA { color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums; } .batLine .bv small .bvA { color:var(--gold); font-weight:800; } /* #runsink (founder, 26 Aug 2026, at the crease: "83 runs aur SR 71.55 dono ek hi rang me hain - runs ke liye doosra rang do, theme ka, taki runs dikhein"). Every number in this line carried the same gold since 15 Aug, so the SCORE - the one figure a reader opens a live room for - had to be found by reading. The headline figure is ink now, a size up at weight 900: a batter's RUNS, and a bowler's wickets/runs. The supporting answers (balls, 4s, 6s, SR, maidens, economy) keep their gold. Two tones, one hierarchy - the score reads first, the detail second - and no new hue enters the house: ink and gold are what this page is already made of. */ /* 26 Aug, second look (founder): "91 aur 2 bold likho, aur Siraj ka wicket bhi bold". Ink alone was not enough at this size - the figure was still SMALLER than the name above it, so it read as detail. It is now the largest thing on its line, and the bowler's wickets carry one extra step over the runs conceded, because "1 for 9" is one number a reader looks for and one that follows it. */ .batLine .bv .bvR { color:var(--ink); font-weight:900; font-size:1.28em; letter-spacing:-.015em; font-variant-numeric:tabular-nums; } .batLine .bv .bvW { color:var(--ink); font-weight:900; font-size:1.34em; letter-spacing:-.015em; font-variant-numeric:tabular-nums; } .batLine .bv .bvSl { color:var(--muted); font-weight:800; font-size:1.1em; margin:0 1px; } .lastwkt { font-weight:800; font-size:.98rem; margin-top:4px; } .lastwkt small { display:block; color:var(--muted); font-weight:700; font-size:.78rem; margin-top:3px; } /* Fall of wickets · full innings, rich + linked; the fall score is a gold number */ .fowCard { margin-top:14px; } .fowPara .fowGoldRuns, .fowPara .fowGoldName { color:var(--gold); font-weight:800; } .fowPara .fowGoldRuns { font-family:var(--font-numeric,'Spline Sans Mono',monospace); font-variant-numeric:tabular-nums; } /* founder 17 Aug 2026 17:15: the head in gold, bold, a size up, with the full team name */ .fowCard .cl.fowHead { color:var(--gold); font-size:.92rem; font-weight:900; letter-spacing:.02em; text-transform:none; } .fowCard .cl.fowYetHead { color:var(--gold); font-size:.74rem; font-weight:900; letter-spacing:.1em; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); } /* 18 Aug 12:30 · the fallen batter's own runs (balls) beside his name, runs gold */ .fowItem .fowFig { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:.8rem; color:var(--muted); white-space:nowrap; margin-left:6px; } .fowItem .fowFig b { color:var(--gold); font-weight:800; } .fowItem.fowYetItem .fowBat { font-weight:700; color:var(--text2, var(--muted)); } .fowList { margin-top:9px; } .fowItem { display:flex; align-items:baseline; gap:10px; padding:8px 6px; border-bottom:1px solid var(--line); font-size:.86rem; } .fowItem:last-child { border-bottom:0; } .fowItem.fowLast { background:rgba(198,146,0,.07); border-radius:8px; border-bottom-color:transparent; } .fowN { flex:0 0 auto; min-width:18px; text-align:center; font:900 .68rem/1 'Spline Sans Mono',monospace; color:var(--muted); } .fowScore { flex:0 0 auto; min-width:58px; font:800 .92rem/1 'Spline Sans Mono',monospace; color:var(--ink); } .fowScore b { color:var(--gold); } .fowBat { flex:1 1 auto; font-weight:800; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fowMeta { flex:0 0 auto; color:var(--muted); font-weight:700; font-size:.76rem; white-space:nowrap; } /* #creasetap: the dotted rule used to be transparent until hover, which on a phone means never - there is no hover on a touch screen, so a tappable name looked exactly like plain text. It is drawn at rest now. */ .fowLink { color:inherit; text-decoration:none; cursor:pointer; border-bottom:1px dotted rgba(198,146,0,.55); } .fowLink:hover, .fowLink:focus-visible { color:var(--gold); border-bottom-color:var(--gold); } @media (max-width:520px){ .fowItem { flex-wrap:wrap; row-gap:2px; } .fowMeta { flex-basis:100%; margin-left:28px; } } /* Partnerships · gold diverging bars, each stand split by batter contribution */ #pnBox { padding:14px 14px 8px; } .pnList { margin-top:12px; display:flex; flex-direction:column; gap:11px; } .pnRow { display:grid; grid-template-columns:minmax(96px,1.1fr) minmax(96px,1.3fr) minmax(96px,1.1fr); align-items:center; gap:8px; } .pnSide { display:flex; flex-direction:column; min-width:0; } .pnSide.pnL { text-align:right; align-items:flex-end; } .pnSide.pnR { text-align:left; align-items:flex-start; } /* #namefit · font-size rides --nmFit, a per-name shrink-to-fit ratio set by fitNames() (1 = full size, so short names keep their exact size). white-space stays normal HERE as the measurement base; fitNames() sets nowrap inline so the name renders on ONE line. The ellipsis is the last resort if a name still overflows at the .60 floor. */ .pnName { font-weight:800; font-size:.82rem; line-height:1.15; color:var(--ink); text-decoration:none; cursor:pointer; max-width:100%; white-space:normal; min-width:0; overflow:hidden; text-overflow:ellipsis; border-bottom:1px dotted rgba(198,146,0,.55); } .pnName:hover, .pnName:focus-visible { color:var(--gold); border-bottom-color:var(--gold); } .pnSide small { color:var(--muted); font:800 .72rem/1.3 'Spline Sans Mono',monospace; } .pnSide small em { font-style:normal; opacity:.7; font-weight:700; } .pnBar { display:flex; align-items:center; min-width:0; } .pnHalf { flex:1 1 0; display:flex; align-items:center; height:16px; min-width:0; } .pnHalf.L { justify-content:flex-end; } .pnHalf.R { justify-content:flex-start; } .pnSeg { height:13px; border-radius:4px; display:block; min-width:2px; box-shadow:0 1px 3px rgba(2,6,23,.18); } .pnSeg.segL { background:linear-gradient(90deg,rgba(198,146,0,.5),var(--gold)); border-radius:4px 2px 2px 4px; } .pnSeg.segR { background:linear-gradient(90deg,var(--gold),rgba(198,146,0,.42)); border-radius:2px 4px 4px 2px; } .pnMid { flex:0 0 auto; padding:0 8px; text-align:center; display:flex; flex-direction:column; align-items:center; } .pnMid b { font:900 .96rem/1 'Spline Sans Mono',monospace; color:var(--gold); } .pnMid span { font-size:.58rem; font-weight:800; letter-spacing:.02em; color:var(--muted); margin-top:2px; white-space:nowrap; } .pnRow.pnNotOut .pnMid b { text-shadow:0 0 0 var(--gold); } .pnRow.pnNotOut .pnSeg { outline:1.5px solid rgba(198,146,0,.55); outline-offset:1px; } .pnEmpty { color:var(--muted); padding:16px 4px; font-weight:700; } @media (max-width:560px){ .pnRow { grid-template-columns:minmax(60px,1fr) minmax(90px,1.8fr) minmax(60px,1fr); gap:5px; } .pnName { font-size:.76rem; } .pnSide small { font-size:.66rem; } } /* Scorecards */ /* minmax(0,1fr): a plain 1fr floors at the table's min-content, so a wide SR heat-pill (e.g. "315.38") + a long batter name used to BLOW the column past the viewport (the pill went off-page instead of the tableWrap's overflow:auto scrolling inside). */ #scorecards { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; } .scoreTitle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(180deg,var(--field),var(--card)); margin-bottom:12px; } .scLeft { display:flex; align-items:center; gap:9px; } .scTeam { font-size:1.06rem; font-weight:900; letter-spacing:.01em; } .scInn { font-size:.74rem; font-weight:800; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; } .scRight { display:flex; align-items:baseline; gap:7px; white-space:nowrap; } .scoreTitle .total { color:var(--gold); font-size:1.25rem; font-weight:800; } .scOvers { color:var(--muted); font-size:.82rem; font-weight:700; } .scSub { font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; padding-left:2px; } .scSub:first-child { margin-top:2px; } .tblSortBar { display:flex; justify-content:flex-end; margin:0 0 8px; } .tblSortBar label { color:var(--muted); font-size:.72rem; font-weight:800; } .tblSortBar select { background:var(--field); border:1px solid var(--line); border-radius:9px; padding:5px 9px; font:inherit; font-weight:800; font-size:16px; color:var(--ink); margin-left:6px; cursor:pointer; } .tblSortBar select:focus { outline:none; border-color:var(--gold); } .tableWrap { overflow:auto; border:1px solid var(--line); border-radius:13px; } table { width:100%; border-collapse:collapse; font-size:.87rem; min-width:0; } th { text-align:right; color:var(--muted); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none; background:var(--field); white-space:nowrap; } th:first-child, td:first-child { text-align:left; } td { padding:9px 12px; text-align:right; border-bottom:1px solid var(--line); vertical-align:middle; } th:not(:last-child), td:not(:last-child) { border-right:1px solid var(--line); } tr:last-child td { border-bottom:0; } th.on { color:var(--gold); } th.thNoSort { cursor:default; } /* 18 Aug 12:40 · the name head is not a sort control */ .kpi .v .lmLead { color:var(--gold); } /* 18 Aug 12:40 founder: the Lead number reads GOLD */ .heat { padding:4px 7px; text-align:center; } .hpill { display:inline-block; min-width:48px; padding:4px 9px; border-radius:9px; font-weight:800; font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums lining-nums; } .nmCell { display:flex; align-items:center; gap:9px; } /* scorecard: dismissal moved UNDER the batter name (drops the wide "how out" column that * forced a horizontal slider in the two-up innings grid). */ .nmCell .nmStk { display:inline-flex; flex-direction:column; min-width:0; gap:2px; } .nmCell .dis { color:var(--muted); font-size:.68rem; font-weight:600; line-height:1.25; white-space:normal; } /* Names lead the row (founder 2026-07-27: "naam bahut chote"). The batter/bowler is * what the row is ABOUT, yet the name inherited the table's small text at weight 400 * while every number sat in an 800-weight mono pill. Ink + weight + a small size step * restore the hierarchy; numbers and layout untouched. Hover = gold text, not the * squad-row background smear (that hover was written for the squad list, not for an * inline link inside a table cell). */ /* #namefit · same shrink-to-fit contract as .pnName: --nmFit (set per name by * fitNames()) shrinks a long name onto ONE line instead of the two-line stack the * bigger name size introduced ("Jack Blatherwick" broke across lines). Short names * ride --nmFit=1, i.e. their size is untouched. */ /* khep 145: full size, always; a long name WRAPS (the founder: "slide the big name", never shrink it) */ .nmCell .nmTop a.sqRow { font-size:.95rem; font-weight:800; color:var(--ink); letter-spacing:.005em; line-height:1.25; min-width:0; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; border-bottom:1px dotted rgba(198,146,0,.55); } /* #creasetap: a name that opens a dossier says so */ .nmCell .nmTop a.sqRow:hover, .nmCell .nmTop a.sqRow:focus-visible { background:none; color:var(--gold); border-bottom-color:var(--gold); } /* #creasetap: the fielder and bowler inside a dismissal are clickable too, so they carry the same rule, a shade fainter - it is small grey type and must stay quiet. Every one of these anchors used to carry an inline border:0, which beat any stylesheet: THAT is why a page full of links looked like a page of plain text. */ .nmCell .dis a.sqRow { border-bottom:1px dotted rgba(198,146,0,.38); } .nmCell .dis a.sqRow:hover, .nmCell .dis a.sqRow:focus-visible { background:none; color:var(--gold); border-bottom-color:var(--gold); } .dis a.sqRow { border-bottom:1px dotted rgba(198,146,0,.38); } .av { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; overflow:hidden; background:var(--track); border:1px solid var(--line); flex:0 0 auto; } /* object-position center 28% is the founder's own figure for the Ghibli pack (CLAUDE_HANDOFF.md, 31 Aug 2026). The art is painted with cream-gold sky ABOVE the hair, so the old `top center` cropped into that sky and pushed the face low in the circle; 28% brings the eyes to where a portrait wants them. The pack's stale manifest says 22%, but the founder said 28% twice and the handoff in the zip agrees with him, so 28% it is. */ .av img { width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; } .av i { display:none; font-style:normal; font-weight:800; font-size:.62rem; color:var(--muted); } .av.noimg i { display:block; } .minor { color:var(--muted); font-size:.8rem; margin-top:10px; line-height:1.5; } .minor b { color:var(--text2); } .chart { width:100%; height:360px; } .status { padding:18px 20px; color:var(--muted); font-weight:800; } .phaseHead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .phaseHead b { color:var(--ink); font-size:.74rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; } .phaseHead span { color:var(--muted); font-size:.7rem; font-weight:850; } /* FOUNDER REDESIGN 2026-08-07: the every-delivery board reads like a clean table. No page-wide colour wash behind it; the two innings sit SIDE BY SIDE as columns (first-batting team left, chasing team right; a Test stacks each team's innings inside its own column); inside a phase the overs run TWO to a row. Colour is rationed: gold = boundary family, red = wicket, everything else quiet. */ .ballTimeline { margin-top:14px; border-top:1px solid var(--line); padding-top:14px; } .lvEBCols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:12px; align-items:start; } .lvEBCol { min-width:0; display:grid; gap:12px; align-content:start; } .ballTimeline h3 { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.78rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .ballTimeline h3 span { letter-spacing:.03em; text-transform:none; color:var(--gold); font-size:.72rem; font-weight:900; border:1px solid rgba(198,146,0,.32); background:rgba(198,146,0,.09); padding:5px 9px; border-radius:999px; } .deliveryInspector { margin:10px 0 12px; border:1px solid rgba(198,146,0,.36); border-radius:18px; padding:14px 15px; background: linear-gradient(135deg,rgba(198,146,0,.13),rgba(37,99,235,.06) 48%,rgba(15,23,42,.025)), var(--card); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .deliveryInspector .diTop { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .deliveryInspector .diK { color:var(--gold); font-size:.66rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; } .deliveryInspector .diBadge { border:1px solid rgba(198,146,0,.35); border-radius:999px; padding:5px 9px; color:var(--ink); background:rgba(198,146,0,.12); font:950 .68rem/1 "Spline Sans Mono",monospace; } .deliveryInspector .diMain { margin-top:8px; color:var(--ink); font-size:1rem; font-weight:950; line-height:1.28; } .deliveryInspector .diSub { margin-top:5px; color:var(--muted); font-size:.82rem; font-weight:800; line-height:1.42; } .deliveryInspector .diGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:11px; } .deliveryInspector .diStat { border:1px solid var(--line); border-radius:13px; padding:8px 10px; background:rgba(255,255,255,.035); } .deliveryInspector .diStat small { display:block; color:var(--muted); font-size:.58rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; } .deliveryInspector .diStat b { display:block; color:var(--ink); font:950 .86rem/1.2 "Spline Sans Mono",monospace; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inningsArchiveWrap { margin-top:12px; display:grid; gap:10px; } .inningsArchive { border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; } .inningsArchive summary { list-style:none; cursor:pointer; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); font-weight:950; } .inningsArchive summary::-webkit-details-marker { display:none; } /* #everyflow · the chapter head's story line, same voice as the scorecard chips */ .inningsArchive summary .ebFlow { font-style:normal; color:var(--gold); font-weight:800; font-size:.72rem; } .inningsArchive summary span { color:var(--muted); font-size:.72rem; font-weight:900; } .inningsArchive summary:after { content:'Open phase-wise balls'; color:var(--gold); font-size:.68rem; font-weight:950; letter-spacing:.04em; } .inningsArchive[open] summary { border-bottom:1px solid var(--line); } .inningsArchive[open] summary:after { content:'Hide innings'; } .inningsArchive .ballLane { padding:0 13px 13px; } /* Test every-ball chapters: the who-fell summary line under each innings head */ .tInnOuts { padding:10px 15px; border-bottom:1px dashed var(--line); color:var(--muted); font-size:.76rem; font-weight:700; line-height:1.6; } .tInnOuts b { color:var(--red,#dc2626); font-weight:900; letter-spacing:.04em; text-transform:uppercase; font-size:.64rem; margin-right:4px; } .ballLane { margin-top:10px; } .ballLane:first-of-type { margin-top:0; } .ballLaneHead { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text2); font-size:.78rem; font-weight:900; margin-bottom:8px; } /* Phase blocks: quiet cards. The phase's identity is a thin LEFT accent + its name, never a colour wash over the whole block (founder 2026-08-07: "color wala theek nahi"). Powerplay/new-ball gold, middle/old-ball blue, death red. */ .ballPhase { border:1px solid var(--line); border-left:3px solid var(--line); border-radius:14px; padding:12px; margin-top:12px; background:var(--card); } .ballPhase.powerplay, .ballPhase.newball { border-left-color:var(--gold); } .ballPhase.middle, .ballPhase.oldball { border-left-color:var(--blue,#2563eb); } .ballPhase.death { border-left-color:var(--red,#dc2626); } .newBallMark { display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; padding:5px 11px; border-radius:999px; border:1px solid rgba(198,146,0,.4); background:rgba(198,146,0,.1); color:var(--gold); font-size:.68rem; font-weight:950; letter-spacing:.04em; } /* phase KPI tiles: two columns inside the half-width innings column, quiet surfaces */ .phasePulse { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:2px 0 11px; } .phaseMetric { border:1px solid var(--line); border-radius:11px; padding:7px 10px; background:var(--soft); } .phaseMetric small { display:block; color:var(--muted); font-size:.56rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; } .phaseMetric b { display:block; color:var(--ink); font:900 .82rem/1.2 "Spline Sans Mono",monospace; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .phaseStory { margin-top:10px; border-left:3px solid var(--gold); border-radius:0 11px 11px 0; padding:8px 11px; background:var(--soft); color:var(--muted); font-size:.76rem; font-weight:700; line-height:1.5; } .phaseStory b { color:var(--ink); font-weight:900; } .phaseStory em { color:var(--gold2,var(--gold)); font-style:normal; font-weight:900; } /* THE TABLE READ (founder 2026-08-07): overs run TWO to a row - "do over, do over ka teen pill to chhath over" - so a powerplay is exactly three rows of two. */ .ballOvers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:1px 0 0; } .ballOver { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:8px 9px; transition:border-color .12s ease, box-shadow .12s ease; } .ballOver:hover { border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); box-shadow:0 8px 20px rgba(2,6,23,.12); } .ballOverHead { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; } .ballOverHead b { color:var(--ink); font-size:.74rem; font-weight:900; line-height:1.2; } .ballOverHead span { color:var(--muted); font-size:.62rem; font-weight:800; text-align:right; line-height:1.25; white-space:nowrap; flex:none; } .ballOverHead .ovh { display:flex; flex-direction:row; align-items:baseline; gap:6px; min-width:0; flex:1; } .ballOverHead .ovl { color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; flex:none; } .ballOverHead .ovnum { color:var(--gold); font-weight:950; } .ballOverHead .ovl .ovnum { font-size:.74rem; } /* 🔴 `.ballOverHead span { flex:none }` a few lines up applies to EVERY span in this header, and .bw is a span, so the bowler's name refused to shrink. It kept its full width, overflowed .ovh, and printed straight under the runs column: "Arshdeep Singh" and "3 runs" on the same pixels, on every over card. The founder sent it from a phone. Letting it shrink is what makes its own overflow:hidden able to do its job. */ .ballOverHead .bw { display:block; flex:1 1 auto; min-width:0; color:var(--ink); font-size:.68rem; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .ballOverHead .bw > span { display:inline-block; } .ballOverHead .bw.tick > span { animation:bwtick 7s ease-in-out infinite; } @keyframes bwtick { 0%,14%{transform:translateX(0)} 50%,62%{transform:translateX(var(--sh,0))} 100%{transform:translateX(0)} } .ballDots { display:flex; flex-wrap:wrap; gap:5px; } /* Ball dots: colour is RATIONED to what matters. Dots and ordinary runs are quiet neutrals; the boundary family is gold (4 = outlined, 6 = filled - same hue, more ink for the bigger hit); a wicket is the only red. Extras keep a soft amber ring so a wide/no-ball still reads inside an over without shouting. */ .ballDot { width:24px; height:24px; flex:none; border-radius:50%; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font:800 .62rem/1 "Spline Sans Mono",monospace; color:var(--ink); background:var(--card); cursor:pointer; transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease; } .ballDot:hover { transform:translateY(-3px) scale(1.08); box-shadow:0 10px 20px rgba(2,6,23,.3); z-index:2; } .ballDot.active { outline:2px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 5px rgba(198,146,0,.16), 0 10px 22px rgba(2,6,23,.24); } .ballDot.dot { color:var(--muted); background:var(--track); border-color:transparent; font-weight:700; } .ballDot.run { border-color:var(--line); background:var(--soft); color:var(--text2,var(--ink)); } .ballDot.four { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 14%,var(--card)); color:var(--gold2,#8a6500); font-weight:900; } .ballDot.six { border-color:transparent; background:linear-gradient(180deg,#f7cf4a,#e8b923); color:#1a1204; font-weight:900; box-shadow:0 2px 8px rgba(198,146,0,.4); } .ballDot.extra { border-color:rgba(234,122,0,.45); background:var(--card); color:var(--orange,#b45309); font-size:.6rem; font-weight:800; } .ballDot.wicket { border-color:transparent; background:var(--red,#dc2626); color:#fff; font-weight:900; box-shadow:0 2px 9px rgba(220,38,38,.4); } [data-theme="dark"] .ballDot.wicket { background:#dc2626; } .ballOverHead .sc { display:block; color:var(--muted); font-size:.62rem; font-weight:800; margin-top:3px; font-family:"Spline Sans Mono",monospace; } .ballOverHead .sc b { color:var(--ink); } .ballOverChase { margin-top:8px; padding-top:7px; border-top:1px dashed var(--line); display:flex; gap:10px; flex-wrap:wrap; font-size:.62rem; color:var(--muted); font-weight:700; } .ballOverChase b { color:var(--ink); font-family:"Spline Sans Mono",monospace; font-weight:800; } .ballOverChase .rrr b { color:var(--gold); } .dcTip { position:fixed; z-index:120; pointer-events:none; max-width:326px; min-width:244px; padding:12px 13px; border-radius:15px; border:1px solid rgba(198,146,0,.58); background:linear-gradient(135deg,rgba(15,23,42,.985),rgba(30,41,59,.965)); color:#fff; box-shadow:0 20px 52px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.08); transform:none; opacity:0; transition:opacity .08s ease; backdrop-filter:blur(10px); } .dcTip.show { opacity:1; } .dcTip .t1 { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#facc15; font-weight:950; font-size:.8rem; letter-spacing:.04em; } .dcTip .t1 em { color:#94a3b8; font-style:normal; font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; } .dcTip .t2 { margin-top:6px; color:#e2e8f0; font-weight:900; font-size:.86rem; line-height:1.32; } .dcTip .t2.tGold { color:#f4c430; } .dcTip .t3 { margin-top:5px; color:#aebdd1; font-size:.74rem; font-weight:750; line-height:1.35; } /* Manhattan hover tip: light gold-trimmed card (white in light mode, --card in dark), one dot-led row per team. !important beats the inline styles echarts writes on its tooltip container; inner elements are ours alone so plain rules suffice. */ .manTip { background:var(--card) !important; border:1px solid rgba(198,146,0,.55) !important; border-radius:12px !important; padding:8px 10px 7px !important; color:var(--ink) !important; font-family:inherit !important; box-shadow:0 12px 30px rgba(2,6,23,.22), 0 2px 8px rgba(198,146,0,.14) !important; max-width:min(324px, 100vw - 120px) !important; } .manTip .mtHead { display:flex; align-items:center; gap:6px; font-weight:900; font-size:.78rem; line-height:1.2; letter-spacing:.02em; color:var(--ink); } .manTip .mtHead .mtOv { width:4px; height:11px; border-radius:2px; background:var(--gold); flex:none; } .manTip .mtRow { display:flex; align-items:center; gap:6px; margin-top:5px; font-size:.76rem; line-height:1.25; white-space:nowrap; } .manTip .mtDot { width:8px; height:8px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(2,6,23,.14); } .manTip .mtCode { font-weight:900; color:var(--ink); letter-spacing:.02em; } .manTip .mtScore { font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums lining-nums; font-weight:800; color:var(--ink); } .manTip .mtPill { font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums lining-nums; font-weight:900; font-size:.66rem; color:var(--gold); background:rgba(198,146,0,.12); border:1px solid rgba(198,146,0,.32); border-radius:999px; padding:1px 6px; } [data-theme="dark"] .manTip .mtPill { color:#e2ad3a; } .manTip .mtW { font-weight:900; font-size:.62rem; color:#fff; background:#f0525a; border-radius:999px; padding:1px 5px; letter-spacing:.02em; } .manTip .mtName { color:var(--muted); font-weight:700; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; max-width:150px; } .manTip .mtHint { margin-top:6px; padding-top:5px; border-top:1px dashed var(--line); color:var(--muted); font-size:.6rem; line-height:1.3; font-weight:700; letter-spacing:.03em; } .winMini { min-height:116px; display:flex; align-items:center; justify-content:center; padding:18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(198,146,0,.06)); color:var(--muted); font-weight:900; text-align:center; line-height:1.45; } .winMini b { display:block; color:var(--ink); font-size:1rem; margin-bottom:3px; } /* Squads · both XIs side by side (half-half); one Squads tap shows both teams. #squads (id) overrides the app-wide .grid2 560px-min so the two teams pair at any dossier width; stacks on phones. Row keeps name + career stat compact next to each other (no stretched name-to-stat gap), chevron sits right after. */ #squads { grid-template-columns:1fr 1fr; align-items:start; } @media (max-width:680px){ #squads { grid-template-columns:1fr; } } .sqRow { display:flex; align-items:center; gap:9px; padding:7px 4px; border-bottom:1px solid var(--line); cursor:pointer; text-decoration:none; color:inherit; } .sqRow:last-child { border-bottom:0; } .sqRow:hover { background:var(--soft); } .sqRow .sqMain { display:flex; flex-direction:column; min-width:0; flex:0 1 auto; } .sqRow .nm { font-weight:700; font-size:.86rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sqRow .sqRole { font-size:.66rem; font-weight:700; color:var(--muted); margin-top:1px; letter-spacing:.02em; } .sqRow .sqStat { margin-left:9px; font:800 .68rem/1 'Spline Sans Mono',monospace; color:var(--muted); white-space:nowrap; flex:0 0 auto; } .sqRow .sqStat b { color:var(--gold); } .sqRow .sqStat em { font-style:normal; font-weight:700; font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; opacity:.65; margin-right:4px; } .sqRow .chev { margin-left:6px; color:var(--muted); flex:0 0 auto; } /* captain / keeper chips on a squad row, and the Bench sub-heading */ .sqBadge { display:inline-block; margin-left:6px; padding:0 5px; border-radius:5px; font:900 .56rem/1.5 'Spline Sans Mono',monospace; letter-spacing:.03em; vertical-align:middle; } /* #goldenmarks · founder (26 Aug): the captain's C read as a dark box, "not like a captain". A luminous gold plate instead - pale gold ground, deep gold letter - token-mixed so it stays celebratory on the light theme and quietly rich on dark. */ .sqBadge.cap { background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 14%,var(--card)),color-mix(in srgb,var(--gold) 28%,var(--card))); color:color-mix(in srgb,var(--gold) 60%,var(--ink)); border:1.5px solid color-mix(in srgb,var(--gold) 70%,transparent); box-shadow:0 1px 4px rgba(198,146,0,.2); } .sqBadge.wk { background:var(--soft); color:var(--muted); border:1px solid var(--line); } .sqBench { margin:10px 0 2px; font:800 .62rem/1.4 'Spline Sans Mono',monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-top:1px dashed var(--line2,var(--line)); padding-top:9px; } .sqBench small { display:block; text-transform:none; letter-spacing:0; font-weight:600; font-size:.62rem; opacity:.7; margin-top:2px; } /* Match info · Cricbuzz-style label/value rows + officials group */ #matchInfo { padding:6px 4px; } .miRow { display:flex; gap:14px; align-items:baseline; padding:9px 6px; border-bottom:1px solid var(--line); } .miRow:last-child { border-bottom:0; } .miL { flex:0 0 40%; max-width:170px; color:var(--muted); font-weight:700; font-size:.78rem; } .miV { flex:1 1 auto; color:var(--ink); font-weight:700; font-size:.86rem; } .miV.miGold { color:var(--gold); font-weight:900; } .miSub { margin:14px 6px 2px; font:800 .62rem/1 'Spline Sans Mono',monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-top:1px dashed var(--line2,var(--line)); padding-top:11px; } .miLink { color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--gold); cursor:pointer; } .miLink:hover { color:var(--gold); } .miLink .miArrow { color:var(--gold); font-weight:900; } @media (max-width:520px){ .miL { flex-basis:44%; } } /* Manhattan · native horizontal scroll (thin gold scrollbar, Cricbuzz-style) with arrows flanking that nudge it ~5 overs. The chart is drawn wider than .manScroll. */ .manWrap { display:flex; align-items:stretch; gap:5px; } .manScroll { flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:rgba(198,146,0,.55) rgba(127,150,190,.12); } .manScroll::-webkit-scrollbar { height:9px; } .manScroll::-webkit-scrollbar-track { background:rgba(127,150,190,.1); border-radius:6px; margin:0 2px; } .manScroll::-webkit-scrollbar-thumb { background:rgba(198,146,0,.5); border-radius:6px; } .manScroll::-webkit-scrollbar-thumb:hover { background:rgba(198,146,0,.72); } .manArrow { flex:0 0 auto; align-self:center; width:24px; height:46px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--gold); font:900 1.15rem/1 'Spline Sans Mono',monospace; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s,border-color .15s,transform .1s; } .manArrow:hover { background:var(--soft,rgba(198,146,0,.08)); border-color:var(--gold); } .manArrow:active { transform:scale(.92); } /* Manhattan · tap-an-over detail card (gold), sits under the chart */ .manDetail { display:none; } .manDetail.on { display:block; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line2,var(--line)); } .mdHead { font:800 .64rem/1 'Spline Sans Mono',monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); } .mdHead span { color:var(--muted); margin-left:8px; letter-spacing:.04em; } .mdGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; } @media (max-width:520px){ .mdGrid { grid-template-columns:1fr; } } .mdTeam { border:1px solid var(--line); border-radius:11px; padding:11px 13px; background:linear-gradient(180deg,var(--field),var(--card)); } .mdTop { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .mdName { font:900 1rem/1 'Spline Sans Mono',monospace; } .mdOverRuns { font-size:.74rem; color:var(--muted); font-weight:700; } .mdOverRuns b { color:var(--gold); font-size:.92rem; } .mdOverRuns i { color:#e24b4a; font-style:normal; font-weight:800; } .mdScore { margin-top:5px; font:800 1.02rem/1 'Spline Sans Mono',monospace; color:var(--ink); } .mdScore small { color:var(--muted); font-size:.72rem; margin-left:6px; } .mdBats { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px 12px; } .mdBats a { font-size:.78rem; color:var(--ink2,var(--ink)); font-weight:700; text-decoration:none; cursor:pointer; } .mdBats a b { color:var(--gold); } .mdBats a:hover { color:var(--gold); } .mdBowl { margin-top:7px; font-size:.74rem; color:var(--muted); font-weight:700; } /* Manhattan tap-detail · dismissal line(s) for a wicket over: red W tag, the out batter, how, and who took it. Names open the same in-page player modal. */ .mdWkts { margin-top:8px; display:flex; flex-direction:column; gap:5px; } .mdWkt { display:flex; align-items:baseline; gap:7px; padding:6px 9px; border-radius:9px; border:1px solid rgba(220,38,38,.3); background:rgba(220,38,38,.07); font-size:.78rem; line-height:1.35; } .mdWkt .wTag { flex:0 0 auto; align-self:center; background:var(--red,#dc2626); color:#fff; font:900 .6rem/1 "Spline Sans Mono",monospace; padding:3px 6px; border-radius:5px; letter-spacing:.06em; } .mdWkt .wWho { font-weight:900; min-width:0; } .mdWkt .wWho a { color:var(--ink); text-decoration:none; cursor:pointer; } .mdWkt .wWho a:hover { color:var(--gold); } .mdWkt .wHow { color:var(--muted); font-weight:700; min-width:0; } .mdWkt .wHow a { color:var(--ink); font-weight:800; text-decoration:none; cursor:pointer; } .mdWkt .wHow a:hover { color:var(--gold); } @media (max-width:520px){ .mdWkt { flex-wrap:wrap; row-gap:2px; } } /* Player modal */ /* z-index sits ABOVE the dc-shell.js chrome (.dcTop 400 / .dcTicker 401 / search dropdown 420) so a tall modal's top (name + first rows) is never clipped behind the fixed global top-bar. Below the toast (1200). */ /* founder 29 Aug 2026 (phone photo): the player popup was open and the site FOOTER ("Methodology · Help · …") painted across its lower half, burying the Close button "somewhere under Methodology". Two causes, two belts: (1) the page BEHIND the modal could still scroll (overscroll chaining), so it sat at the footer; html.dcPmOpen now freezes it while the modal is up. (2) z-index 500 sat below page chrome on some WebViews - the modal now outranks every fixed band (tabbar 200, scrim 210, sheet 220, skip 2000). */ html.dcPmOpen, html.dcPmOpen body { overflow:hidden !important; } #pmodal { position:fixed; inset:0; z-index:2500; display:flex; align-items:center; justify-content:center; padding:20px; overscroll-behavior:contain; } .pmback { position:absolute; inset:0; background:rgba(2,6,16,.55); } .pmcard { position:relative; z-index:1; background:var(--card); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.4); border:1px solid var(--line); padding:20px 22px; max-width:430px; width:100%; max-height:88vh; overflow:auto; overscroll-behavior:contain; } .pmname { font-size:1.2rem; font-weight:800; margin-bottom:8px; } .pmrow { font-weight:700; padding:8px 0; border-top:1px solid var(--line); line-height:1.5; } /* 18 Aug 13:50 · the player modal reads in sections: a gold head names the section, the FIGURES are the bold thing, the rest steps back */ .pmSecHd { margin-top:12px; color:var(--gold,#c69200); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .pmSecHd + .pmrow { border-top:0; padding-top:5px; } .pmrow .pmTag { display:inline-block; margin-right:8px; color:var(--ink); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } /* 18 Aug 15:35 · context reads bold */ .pmrow .pmFig { font-family:'Spline Sans Mono',ui-monospace,monospace; font-weight:800; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; } /* founder 28 Aug 2026: "unke centuries aur 50s green me" - any fifty-plus figure in this popup reads in the house green, same voice as "not out". */ .pmrow .pmFig.ms, .dbsum b.ms { color:var(--green); } .pmrow .pmMeta { color:var(--muted); font-weight:600; font-size:.74rem; white-space:nowrap; } /* small enough to never wrap */ .pmrow .pmDis { display:block; margin-top:3px; color:var(--ink); font-weight:700; font-size:.8rem; } /* the dismissal owns its line - never splits mid-phrase */ .pmrow b { color:var(--gold); margin-right:8px; } /* founder 28 Aug 2026: the close lived at the content top and scrolled AWAY with it, surfacing "somewhere above Methodology" after a long ball-by-ball list. Both closers are sticky now - the x rides the top edge, the button rides the bottom edge, and one of them is ALWAYS on screen however long the list grows. */ .pmclose { position:sticky; top:2px; display:block; width:max-content; margin:0 0 -30px auto; border:0; background:var(--card); border-radius:9px; padding:2px 9px; color:var(--muted); font-size:1.5rem; cursor:pointer; line-height:1; z-index:6; } /* small bottom Close: reachable after scrolling a long modal, esp. on mobile */ .pmCloseBtm { position:sticky; bottom:6px; z-index:5; display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; min-width:132px; max-width:200px; height:40px; margin:14px auto 4px; padding:0 26px; border:1px solid var(--line); border-radius:999px; background:var(--card); box-shadow:0 -8px 16px rgba(0,0,0,.06); color:var(--muted); font:inherit; font-size:.85rem; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:color .15s,border-color .15s,background .15s; } .pmCloseBtm span { font-size:.7rem; line-height:1; opacity:.75; } .pmCloseBtm:hover { color:var(--ink); border-color:var(--gold,#c69200); background:rgba(198,146,0,.08); } .pmCloseBtm:active { transform:translateY(1px); } .hidden { display:none !important; } .empty { padding:30px; text-align:center; color:var(--muted); font-weight:700; } /* #51 · scorecard / bowling / partnerships tables FIT their panel at every width - table-layout:fixed kills the .tableWrap slider; name columns keep the slack and may wrap (dismissal sub-line, batter pairs); numeric cells ellipsis. */ .scBatT .tableWrap table, .scBowlT .tableWrap table, .scPartT .tableWrap table { width:100%; table-layout:fixed; } .scBatT .tableWrap th, .scBatT .tableWrap td, .scBowlT .tableWrap th, .scBowlT .tableWrap td, .scPartT .tableWrap th, .scPartT .tableWrap td { /* #scorebig (founder 15 Aug: "score ke numbers ka font thoda badha sakte hai"). .74 -> .82rem. The numbers ARE the scorecard; the labels above them can stay small, so the step goes to the figures and not to the furniture. */ font-size:.82rem; padding:6px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .scBatT .tableWrap th, .scBowlT .tableWrap th, .scPartT .tableWrap th { font-size:.64rem; letter-spacing:0; } /* the raw dot COUNT, kept beside its share for anyone who wants the tally */ .scBowlT .dotN { color:var(--muted); font-weight:700; font-size:.82em; margin-left:2px; } /* the batter's dot share rides UNDER the SR pill, one quiet line (founder, 25 Aug 2026: "SR me jagah hai, dot% fit kar do smartly without cluttering") */ /* khep 145 (founder: "the dot% doesn't look like our website's font"): the SR cell is mono for the pill; the share under it reads in the site's own face, Archivo, one size up */ .scBatT .srDot { display:block; margin-top:3px; font-family:Archivo,sans-serif; font-size:.66rem; font-weight:600; letter-spacing:0; color:var(--muted); } .scBatT .tableWrap th:first-child, .scBatT .tableWrap td:first-child { width:36%; white-space:normal; line-height:1.25; } .scBowlT .tableWrap th:first-child, .scBowlT .tableWrap td:first-child { width:30%; white-space:normal; line-height:1.25; } .scPartT .tableWrap th:nth-child(2), .scPartT .tableWrap td:nth-child(2) { width:34%; white-space:normal; line-height:1.25; } .scPartT .tableWrap th:last-child, .scPartT .tableWrap td:last-child { width:20%; white-space:normal; line-height:1.25; } /* founder 28 Aug 2026 (ENG scorecard): "SR wala column ka font chhota karo, ye shor kar raha hai" - the pill inherited the cell's full size at weight 800 mono, so a column of coloured 6-char numbers shouted over the names. Inside the scorecards it now speaks at .78em/700; the pill still says its one number, just quietly. */ .scBatT .tableWrap .hpill, .scBowlT .tableWrap .hpill, .scPartT .tableWrap .hpill { min-width:0; padding:2px 5px; font-size:.78em; font-weight:700; } /* Column balance (founder): a table-layout:fixed table split the 5 non-name columns EQUALLY, so 4s/6s wasted width while the SR heat-pill (e.g. "315.38") crammed against the card edge and looked cut. Give the numeric cells only what they need and hand the freed slack to SR, with real right padding so the pill never touches the border. */ .scBatT .tableWrap th:nth-child(2), .scBatT .tableWrap td:nth-child(2), .scBatT .tableWrap th:nth-child(3), .scBatT .tableWrap td:nth-child(3) { width:11%; } .scBatT .tableWrap th:nth-child(4), .scBatT .tableWrap td:nth-child(4), .scBatT .tableWrap th:nth-child(5), .scBatT .tableWrap td:nth-child(5) { width:8%; } .scBatT .tableWrap th:last-child, .scBatT .tableWrap td:last-child { width:23%; padding-right:11px; } /* Bowling: Econ heat-pill is the meaningful last cell (Dots hides on phones), give it the same room. */ .scBowlT .tableWrap td.heat, .scBowlT .tableWrap th:nth-child(6) { min-width:52px; } .scBowlT .tableWrap td.heat { padding-right:9px; } /* #dotclip · founder 24 Aug 2026 ("dot percentage wrap ho raha hai"): on DESKTOP a 2-innings match lays the scorecards TWO-UP (#scorecards is a 1fr/1fr grid, line ~260), so each panel gets roughly half the content column - and the bowling table had NO desktop column budget at all. table-layout:fixed then split the row evenly, and the last cell's ink ("70% 123": heat pill + raw dot tally) is the widest ink in the row, so it was the one that spilled past the wrap and looked cut. Same lesson as the phone budget below (19 Aug): a slider or a clip here is ONE column allocated too little, never "the table is too big". Budget (sums to 100): Bowler 33 · O 9.5 · M 7 · R 9 · W 6.5 · Econ 15 · Dot% 20 Scoped to min-width:721px so the audited phone budget below stays the only owner on phones, and Dot%'s share again comes out of the numeric columns, not the names. */ @media (min-width:721px){ #scorecards .scBowlT .tableWrap th:first-child, #scorecards .scBowlT .tableWrap td:first-child { width:33%; } #scorecards .scBowlT .tableWrap th:nth-child(2), #scorecards .scBowlT .tableWrap td:nth-child(2) { width:9.5%; } #scorecards .scBowlT .tableWrap th:nth-child(3), #scorecards .scBowlT .tableWrap td:nth-child(3) { width:7%; } #scorecards .scBowlT .tableWrap th:nth-child(4), #scorecards .scBowlT .tableWrap td:nth-child(4) { width:9%; } #scorecards .scBowlT .tableWrap th:nth-child(5), #scorecards .scBowlT .tableWrap td:nth-child(5) { width:6.5%; } #scorecards .scBowlT .tableWrap th:nth-child(6), #scorecards .scBowlT .tableWrap td:nth-child(6) { width:15%; } #scorecards .scBowlT .tableWrap th:nth-child(7), #scorecards .scBowlT .tableWrap td:nth-child(7) { width:20%; } #scorecards .scBowlT .tableWrap td:last-child .dotN { white-space:nowrap; } } /* Yet-to-bat / did-not-bat line under the batting table (founder). */ .scYet { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:9px 12px 3px; } .scYet .yLbl { color:var(--muted); font-size:.56rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; flex:0 0 auto; } .scYet .yList { color:var(--text2); font-size:.74rem; font-weight:600; min-width:0; } .scYet .yP { color:var(--text2); cursor:pointer; white-space:nowrap; } .scYet .yP:hover { color:var(--gold); } .scYet .ySep { color:var(--muted); opacity:.55; margin:0; } /* 19 Aug 2026: the join now carries a real space either side (a line CAN break there, so the list wraps instead of clipping); the 4px margin would have doubled the gap */ /* ── Premium scorecard · calm ledger + gold milestones ───────────────────── Subtle 1px COLUMN SEPARATORS (site-wide dossier .gtbl recipe): border-left on every cell EXCEPT the first (name) column - a faint guide via var(--line), not a heavy grid. border-right is zeroed on ALL cells first so the page-wide border-right rule cannot leave a stray outer line when a trailing column is display:none'd on phones (M / Dots / Ended). Every number in Spline Sans Mono tabular. 50+/100+ and 3W/5W rows get a faint gold wash + chip; the innings' top scorer / best bowler a slim gold left accent. */ .scBatT .tableWrap th, .scBatT .tableWrap td, .scBowlT .tableWrap th, .scBowlT .tableWrap td, .scPartT .tableWrap th, .scPartT .tableWrap td { border-right:0; } .scBatT .tableWrap th:not(:first-child), .scBatT .tableWrap td:not(:first-child), .scBowlT .tableWrap th:not(:first-child), .scBowlT .tableWrap td:not(:first-child), .scPartT .tableWrap th:not(:first-child), .scPartT .tableWrap td:not(:first-child) { border-left:1px solid var(--line); } .scBatT .tableWrap td:not(:first-child), .scBowlT .tableWrap td:not(:first-child) { font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums lining-nums; } .scBatT .tableWrap td:nth-child(2), .scBowlT .tableWrap td:nth-child(5) { font-weight:800; } tr.msRow50 > td { background:rgba(198,146,0,.05); } tr.msRow100 > td { background:rgba(198,146,0,.09); } tr.topPerf > td:first-child { box-shadow:inset 3px 0 0 var(--gold); } .scBatT tr.msRow50 td:nth-child(2), .scBatT tr.msRow100 td:nth-child(2), .scBowlT tr.msRow50 td:nth-child(5), .scBowlT tr.msRow100 td:nth-child(5) { color:var(--gold); font-weight:900; } /* flex-wrap so a wicket-haul / fifty chip that will not fit beside a long name on a narrow screen drops to the next line INSTEAD of overflowing the fixed-width name cell and getting clipped by its overflow:hidden. Wide screens still keep it inline. */ .nmTop { display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px 6px; min-width:0; } .msChip { flex:0 0 auto; display:inline-block; padding:1px 6px; border-radius:6px; white-space:nowrap; font:900 .58rem/1.5 "Spline Sans Mono",monospace; letter-spacing:.02em; } .msChip.ms50 { color:var(--gold); border:1px solid rgba(198,146,0,.5); background:rgba(198,146,0,.1); } /* #goldenmarks · the bigger the innings, the BRIGHTER the mark - never darker. The old solid-gold/near-black chip read as a sad box next to the airy 50 chip. */ .msChip.ms100 { background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 14%,var(--card)),color-mix(in srgb,var(--gold) 28%,var(--card))); color:color-mix(in srgb,var(--gold) 60%,var(--ink)); border:1.5px solid color-mix(in srgb,var(--gold) 70%,transparent); font-size:.64rem; box-shadow:0 1px 4px rgba(198,146,0,.22); } .dis .notout { color:var(--green); font-weight:800; } .dis .notout::before { content:'● '; font-size:.55em; vertical-align:2px; } .scSub { display:flex; align-items:center; gap:7px; } .scSub::before { content:''; flex:0 0 auto; width:14px; height:3px; border-radius:2px; background:var(--gold); } @media (max-width:1100px){ .quickGrid, .quickGrid.quickGrid6 { grid-template-columns:repeat(2,1fr); } .grid2, #scorecards, .crease { grid-template-columns:minmax(0,1fr); } } @media (max-width:720px){ .wrap { padding:16px 12px 42px; } h1 { font-size:1.35rem; } .hero { padding:20px 18px; } /* founder 19 Aug 2026 (England vs Pakistan at Headingley, phone, dark): the match container sat INSIDE the league rail's footprint - the rail runs edge to edge while the card kept the wrap's 12px inset, so the card read as something the rail was holding. Same phone bleed recipe every other data surface uses (dc-mobile.css: margin-left calc + width 100vw); the gold hero ring steps down to the neutral line hairline here, because a bled frame's gold edge becomes an edge-to-edge divider (founder, 18 Aug 15:35). Nothing is added above it: #lgTabsHost's min-height (50px, dc-mobile.css) already swallows the rail bar's own bottom margin, so rail and card meet with no gutter - measured 0.2px before and after this rule. */ #heroSec { /* founder 19 Aug 2026, second look: bled to both edges the card read as one mass with the rail above it, so the two now show a seam. 10px, not a new number: it is the rail bar's OWN designed bottom margin (.dcLgBar margin:4px 0 10px, phones), which #lgTabsHost's min-height:50px swallows - this gives the rail back the space it was drawn with, and stays under the 14px gutter he asked me to close. A gap, not a divider line: at 0 the card's own 1px var(--line) ring was already sitting against the rail's own border and the two still read as one block, so a second hairline would have added a line, not a separation. */ margin-top:10px; margin-left:calc(50% - 50vw); margin-right:0; width:100vw; max-width:100vw; border-radius:0 !important; box-shadow:0 0 0 1px var(--line), var(--shadow, 0 10px 30px rgba(15,23,42,.05)) !important; } .panel { padding:15px 14px; } /* ===================================================================== ONE RULE FOR THIS PAGE ON A PHONE (founder 19 Aug 2026: "bleed this page neatly and beautifully"). Extend THIS rule; do not invent a third pattern. SURFACES REACH THE GLASS. WORDS AND CHIPS KEEP THE PANEL'S INSET. A SURFACE is anything that carries data on its own ground: the live card, the section-tab row, every .panel.card, the innings summary band, every table. WORDS AND CHIPS are headings, labels, sentences and pill rows. COROLLARY, and the whole reason this block exists: a surface never nests inside another surface with a visible edge. The innings panel already bled (dc-mobile.css, `.lmTab .panel.card`), but the summary chip and the two tables inside it kept a 1px border and a 13px radius - so a 375px screen showed THREE nested frames (page, panel, table) and the Scorecard tab argued with the live card above it. Bled, those three lose their SIDE border and radius and become bands of the panel; their top and bottom hairlines stay, so every group still has an edge to read. Same recipe as everywhere else on the site (margin-left calc + 100vw). It needs no magic number here: the panel's content box is already centred on the viewport, so calc(50% - 50vw) resolves to exactly the panel's own padding, whatever that padding later becomes. NOT BLED, on purpose, and the reasons are in the report: - the "Scorecards" head. Words. Bleeding it turns the gold hairline under it into a full-width divider, the exact thing the founder rejected on 18 Aug ("golden divider bahut chamak raha hai"). - the innings pills. `.teamTabs` WRAPS, it does not scroll, so bleeding it strands the chips on the glass at x=0 with nothing to align to and gains no room, because nothing was overflowing. DESKTOP IS UNTOUCHED: this whole block is @media (max-width:720px). ===================================================================== */ #scorecards .scoreTitle, #scorecards .scBatT > .tableWrap, #scorecards .scBowlT > .tableWrap { margin-left:calc(50% - 50vw); margin-right:0; width:100vw; max-width:100vw; border-left:0; border-right:0; border-radius:0; } /* The frame gave up its inset; the NUMBERS may not. The outer cells carry it back at 14px - the SAME 14px the panel gives every other block in this tab - so the summary band, the labels, Yet to bat, Fall of wickets and the first and last column of both tables all read down ONE margin. */ #scorecards .scBatT > .tableWrap th:first-child, #scorecards .scBatT > .tableWrap td:first-child, #scorecards .scBowlT > .tableWrap th:first-child, #scorecards .scBowlT > .tableWrap td:first-child { padding-left:14px; } #scorecards .scBatT > .tableWrap th:last-child, #scorecards .scBatT > .tableWrap td:last-child, #scorecards .scBowlT > .tableWrap th:last-child, #scorecards .scBowlT > .tableWrap td:last-child { padding-right:14px; } /* ...and the words line up in ONE column. Yet-to-bat carried its own 12px on top of the panel's, which put it 26px in while the labels beside it sat at 14px. The rule says words keep the PANEL's inset - one inset, not two. */ #scorecards .scYet { padding-left:0; padding-right:0; } /* founder 19 Aug 2026: close the gutter between the Scorecards head and the panel. EVERY PIXEL OF THAT STACK, measured at 375 before anything moved (and note the order - the innings pills sit BELOW this head, not above it, they are the first child of #scorecards): head bottom 8px the head's own margin-bottom 36px the innings pills (CONTENT, not gutter - untouched) 12px .teamTabs margin-bottom 16px #scorecards grid row-gap = 72.7px, of which 36px is empty space and 36.7px is the pills. Only the empty space is cut, and only on phones: 12 -> 6 and 16 -> 10, with the head's own margin 8 -> 6 above. The pills keep their full height. The grid gap is also the gap BETWEEN two innings panels, which is why this is scoped to the phone block - the desktop 2-up keeps its 16px. */ #scorecards { gap:10px; } #scorecards .teamTabs { margin-bottom:6px; } /* #everyballbleed (founder 19 Aug 2026, on a T20 room, phone: this page is the page for every ball and it should be full bleed - and wherever else the every-ball page shows up, bleed that too). This EXTENDS the rule above; it is not a third pattern. WHAT WAS ACTUALLY HOLDING THE GUTTER, measured at 375 in the browser before anything moved (computed style, not read off the source): div.panel.card 0 .. 375 margin-left -12px, width 375 <- ALREADY bled, by dc-mobile.css `.lmTab .panel.card` #ballTimeline 14 .. 361 the panel's OWN phone padding .inningsArchive 14 .. 361 plus a 1px ring and a 14px radius So the outer card already reached the glass and the every-ball surface inside it did not. Two things made the 14px, and only one of them is where you would first look: `.panel` is declared TWICE at equal specificity in this file - `padding:18px 20px` in the base block and `padding:15px 14px` inside this @media - and the LATER one is the one in force (computed padding-left resolved to 14px, not 20px). Reading the first declaration would have sent this fix to the wrong number. Which is precisely the corollary the block above states: a surface never nests inside another surface with a visible edge. Bled, the archive loses its SIDE border and its radius and becomes a band of the panel; its top and bottom hairlines stay, so every innings still has an edge to read. ONE rule reaches EVERY render site, because there is one mount (#ballTimeline) and renderBallTimeline builds four shapes through it: the limited-overs lanes, the Test per-innings chapters (2-up columns on desktop, stacked here), the Test single-column `.inningsArchiveWrap` fallback, and the cb-lite / warming room, which calls the same function. No magic number is needed at any of them: the archive's containing block is centred on the viewport, so calc(50% - 50vw) resolves to exactly the inset above it, at any depth and straight through the `.lvEBCols` grid. THE WORDS DO NOT MOVE. The innings head and the lane carry the panel's 14px back, the same 14px every other block in this room is given, so head, lane head and phase cards all read down ONE margin and nothing touches the glass. `.ballPhase` WAS held back here, on the reasoning that a bled frame has no side border and its 3px left border was the mark naming the phase. The founder looked at that on 20 Aug and overruled it; see #phaserowbleed below, which bleeds the phase rows too and moves the colour off the edge and into the row. `.ballOver` keeps its own 9px padding untouched throughout. And `.ballTimeline`'s own inset border-top goes: the archive's top hairline now runs the full width 12px below it, and two parallel rules of different lengths stacked that close is the exact disagreement this whole block exists to remove. */ #ballTimeline { border-top:0; padding-top:0; margin-top:12px; } #ballTimeline .inningsArchive { margin-left:calc(50% - 50vw); margin-right:0; width:100vw; max-width:100vw; border-left:0; border-right:0; border-radius:0; } #ballTimeline .inningsArchive > summary { padding-left:14px; padding-right:14px; } #ballTimeline .inningsArchive .ballLane { padding-left:14px; padding-right:14px; } /* #phaserowbleed (founder 20 Aug 2026, looking at the shipped bleed on staging: the ball-by-ball is still very far off the left and a marker is being drawn inside it - do the phase rows the same way, let them bleed, and the columns get room to breathe). This OVERRULES the "NOT BLED, on purpose" note above; that note has been corrected rather than left standing to contradict this one. WHAT HE WAS LOOKING AT, measured at 375 before this rule moved anything: .ballPhase L14 R361 padding 12 border 1/1/1/3 radius 14 bg card summary.phaseHead L29 R348 padding 11px 12px border 1px radius 12 bg gold .07 the word POWERPLAY starts at x=42 Two frames, one inside the other, each with its own border, its own radius and its own padding, and 42px of a 375px phone spent before the phase is even named. That inner pill is the marker he means. WHICH FRAME SURVIVES: the OUTER one. `.ballPhase` is the row itself - it carries the head, the KPI tiles, every over card and the phase story, and it is the box the bleed has to move. The inner pill carried nothing but its own decoration, so it collapses INTO the row: fill, border and radius gone, and its 12px of horizontal padding gone with them. Its job as a tap target does not depend on the pill and is untouched - the gold caret badge and the open/close word are drawn on the caret span, not on the frame - and its own box stays 49px tall, over the 44px a thumb needs. BANDS, NOT FLOATING CARDS. A bled row has no side edges, so its top hairline is the whole of its edge. margin-top drops to 0 and each row carries one border-top, so two consecutive phases share a single rule instead of showing two hairlines 12px apart. Same recipe as everywhere else on this page: margin-left calc + 100vw. HOW THE PHASE COLOUR SURVIVES. The spine was a border, and a bled frame has no side border - so the colour comes off the edge and moves into the row. The phase NAME takes it, and wears the site's own existing coloured-dash mark before it (the `.scSub::before` recipe: a 14x3 rounded bar, here in currentColor so one declaration follows the name's colour). Gold powerplay and new ball, blue middle and old ball, red death - the same three colours the spine carried, now sitting at the head of the line the eye already reads, and 14x3 at x=14 rather than 3x40 hidden at the edge. The row is NOT tinted: the background stays var(--card), so the figures, the KPI tiles and the over cards keep every bit of the contrast they had. No icon, no emoji, no wash. */ #ballTimeline .ballPhase { margin:0; margin-left:calc(50% - 50vw); margin-right:0; width:100vw; max-width:100vw; border:0; border-top:1px solid var(--line); border-radius:0; padding:0 14px 13px; } #ballTimeline details.ballPhase:not([open]) { padding-bottom:0; } #ballTimeline details.ballPhase > summary.phaseHead { background:none; border:0; border-radius:0; min-height:0; padding:13px 0 9px; margin-bottom:6px; } #ballTimeline details.ballPhase:not([open]) > summary.phaseHead { padding-bottom:13px; margin-bottom:0; } #ballTimeline details.ballPhase > summary.phaseHead:hover, #ballTimeline details.ballPhase > summary.phaseHead:active { background:none; } #ballTimeline .ballPhase > summary.phaseHead > b { display:inline-flex; align-items:center; } #ballTimeline .ballPhase > summary.phaseHead > b::before { content:''; flex:0 0 auto; width:14px; height:3px; border-radius:2px; margin-right:9px; background:currentColor; } #ballTimeline .ballPhase.powerplay > summary.phaseHead > b, #ballTimeline .ballPhase.newball > summary.phaseHead > b { color:var(--gold); } #ballTimeline .ballPhase.middle > summary.phaseHead > b, #ballTimeline .ballPhase.oldball > summary.phaseHead > b { color:var(--blue,#2563eb); } #ballTimeline .ballPhase.death > summary.phaseHead > b { color:var(--red,#dc2626); } .quickGrid, .quickGrid.quickGrid6 { grid-template-columns:repeat(2,1fr); } .kick { flex-wrap:wrap; gap:8px; } .kick .t { font-size:1.18rem; } .chart { height:280px; } .deliveryInspector .diGrid, .phasePulse { grid-template-columns:repeat(2,minmax(0,1fr)); } /* #51 · phones: tighter type + drop the low-value columns so everything fits - Bowling loses M + Dots (O·R·W·Econ tell the story), Partnerships loses Ended. */ .scBatT .tableWrap th, .scBatT .tableWrap td, .scBowlT .tableWrap th, .scBowlT .tableWrap td, .scPartT .tableWrap th, .scPartT .tableWrap td { font-size:.74rem; padding:5px 2px; } /* Phones keep Dot% and lose M instead: a maiden count is a by-product of the dot share, and the share is the number the colour is speaking about. The raw tally beside it drops here - no room, and the percentage is the point. */ .scBowlT .tableWrap th:nth-child(3), .scBowlT .tableWrap td:nth-child(3) { display:none; } .scBowlT .dotN { display:none; } .scPartT .tableWrap th:last-child, .scPartT .tableWrap td:last-child { display:none; } .scPartT .tableWrap th:nth-child(2), .scPartT .tableWrap td:nth-child(2) { width:44%; } /* #scorefit · phones (founder 14 Aug): calmer name step (.95 -> .86 base) and a column rebalance - the batter name column takes 42% (was 36%) so long names barely shrink, funded by the SR column's slack (23% -> 17%); bowling name 30% -> 36% the same way. Desktop widths untouched. */ .nmCell .nmTop a.sqRow { font-size:.8rem; } /* founder 17 Aug 2026 20:05: names a point or two smaller on a phone; khep 145: never smaller than this */ /* #scoretight · founder 15 Aug, live SL-IND scorecard on a phone: the bowler names were pinned at the shrink floor (9.1px) AND still clipped, because the name column held 30% while O/R/W/Econ each took 51px for values like "4.0", "11" and "0". Numbers are given exactly the room their widest value needs and the slack goes to the names. Measured on prod before and after. */ /* founder 17 Aug 2026 20:05 (SL scorecard on a phone): "4S" and "6S" heads were cut to "4…" / "6…" and the SR pill trailed a "…" - 7% columns and a 15% SR cell could not hold a two-letter head plus its sort mark or a five-digit pill. Widths rebalanced (names a step smaller pay for it) and the HEADS never ellipsize. */ .scBatT .tableWrap th:first-child, .scBatT .tableWrap td:first-child { width:41%; } .scBatT .tableWrap th:nth-child(2), .scBatT .tableWrap td:nth-child(2), .scBatT .tableWrap th:nth-child(3), .scBatT .tableWrap td:nth-child(3) { width:10%; } .scBatT .tableWrap th:nth-child(4), .scBatT .tableWrap td:nth-child(4), .scBatT .tableWrap th:nth-child(5), .scBatT .tableWrap td:nth-child(5) { width:9.5%; } .scBatT .tableWrap th:last-child, .scBatT .tableWrap td:last-child { width:20%; } .scBatT .tableWrap th, .scBowlT .tableWrap th, .scPartT .tableWrap th { overflow:visible; text-overflow:clip; letter-spacing:0; padding-left:2px; padding-right:2px; } .scBatT .tableWrap td:last-child, .scBowlT .tableWrap td.heat { overflow:visible; text-overflow:clip; } .scBowlT .tableWrap th:first-child, .scBowlT .tableWrap td:first-child { width:48%; } /* ===================================================================== BOWLING COLUMN BUDGET, phones (founder 19 Aug 2026, approved after two goes). The seven columns SUM to 100 (M is display:none above): Bowler 48 O 9.5 R 8 W 6 Econ 13 Dot% 15.5 READ THIS FIRST IF A TABLE HERE EVER GROWS A SIDEWAYS SLIDER: THE SCROLL IS A HEADER, NOT A TABLE. These tables are `table-layout:fixed`, which means content can NEVER widen a column - a cell that does not fit just spills out of its own box. So a slider under one of our tables is never "the table is too big for the screen". It is ONE LABEL sticking out of a column that was allocated too little, and the fix is to give that column its share. We learned this the expensive way: the first attempt bled the table to both screen edges to "make room", which handed the table 30px more and moved the overflow by exactly zero, because the container and the table grew together while the same head kept spilling the same 49px. To find the culprit in one minute: for each th and td, compare `cell.getBoundingClientRect().left + cell.scrollWidth` against the wrap's clientWidth. Whatever pokes past is your column. Until tonight Dot% (the 7th) was allocated NOTHING - the five sized columns claimed the whole 100% between them - so it rendered at 0px and its head hung 48px past the table's right edge at every phone width. Every other surface already declares this column (see mc-page.css); the live room was the one that did not. WHY THESE SIX NUMBERS. Each column is sized against its own WIDEST INK plus its padding, and for a head that is the HEAD's ink, not the value's - the mistake that cost us the first pass. Heads are `overflow:visible; text-overflow:clip` on purpose here (founder 17 Aug: a head must never ellipsize to "4..."), so a head that does not fit does not shorten, it sticks out. Measured at 360px, the narrowest width we ship to, in the cells' own computed fonts: column head ink widest value needs gets at 360 Bowler 48.6 (names wrap) 64.6 172.8 (48%, NOT to be reduced - tuned after the 15 Aug name-clipping incident) O 8.9 "60.0" 28.4 32.4 34.2 (9.5%) R 7.8 "184" 21.3 25.3 28.8 (8%) W 11.6 "10" 14.2 18.2 21.6 (6%) Econ 32.7 "5.25" 28.4 46.0 46.8 (13%, clears the 46px floor below by 0.8px) Dot% 34.8 "71%" 21.3 50.8 55.8 (15.5%; 2px left pad + 34.8 head + the 14px page-rule inset on the right) Dot%'s share comes out of the four numeric columns beside it. It never comes out of the names. NAMED SUSPECT, NOT TOUCHED HERE - THE HEAD FONT IS BIGGER ON A PHONE THAN ON DESKTOP. The phone rule above sets `font-size:.74rem` on `th` as well as `td`, which overrides the base `th { font-size:.64rem }` for heads too. So "Dot%" renders at 11.84px on a phone against 10.24px on a desktop: the head is ~16% wider exactly where there is least room, which is a large part of why this column would not fit. That looks unintended, but it moves EVERY head in EVERY table on this page, so it does not get changed as a side effect of a column budget. It needs its own pass, with the founder seeing what it does to each table before anything moves. ===================================================================== */ .scBowlT .tableWrap th:nth-child(2), .scBowlT .tableWrap td:nth-child(2) { width:9.5%; } .scBowlT .tableWrap th:nth-child(4), .scBowlT .tableWrap td:nth-child(4) { width:8%; } .scBowlT .tableWrap th:nth-child(5), .scBowlT .tableWrap td:nth-child(5) { width:6%; } .scBowlT .tableWrap th:nth-child(6), .scBowlT .tableWrap td:nth-child(6) { width:13%; } .scBowlT .tableWrap th:nth-child(7), .scBowlT .tableWrap td:nth-child(7) { width:15.5%; } .scBowlT .tableWrap td.heat, .scBowlT .tableWrap th:nth-child(6) { min-width:46px; } } /* #51 · narrow phones: shrink the heat pill so 6-char values (189.18 / econ / RR) never clip - pills fit rather than the fixed-layout cell cutting digits. */ @media (max-width:400px){ .scBatT .tableWrap .hpill, .scBowlT .tableWrap .hpill, .scPartT .tableWrap .hpill { font-size:.56rem; padding:1px 1px; letter-spacing:-.01em; } } /* Batter duel: every ball a batter faced, bowler by bowler (dot-circle style) */ .pmcard{max-width:640px} .duelSec{margin-top:16px;border-top:1px solid var(--line);padding-top:14px} .duelHd{font-size:.95rem;color:var(--ink,#eef2fb);font-weight:900;letter-spacing:-.01em} .duelHd .mark{color:var(--gold,#c69200)} .duelHd .e{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#c69200);font-weight:800;margin-bottom:3px} .duelLeg{display:flex;gap:13px;flex-wrap:wrap;font-size:.66rem;color:var(--muted);margin:9px 0 13px;align-items:center} .duelLeg span{display:inline-flex;align-items:center;gap:5px} .duelLeg i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);display:inline-block;flex:0 0 auto} .duelLeg i.l1{background:rgba(63,176,121,.16);border-color:rgba(63,176,121,.55)} .duelLeg i.l4{background:rgba(63,139,242,.16);border-color:rgba(63,139,242,.55)} .duelLeg i.l6{background:rgba(226,173,58,.2);border-color:rgba(226,173,58,.6)} .duelLeg i.lw{background:rgba(240,82,90,.16);border-color:rgba(240,82,90,.6)} .duelLeg i.lx{border-style:dashed} .dsum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .dsum .c{background:rgba(127,150,190,.08);border:1px solid var(--line);border-radius:9px;padding:6px 12px;font-size:.7rem;color:var(--muted)} .dsum .c b{color:var(--ink,#eef2fb);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums} /* NAME COLUMN IS A MINIMUM, NOT A CAGE (founder, 13 Aug 2026: 'Taskin Ahmed kata hua hai jabki aage jagah hai') - same minmax lesson the bowling ledger's score column learned: the name takes the room it needs, ordinary rows still align. */ .duelRow{display:grid;grid-template-columns:minmax(116px,max-content) minmax(0,1fr) minmax(0,40%);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} /* BUILD194: the summary column capped, the balls keep their row */ .duelRow:last-child{border-bottom:0} .duelRow .bwl{font-weight:800;font-size:.9rem;color:var(--ink,#eef2fb);line-height:1.25} /* #61 · the "other player" in a duel row is clickable -> opens THEIR modal (full match balls, not just this pairing). Keeps the .bwl look, adds a click affordance. */ /* CLICKABLE NAMES READ AS CLICKABLE (founder, 13 Aug 2026: "players ke font ka color dikhna chahiye ki ye click kar sakte hain" - concept from the other site, the colour our own). EVERY name that opens the player modal wears the site's gold; hover underlines. One attribute selector so no call site is ever missed. */ a[onclick*="showPlayer"]{color:var(--gold2,var(--gold,#c69200)) !important;text-decoration:none;cursor:pointer} a[onclick*="showPlayer"]:hover{text-decoration:underline} /* founder 28 Aug 2026, popup review: "write the batsman's names in black, who ever said golden?" - names read as INK; the dashed line stays as the only tap hint. */ .duelRow .bwl .lmDuelName{color:var(--ink);text-decoration:none;cursor:pointer;border-bottom:1px dashed rgba(120,130,150,.55)} .duelRow .bwl .lmDuelName:hover{border-bottom-style:solid;color:var(--gold,#c69200)} .duelBalls{display:flex;gap:6px;flex-wrap:wrap;min-width:0} .dball{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800; border:1.5px solid var(--line);color:var(--muted);background:transparent;font-variant-numeric:tabular-nums;flex:0 0 auto} .dball.r1,.dball.r2,.dball.r3{background:rgba(63,176,121,.16);border-color:rgba(63,176,121,.5);color:#3fb079} .dball.r4{background:rgba(63,139,242,.16);border-color:rgba(63,139,242,.5);color:#4f97f5} .dball.r6{background:rgba(226,173,58,.2);border-color:rgba(226,173,58,.6);color:var(--gold,#e2ad3a)} .dball.rw{background:rgba(240,82,90,.16);border-color:rgba(240,82,90,.6);color:#f0525a} .dball.rx{border-style:dashed;font-size:9.5px;letter-spacing:-.02em;min-width:26px;width:auto;padding:0 4px;border-radius:13px} .dbsum{font-size:.78rem;color:var(--muted);text-align:right;white-space:normal;font-variant-numeric:tabular-nums;min-width:0} /* BUILD194: may wrap inside its capped column */ .dbsum b{color:var(--gold2,var(--gold,#e2ad3a));font-size:1.05rem;font-weight:800} .dbsum .out{color:#ff9ba1;font-weight:800} .dbsum .outWho{color:var(--muted);font-size:.72rem;font-weight:600;white-space:normal} /* Phones: the summary line (runs off balls, SR, out) reads BEFORE the ball circles. A Test batter can face 300+ balls; the verdict must not hide below them. */ @media(max-width:560px){ /* crease lines stack on phones: the name keeps its size on its own line, the figure row drops under it a step smaller - no mid-name wrapping, no fight for one row (founder, 13 Aug 2026) */ .batLine{flex-direction:column;align-items:flex-start;gap:2px} .batLine .bv{font-size:.82em} } @media(max-width:520px){.duelRow{display:flex;flex-direction:column;align-items:stretch;gap:6px}.duelRow .bwl{order:1}.duelRow .dbsum{order:2;text-align:left;white-space:normal}.duelRow .duelBalls{order:3}} /* Marathon Test rows: cap the circle block and scroll inside it so one long innings cannot swallow the whole modal. Limited-overs rows never reach this cap (a bowler bowls at most 60 balls to one batter in an ODI). */ .duelBalls.many{max-height:138px;overflow-y:auto;padding-right:4px;overscroll-behavior:contain} /* Test duels: innings sub-heading when a player batted or bowled in both innings */ /* 18 Aug 15:35 founder: the context lines carry the reader - innings labels read BOLD */ .duelInn{margin:12px 0 2px;padding-top:10px;border-top:1px dashed var(--line);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);font-weight:900} .duelInn b{color:var(--gold,#c69200);font-weight:900} /* Chase hero: need / required-rate with a par-line track (new) */ /* BUILD194 (UI, 17 Sep 2026; the founder's phone, 22:2x, on the chase card: "ye bhi odd lag raha hai ... ankho ko chubhta hai"): the card was a flex row with the need on the left, two loose figures beside it and a half-empty right side. Now: the need line on top (the hook, the number in gold), and under it ONE row of four even tiles across the whole card - balls left, wkts in hand, overs, req. rate - each a quiet soft tile with its label. Ink for the figures, gold for the overs, the site's red for a required rate the chase is behind (the old pale pink was unreadable on the light card). */ .chaseHero{display:grid;gap:12px;margin:16px 0 0; background:rgba(226,173,58,.06);border:1px solid var(--line);border-radius:13px;padding:14px 16px} .chaseHero .chNeed{font-size:1rem;color:var(--ink,#eef2fb);font-weight:700} .chaseHero .chNeed b{color:var(--gold,#e2ad3a);font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .chaseHero .chNeed .sub2{color:var(--muted);font-size:.85rem;font-weight:600} .chaseHero .chRight{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:left} .chaseHero .chRight .chGrp{text-align:left;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:8px 10px;min-width:0} .chaseHero .chRight .chV{font-size:1.25rem;font-weight:800;color:var(--ink,#eef2fb);font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap} .chaseHero .chRight .chV.chRr.behind{color:var(--red,#dc2626)} .chaseHero .chRight .chL{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-top:2px;line-height:1.25} /* THE OVERS, BIG (founder, 12 Aug 2026 night: "jo over kitna hua hai use highlight aur thoda bada karo, dikh nahi raha" - beside the other site's bold "(64 Balls)" our overs-done hid at .64rem inside a tile). Gold, the site's own emphasis; the /total rides small so the big figure stays the moving number a live watcher tracks ball by ball. */ .chaseHero .chRight .chV.chOv{color:var(--gold,#e2ad3a)} /* the innings tiles' own gold overs - founder 13 Aug: '140-7 ke thik baad overs, gold me' */ .innOv{color:var(--gold2,var(--gold,#e2ad3a));font-weight:800;font-size:.68em;letter-spacing:0} .chaseHero .chRight .chV.chOv i{font-style:normal;font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:0} @media (max-width:400px){ .chaseHero .chRight{gap:6px} .chaseHero .chRight .chGrp{padding:7px 6px} .chaseHero .chRight .chV{font-size:1.05rem} .chaseHero .chRight .chL{font-size:.52rem;letter-spacing:.04em} } .chTrack{position:relative;height:9px;border-radius:999px;background:rgba(127,150,190,.13);margin:12px 2px 0} .chTrack .chFill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#2c72d6,#3f8bf2);min-width:3px} .chTrack .chReq{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold,#e2ad3a);box-shadow:0 0 7px rgba(226,173,58,.7)} .chLabels{display:flex;justify-content:space-between;margin:8px 2px 2px;font-size:.68rem;color:var(--muted)} .chLabels b{color:var(--ink,#eef2fb)} .chDone{margin:16px 0 0;background:rgba(63,176,121,.09);border:1px solid var(--line);border-radius:13px;padding:13px 16px;font-size:1rem;color:var(--ink,#eef2fb);font-weight:700} /* Test 4th-innings chase: the tiles above are the evidence, this is the verdict, so it sits directly under them and carries the biggest number in the hero. Deliberately NO required rate or overs-left: the payload has no over budget or day clock, and a computed rate would be a guess printed as fact. */ .tChase{margin-top:16px;padding:15px 18px 16px;border:1px solid rgba(198,146,0,.3);border-radius:14px;background:rgba(198,146,0,.055)} .tChase .tcK{color:var(--gold);font-size:.66rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase} .tChase .tcNeed{margin-top:7px;font-size:1.16rem;font-weight:800;color:var(--ink);line-height:1.35;overflow-wrap:break-word} .tChase .tcNeed b.mono{color:var(--gold);font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1;padding:0 2px} .tChase .tcSub{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px 16px;color:var(--muted);font-size:.82rem;font-weight:700} .tChase .tcSub b.mono{color:var(--gold);font-weight:800} /* the headline number must stay whole on a 320px phone, so it shrinks a step */ @media (max-width:380px){ .tChase .tcNeed{font-size:1.02rem} .tChase .tcNeed b.mono{font-size:1.7rem} } /* Clickable phase (powerplay / middle / death) - tap the header to open its balls */ details.ballPhase > summary.phaseHead{cursor:pointer;list-style:none;padding-right:4px} details.ballPhase > summary.phaseHead::-webkit-details-marker{display:none} details.ballPhase > summary.phaseHead > span::after{content:' \25BE';color:var(--gold,#e2ad3a);font-weight:900} details.ballPhase:not([open]) > summary.phaseHead > span::after{content:' \25B8'} details.ballPhase:not([open]) > summary.phaseHead{margin-bottom:0} details.ballPhase:not([open]){padding-bottom:13px} details.ballPhase > summary.phaseHead:hover > b{color:var(--gold,#e2ad3a)} /* Both-innings scoring comparison - COMPACT, sits half-width beside highlights */ .cmpGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch} @media(max-width:820px){.cmpGrid{grid-template-columns:1fr}} .cmpHead{display:flex;align-items:center;justify-content:space-between;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:11px} .cmpRow{display:grid;grid-template-columns:46px 30px 1fr 30px;align-items:center;gap:9px;padding:5px 0} .cmpRow .cmpL{font-size:.66rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .cmpRow .cmpV{font-family:"Spline Sans Mono",monospace;font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums} .cmpRow .cmpV.a{color:var(--gold,#e2ad3a);text-align:right} .cmpRow .cmpV.b{color:#4f97f5} .cmpBar{display:flex;height:7px;border-radius:999px;overflow:hidden;background:rgba(127,150,190,.12)} .cmpBar .cmpA{background:rgba(226,173,58,.85)} .cmpBar .cmpB{background:rgba(63,139,242,.85)} .cmpFoot{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink,#eef2fb)} .cmpFoot b{color:var(--gold,#c69200)} .hlCard{display:flex;flex-direction:column;gap:9px} .hlCard .hlHd{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px} .hlRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(127,150,190,.04)} .hlRow .hlL{font-size:.61rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .hlRow .hlV{font-size:.85rem;font-weight:800;color:var(--ink,#eef2fb);text-align:right} .hlRow .hlV small{color:var(--muted);font-weight:700} /* This-over ball tracker (at the crease) */ .thisOver{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} /* the "This over" mini panel reuses the every-delivery ball dots; on this small card let them wrap (an over with extras can run to 7-8 balls). */ .thisOverDots{flex-wrap:wrap;margin-top:10px} .dball.rex{background:rgba(226,173,58,.14);border-color:rgba(226,173,58,.45);color:var(--gold,#e2ad3a);font-size:9px} /* Cosmetic pass (founder-approved): quiet broadcast polish site-wide */ .hero{position:relative} /* The 3px gold accent bar that used to sit at top:0 is GONE (founder 2026-07-28, and he had raised it before): .card.hero already draws a 1.5px gold ring around the whole card (line ~50), so the bar stacked a second gold line directly on top of it and the card read as double-bordered along its top edge only. The ring alone is the identity. */ .kick .t{letter-spacing:-.012em} .panel .panelHead h2{letter-spacing:-.01em} /* section titles get a thin gold hairline to the edge */ .kick{position:relative;padding-bottom:11px} .kick::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(226,173,58,.42),rgba(226,173,58,0) 42%)} /* panels get a faint gold top-edge + soft top wash */ .panel{position:relative;background:linear-gradient(180deg,rgba(226,173,58,.045),var(--card) 20%)} .panel::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,var(--gold,#e2ad3a),rgba(226,173,58,0) 55%)} /* =================================================================================================================== KHEP 138 (UI, 13 Sep 2026) - THE PHASE IS A BOX YOU CAN SEE YOU SHOULD TAP, AND ITS TILES BREATHE. Founder's phone, 08:17 IST, the live room's Every delivery: "around Powerplay / Middle overs make a box like that, shiny, so it looks like you have to click it; that little dash before the Powerplay - remove it; a box, so when it opens you can see everything; make it prettier, it looks awkward; give the over boxes air so they can breathe." This OVERRULES #phaserowbleed's "bands, not floating cards" for the PHASE rows only (20 Aug); the innings lanes and the panel still bleed. The phase colour stays on the NAME (gold / blue / red) and now also tints the box's top edge; the 14x3 dash before the name is gone. The caret badge (livematch.html #lmMobileFix) stays - it is the "tap me" sign - and the whole box lifts on hover / presses on tap. Tiles and over cards get more padding and gap. Colours are the page's own tokens, so dark mode follows. Appended last so it wins at equal specificity; every width. */ #ballTimeline .ballPhase { margin:12px 0 0; margin-left:0; margin-right:0; width:auto; max-width:none; border:1px solid color-mix(in srgb, var(--gold, #c69200) 22%, var(--line)); border-top:3px solid var(--line); border-radius:16px; padding:0 14px 14px; background:linear-gradient(180deg, color-mix(in srgb, var(--gold, #c69200) 6%, var(--card)), var(--card) 42%); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 18px rgba(2,6,23,.07); transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; } #ballTimeline .ballLane .ballPhase:first-of-type { margin-top:10px; } #ballTimeline .ballPhase.powerplay, #ballTimeline .ballPhase.newball { border-top-color:var(--gold, #c69200); } #ballTimeline .ballPhase.middle, #ballTimeline .ballPhase.oldball { border-top-color:var(--blue, #2563eb); } #ballTimeline .ballPhase.death { border-top-color:var(--red, #dc2626); } #ballTimeline .ballPhase:hover { box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 10px 26px rgba(2,6,23,.12); border-color:color-mix(in srgb, var(--gold, #c69200) 45%, var(--line)); } #ballTimeline details.ballPhase:not([open]) { padding-bottom:0; } #ballTimeline details.ballPhase:not([open]):active { transform:translateY(1px); box-shadow:0 2px 8px rgba(2,6,23,.08); } #ballTimeline details.ballPhase > summary.phaseHead { background:none; border:0; border-radius:0; min-height:50px; padding:14px 0 10px; margin-bottom:8px; gap:12px; } #ballTimeline details.ballPhase:not([open]) > summary.phaseHead { padding-bottom:14px; margin-bottom:0; } #ballTimeline details.ballPhase > summary.phaseHead:hover, #ballTimeline details.ballPhase > summary.phaseHead:active { background:none; } #ballTimeline .ballPhase > summary.phaseHead > b::before { content:none; display:none; } /* the dash: gone */ #ballTimeline .ballPhase > summary.phaseHead > b { font-size:.78rem; letter-spacing:.14em; } #ballTimeline .ballPhase > summary.phaseHead > span { font-size:.72rem; } /* the tiles breathe: more padding, more gap, a raised surface, a bigger figure */ #ballTimeline .phasePulse { gap:10px; margin:4px 0 14px; } #ballTimeline .phaseMetric { padding:11px 12px 12px; border-radius:13px; background:var(--card); border:1px solid color-mix(in srgb, var(--gold, #c69200) 14%, var(--line)); box-shadow:0 2px 8px rgba(2,6,23,.05); } #ballTimeline .phaseMetric small { font-size:.58rem; letter-spacing:.12em; } #ballTimeline .phaseMetric b { font-size:.86rem; margin-top:5px; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; } /* nothing clipped: "see everything" */ /* the over cards breathe too */ #ballTimeline .ballOvers { gap:10px; padding-top:2px; } #ballTimeline .ballOver { padding:10px 11px 11px; border-radius:13px; } #ballTimeline .phaseStory { margin-top:12px; padding:10px 12px; } /* ===== khep 167 · THE WHITE LIVE ROOM CARD AND THE SCORE BADGE (the founder, 15 Sep 2026 23:18, Google's live card; V7 16 Sep: light mode white, dark mode kept). Light mode: the hero is plain white with a soft shadow instead of the gold ring, and LIVE is quiet red text with its dot instead of a red pill (a paused, finished or last-known badge keeps its own look). The live innings tile keeps room in its top-right corner for the badge. Reduced motion: the badge simply shows for two seconds. */ html:not([data-theme="dark"]) .card.hero { box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07) !important; } html:not([data-theme="dark"]) .heroTop .livebadge:not(.done):not(.stale) { background:transparent; color:#dc2626; padding:0; letter-spacing:.1em; } html:not([data-theme="dark"]) .heroTop .livebadge:not(.done):not(.stale) .livedot { background:#dc2626; } .kpi.kpiLive { position:relative; } .kpi.kpiLive .l { padding-right:40px; } .kpi .lmDelta { position:absolute; top:10px; right:10px; padding:3px 7px; border-radius:999px; font:800 .7rem/1 "Spline Sans Mono",monospace; white-space:nowrap; pointer-events:none; background:#334155; color:#fff; animation:lmDelta 1.9s cubic-bezier(.22,1,.36,1) 1 both; } .kpi .lmDelta[data-k="4"] { background:#2563eb; color:#fff; } .kpi .lmDelta[data-k="6"] { background:#c69200; color:#1a1205; } .kpi .lmDelta[data-k="w"] { background:#dc2626; color:#fff; } [data-theme="dark"] .kpi .lmDelta[data-k="n"] { background:#ccd8e8; color:#0a121e; } @keyframes lmDelta { 0% { opacity:0; transform:translateY(8px) scale(.8); } 14% { opacity:1; transform:translateY(0) scale(1.08); } 24% { transform:scale(1); } 78% { opacity:1; transform:translateY(-2px); } 100% { opacity:0; transform:translateY(-12px); } } @keyframes lmDeltaStill { 0% { opacity:1; } 100% { opacity:0; } } @media (prefers-reduced-motion: reduce) { .kpi .lmDelta { animation:lmDeltaStill 1.9s steps(1, end) 1 both; } } /* khep 167 v2, the founder's 2 (html.dcLiveWhiteAll, set by LIVE_WHITE_IN_DARK in dc-matchcard.js): the room's top card white in dark mode too, with the light tokens inside it; LIVE is the quiet red text in both themes. Off by default: the founder's 1. */ html.dcLiveWhiteAll[data-theme="dark"] .card.hero { --card:#ffffff; --soft:#f6f8fc; --field:#fbfcfe; --track:#eef2f7; --ink:#0f172a; --muted:#64748b; --line:#e8edf5; --text2:#334155; --blue:#2563eb; --gold:#c69200; --red:#dc2626; --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.05); background:#ffffff; color:#0f172a; box-shadow:0 0 0 1px #e8edf5, 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07) !important; } html.dcLiveWhiteAll .heroTop .livebadge:not(.done):not(.stale) { background:transparent; color:#dc2626; padding:0; letter-spacing:.1em; } html.dcLiveWhiteAll .heroTop .livebadge:not(.done):not(.stale) .livedot { background:#dc2626; } html.dcLiveWhiteAll[data-theme="dark"] .kpi .lmDelta[data-k="n"] { background:#334155; color:#fff; } /* BUILD176 (UI, 17 Sep 2026; the founder: "Asia Cup ... uska points table banna chahiye na?"): the live room's Points table tab. The table reuses the room's own table rules (th/td above); these lines only mark this match's two sides, the sign of the NRR and the one-column phone layout. */ .lmPtGrid.lmPt1 { grid-template-columns:1fr; } .lmPtTable th { cursor:default; } .lmPtTeam { display:flex; align-items:center; gap:8px; min-width:0; } .lmPtPos { color:var(--muted); font-size:.72rem; min-width:1.4em; text-align:right; flex:0 0 auto; } .lmPtName { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lmPtLegend { color:var(--muted); font-size:.68rem; font-weight:600; margin-left:4px; white-space:nowrap; } .lmPtRow.lmPtMine td { background:var(--soft); } .lmPtRow.lmPtMine .lmPtName { color:var(--gold); } .lmPtPts { font-weight:800; } .lmPtNeg { color:var(--red, #dc2626); } @media (max-width:640px) { .lmPtGrid { grid-template-columns:1fr; } .lmPtTable { font-size:.8rem; } .lmPtTable th, .lmPtTable td { padding:8px 6px; } .lmPtTeam { gap:6px; } /* the T column (ties) is folded away on a phone so P W L NR Pts NRR fit in one screen; a tie still counts in Pts */ .lmPtTable th:nth-child(5), .lmPtTable td:nth-child(5) { display:none; } } /* BUILD180 (UI, 17 Sep 2026; the founder on the Live tab: "ye part thoda ajeeb aur ankho ko chubhta hai ise revamp kar ke aur sundar banao", then 1 = one scoreboard card): the crease block is ONE card. Its own head carries the score, the chase line and the state pill, so the section's kick heading above it is retired; the cards inside lose their borders and become hairline sections; batter and bowler figures sit in five aligned columns under a column head; the this-over strip is tinted; the last wicket wears a red W. Ink for the headline figure, gold for the marks, muted for the rest: the house's three tones. */ #liveNowSec > .kick { display:none; } #liveNow.panel { padding:0; overflow:hidden; } #liveNow .lnHead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px 10px; background:linear-gradient(180deg,var(--field),var(--card)); border-bottom:1px solid var(--line); } #liveNow .lnE { color:var(--gold); font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } #liveNow .lnT { font-size:1.4rem; font-weight:900; letter-spacing:-.01em; margin-top:2px; line-height:1.1; } #liveNow .lnT .ov { font-size:.78rem; color:var(--muted); font-weight:700; letter-spacing:0; } #liveNow .lnPill { display:inline-flex; align-items:center; gap:6px; margin-top:7px; color:var(--red,#dc2626); font-size:.66rem; font-weight:800; letter-spacing:.1em; } #liveNow .lnPill i { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; animation:lnPulse 1.4s infinite; } #liveNow .lnPill.brk { color:var(--muted); } #liveNow .lnPill.brk i { animation:none; } @keyframes lnPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } @media (prefers-reduced-motion: reduce) { #liveNow .lnPill i { animation:none; } } #liveNow .lnNeed { text-align:right; color:var(--muted); font-weight:700; font-size:.78rem; line-height:1.35; flex:0 0 auto; max-width:46%; } #liveNow .lnNeed b { display:block; color:var(--ink); font-size:1.05rem; font-weight:900; } #liveNow .lnState { margin:10px 16px 0; } /* BUILD191 (UI, 17 Sep 2026; the founder: "live batter and bowler dono ko ek hi row me fit kar do ... batsman left me dekhe aur far right uske record, its not good design"): the batting card and the bowling card share ONE row - two equal columns on a wide screen, a hairline between them - so each name and its five figures sit a hand apart instead of a screen apart. The this-over strip and the last wicket span the row. A lone card (before the first ball, or when the bowling pair is not known yet) takes the whole row (a browser without :has() leaves it in the left half, nothing lost). On a phone the two stack, exactly as before. */ #liveNow .crease { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } #liveNow .creaseCard { border:0; border-radius:0; background:transparent; padding:10px 16px 8px; border-top:1px solid var(--line); min-width:0; } #liveNow .crease > .creaseCard:first-child { border-top:0; } #liveNow .creaseCard.lnBat, #liveNow .creaseCard.lnBowl { border-top:0; } #liveNow .creaseCard.lnBat + .creaseCard.lnBowl { border-left:1px solid var(--line); } #liveNow .creaseCard.lnOver, #liveNow .creaseCard.lnWkt { grid-column:1 / -1; } #liveNow .creaseCard.lnBat:not(:has(+ .creaseCard.lnBowl)), #liveNow .creaseCard.lnBowl:first-child { grid-column:1 / -1; } /* a lone card takes the row */ #liveNow .creaseCard.lnOver { background:var(--soft); } #liveNow .creaseCard.lnBat .batLine, #liveNow .creaseCard.lnBowl .batLine { grid-template-columns:minmax(0,1fr) max-content; gap:14px; } @media (max-width:640px) { #liveNow .crease { grid-template-columns:minmax(0,1fr); } #liveNow .creaseCard.lnBat + .creaseCard.lnBowl { border-left:0; border-top:1px solid var(--line); } } #liveNow .creaseCard .cl { color:var(--muted); font-size:.64rem; letter-spacing:.12em; } /* the last column (SR / Eco) stands a step apart from W, so "1" and "0.0" never read as one number */ /* BUILD194 (UI, 17 Sep 2026; the founder's phone, 22:20: the R / B / 4s / 6s / SR head sat over the wrong figures): the head and the figure row share ONE grid, but its columns were in em, and em is each element's OWN font size (.62rem head, ~1rem figures), so the two grids were never the same width and the head slid left of the figures - 40 px on a phone. rem is the page's font size, the same for both, so the columns are now the same pixels in both rows and every head sits over its figure. */ #liveNow .lnColHead, #liveNow .batLine .bv.lnCols { display:grid; grid-template-columns:repeat(4, 2.7rem) 3.3rem; gap:3px; text-align:right; } #liveNow .lnColHead span:last-child, #liveNow .batLine .bv.lnCols .c:last-child { padding-left:.35rem; } #liveNow .lnColHead { margin-left:auto; width:max-content; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:6px 0 0; } #liveNow .batLine { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 0; } #liveNow .batLine .bn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #liveNow .batLine .bv .c { display:block; } #liveNow .batLine .bv .bvA { color:var(--muted); font-weight:700; } #liveNow .batLine .bv .bvR, #liveNow .batLine .bv .bvW { font-size:1.12em; } #liveNow .thisOverDots { margin-top:8px; } #liveNow .lastwkt { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; margin-top:6px; } #liveNow .lastwkt::before { content:"W"; background:var(--red,#dc2626); color:#fff; font:900 .68rem/1 Manrope,system-ui,sans-serif; padding:5px 7px; border-radius:7px; letter-spacing:.06em; grid-row:1 / span 2; } #liveNow .lastwkt small { margin-top:2px; } #liveNow .fowCard { margin-top:0; } #liveNow .fowItem .fowBat { flex:0 1 auto; } /* BUILD194: the meta follows the name, no screen of air between */ #liveNow .fowList, #liveNow .fowCard .fowYetList { max-width:820px; } /* BUILD194: the list stays compact on a wide screen */ @media (max-width:640px) { #liveNow .lnT { font-size:1.28rem; } /* the name keeps the room it needs on a phone: tighter figure columns, a step smaller name, so Onnicha Kamchomphu is not cut */ #liveNow .lnColHead, #liveNow .batLine .bv.lnCols { grid-template-columns:2.2rem 2rem 2rem 2rem 2.9rem; gap:1px; } /* BUILD194: rem, see above */ #liveNow .batLine { gap:6px; } /* a long name WRAPS to a second line rather than being cut: a cut name is a wrong name */ #liveNow .batLine .bn { font-size:.88rem; gap:5px; white-space:normal; line-height:1.15; } #liveNow .batLine .bv { font-size:.9rem; } #liveNow .creaseCard { padding:9px 12px 7px; } #liveNow .lnHead { padding:12px 12px 9px; } } /* BUILD182 (UI, 17 Sep 2026; the founder on the upcoming room: "Is page ko sundar banao aur badhiya", then 1 on the mock): the upcoming room. A hero with the two sides face to face and the countdown between them, the series / time / venue as icon rows; the venue briefing as one card with a bat-first-vs-chase bar; the squads as two columns with roles. Ink, gold, muted. */ .upHero { max-width:760px; margin:6px auto 14px; padding:16px 16px 14px; background:linear-gradient(180deg,var(--field),var(--card)); } .upTop { display:flex; justify-content:space-between; align-items:center; gap:10px; } .upTop .e { color:var(--gold); font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .upPill { flex:0 0 auto; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--soft); border:1px solid var(--line); padding:4px 9px; border-radius:999px; white-space:nowrap; } .upTeams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:16px 0 12px; } .upTeam { text-align:center; min-width:0; } .upTeam img, .upTeam .crest, .upTeam .upCrest { width:56px; height:56px; border-radius:50%; margin:0 auto 8px; display:grid; place-items:center; } .upTeam .upCrest { background:var(--soft); border:1px solid var(--line); font-weight:900; color:var(--muted); font-size:.8rem; } .upNm { font-size:1.02rem; font-weight:900; line-height:1.15; } .upCode { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.1em; margin-top:2px; text-transform:uppercase; } .upVs { text-align:center; padding:0 4px; } .upCd { font-size:1.3rem; font-weight:900; letter-spacing:-.01em; white-space:nowrap; } .upCdl { color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .upMeta { border-top:1px solid var(--line); padding-top:12px; display:grid; gap:7px; } .upRow { display:flex; gap:9px; align-items:flex-start; font-size:.86rem; font-weight:700; color:var(--muted); line-height:1.4; } .upRow b { color:var(--ink); } .upRow a { color:var(--gold); text-decoration:none; border-bottom:1px dotted rgba(198,146,0,.55); } .upIc { width:18px; flex:0 0 18px; text-align:center; color:var(--gold); } .upVb { max-width:760px; margin:0 auto 14px; padding:16px 16px 14px; } .upVb .e { color:var(--gold); font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .upVb h2 { font-size:1.2rem; font-weight:900; margin:3px 0 4px; letter-spacing:-.01em; } .upVbSub { color:var(--muted); font-size:.86rem; font-weight:700; line-height:1.45; margin:0; } .upVbSub b { color:var(--ink); } .upSplit { margin:14px 0 6px; } .upBar { display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--soft); } .upA { background:var(--gold); } .upB { background:#94a3b8; } .upLbl { display:flex; justify-content:space-between; margin-top:6px; font-size:.78rem; font-weight:800; } .upLbl span { color:var(--muted); } .upLbl b { color:var(--ink); } .upTiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; } .upTile { background:var(--soft); border-radius:12px; padding:10px 12px; } .upTile .l { color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .upTile .v { font-size:1.3rem; font-weight:900; margin-top:2px; } .upTops { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; } .upTop1 { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:12px; padding:9px 10px; min-width:0; } .upTop1 .k { color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .upTop1 .n { font-weight:800; font-size:.88rem; line-height:1.15; } .upMore { display:inline-block; margin-top:12px; color:var(--gold); font-weight:800; font-size:.86rem; text-decoration:none; } .upSqGrid { display:grid; grid-template-columns:1fr; gap:12px; max-width:760px; margin:0 auto 14px; } .upSq { padding:0; overflow:hidden; } .upSqHd { display:flex; align-items:center; gap:10px; padding:14px 16px 8px; } .upSqHd img, .upSqHd .crest { width:30px; height:30px; border-radius:50%; } .upSqHd h3 { margin:0; font-size:1rem; font-weight:900; } .upSqHd small { display:block; color:var(--muted); font-size:.72rem; font-weight:700; } .upProv { margin-left:auto; flex:0 0 auto; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); background:rgba(198,146,0,.1); border:1px solid rgba(198,146,0,.35); padding:3px 8px; border-radius:999px; } .upPlist { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; padding:4px 16px 12px; } .upPl { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.86rem; font-weight:700; min-width:0; color:inherit; text-decoration:none; cursor:pointer; } .upPl:hover .upPn, .upPl:focus-visible .upPn { color:var(--gold); } .upPn { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; border-bottom:1px dotted rgba(198,146,0,.55); } .upPn .upStat { display:block; font:800 .66rem/1.2 'Spline Sans Mono',monospace; color:var(--muted); margin-top:2px; } .upPn .upStat b { color:var(--gold); } .upPn .upStat em { font-style:normal; font-weight:700; font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; opacity:.65; margin-right:4px; } .upRole { font-style:normal; color:var(--muted); font-size:.6rem; font-weight:800; margin-left:auto; flex:0 0 auto; letter-spacing:.06em; } .upBadge { color:var(--gold); font-size:.58rem; font-weight:900; border:1px solid rgba(198,146,0,.45); border-radius:5px; padding:1px 4px; margin-left:2px; } @media (min-width:640px) { .upSqGrid { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .upHero { padding:14px 13px 12px; } .upNm { font-size:.9rem; } .upCd { font-size:1.15rem; } .upCdl { font-size:.58rem; letter-spacing:.08em; } .upVb { padding:14px 13px 12px; } .upPlist { grid-template-columns:1fr; } } /* BUILD192 (UI, 17 Sep 2026; the founder on the Every ball tab of 71215, twice: "ye bhi bahut lamba khinch raha hai ... ise bhi to ek row me karna hai ... page ka sahi istemal hona chahiye", "compact sundar hona hai"): the tab uses its width. On a wide screen the phase's four figures sit in ONE row of four tiles (they were two huge tiles a row); the over cards run as many to a row as the lane is wide (230 px each: six on a laptop's full lane, three in a half column) instead of two page-wide cards with six balls in a quarter of each; the cards and their heads are a step tighter; the closed phases sit side by side as small cards in the lane's own grid, the open phase spans the row, the lane head spans the row. Chronology is the DOM order and the grid keeps it. Phones (640 px and under) are untouched: their bleed and their two-a-row stay exactly as BUILD180 left them. */ @media (min-width:641px) { #ballTimeline .ballLane { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; align-items:start; } #ballTimeline .ballLane > :not(details.ballPhase), #ballTimeline .ballLane > details.ballPhase[open] { grid-column:1 / -1; } #ballTimeline .ballLane > .ballLaneHead { margin-bottom:0; } #ballTimeline .ballPhase { margin-top:0; } #ballTimeline details.ballPhase:not([open]) > summary.phaseHead { flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:0; } #ballTimeline .phasePulse { grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:2px 0 10px; } #ballTimeline .phaseMetric { padding:6px 10px; } #ballTimeline .ballOvers { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; } #ballTimeline .ballOver { padding:7px 9px 8px; } #ballTimeline .ballOverHead { margin-bottom:6px; } } /* BUILD193 (UI, 17 Sep 2026; the founder on the upcoming room of 67378 ENG v SL: "ise left me rakhna hai na, ye beech me itna betarteeb kyu rakh hai, ise thik karo"): the room uses its width. BUILD182 centred every block in a 760 px column with a page of air on both sides. On a wide screen the room's root becomes a two-column grid: the hero (the two sides, the countdown, the series / time / venue rows) in the left column and the venue briefing in the right, both from the left edge; the squads, the empty note and the head-to-head panel span the row beneath. The inline 760 px caps the script writes are overruled here (!important, the one place). :has() scopes the grid to a root whose first child is the hero, so the live room's root is untouched; a browser without :has() keeps BUILD182's centred column. Under 900 px: BUILD182's layout as it is. */ @media (min-width:900px) { #root:has(> .upHero) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; } #root > .upHero { max-width:none; margin:0; } #root > #venueBrief { max-width:none !important; margin:0 !important; } #root > #venueBrief > .upVb { max-width:none; margin:0; } #root > .upSqGrid, #root > .card.empty, #root > .panel.card { grid-column:1 / -1; max-width:none !important; margin:0 !important; } } /* ---- BUILD255 (UI, 25 Sep 2026): the match preview in the upcoming room (the founder: short, good, with a picture, Cricbuzz-style) ---- */ #dcPreview { max-width:760px; margin:16px auto; } #dcPreview:empty { display:none; margin:0; } .upPrev { padding:0; overflow:hidden; } .upPrevPic { aspect-ratio:16 / 9; background:var(--line,#e8edf5); } /* the box has its height before the picture: CLS 0 */ .upPrevPic img { display:block; width:100%; height:100%; object-fit:cover; } .upPrevBody { padding:16px 20px 18px; } .upPrevKick { display:flex; align-items:center; gap:10px; margin-bottom:8px; font:700 .78rem Archivo,sans-serif; color:var(--muted,#64748b); } .upPrevTag { display:inline-block; padding:3px 9px; border-radius:999px; background:var(--gold,#c69200); color:#1a1300; font:800 .74rem Archivo,sans-serif; letter-spacing:.04em; text-transform:uppercase; } .upPrev h2 { margin:0 0 6px; font:800 1.25rem/1.25 Archivo,sans-serif; color:var(--ink,#0f172a); } .upPrevDek { margin:0 0 12px; font:600 .98rem/1.45 Archivo,sans-serif; color:var(--muted,#64748b); } .upPrevBody > p { margin:0 0 10px; font:500 .95rem/1.6 Archivo,sans-serif; color:var(--ink,#0f172a); } .upPrevCredit, .upPrevBy { font-size:.78rem !important; color:var(--muted,#64748b) !important; margin-top:8px !important; } html[data-theme="dark"] .upPrevPic { background:#1b2536; } @media (max-width:640px){ .upPrevBody { padding:14px 14px 16px; } .upPrev h2 { font-size:1.12rem; } } @media (min-width:980px){ #root > #dcPreview { grid-column:1 / -1; max-width:none; margin:0; } } /* BUILD350 (the founder 2 Oct 09:1x via V7). (1) Where to watch under the hero is ONE small chip: the broadcaster badges + a chevron; the full block lives in the Info tab's Watch on row. (2) Scorecard: every batter / bowler name on one line, the dismissal on one line under it; the table lays out by content and its box scrolls left-right when it is wider than the phone, the name column stuck to the left. */ #dcWatchHost { display:flex; justify-content:center; margin:6px auto 2px; max-width:760px; } #dcWatchHost:empty { display:none; } .lmWatchChip { display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 7px; border:1px solid var(--line); border-radius:999px; background:var(--card,#fff); color:var(--muted); cursor:pointer; font:800 .64rem/1 Archivo,sans-serif; letter-spacing:.04em; } .lmWatchChip .dcWatchMarks { gap:4px; } .lmWatchChip .dcWatchTx { cursor:pointer; } .lmWatchChip .lmWatchChev { color:var(--gold); font-size:.95rem; line-height:1; margin-left:1px; } .lmWatchChip:hover, .lmWatchChip:focus-visible { border-color:var(--gold); } #miWatch .dcWatch { margin:0; padding:0; border:0; max-width:none; font-weight:500; font-size:.84rem; line-height:1.5; } #miWatch .dcWatchHead { font-size:.8rem; } #miWatch .dcWatchRow { margin-top:2px; } #miWatch .dcWatchK { display:inline-block; min-width:48px; color:var(--muted); font-weight:800; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; } #miWatch .dcWatchOther summary { font-size:.8rem; } #miWatch .dcWatchReport { font-size:.74rem; } #miWatchRow { display:block; } #miWatchRow .miL { max-width:none; margin-bottom:4px; } #miWatchRow .miV { font-weight:500; } .scBatT .tableWrap table, .scBowlT .tableWrap table, #scorecards .scBatT .tableWrap table, #scorecards .scBowlT .tableWrap table { table-layout:auto; width:max-content; min-width:100%; } .scBatT .tableWrap th:first-child, .scBatT .tableWrap td:first-child, .scBowlT .tableWrap th:first-child, .scBowlT .tableWrap td:first-child, #scorecards .scBatT .tableWrap td:first-child, #scorecards .scBowlT .tableWrap td:first-child { width:auto; white-space:nowrap; position:sticky; left:0; z-index:2; background:var(--card,#fff); box-shadow:3px 0 0 var(--card,#fff); } .scBatT .tableWrap th:first-child, .scBowlT .tableWrap th:first-child { z-index:3; } .scBatT .tableWrap td:first-child::after, .scBowlT .tableWrap td:first-child::after { content:""; position:absolute; top:0; right:-1px; bottom:0; width:1px; background:var(--line); } .scBatT .tableWrap th, .scBatT .tableWrap td, .scBowlT .tableWrap th, .scBowlT .tableWrap td, #scorecards .scBatT .tableWrap th, #scorecards .scBatT .tableWrap td, #scorecards .scBowlT .tableWrap th, #scorecards .scBowlT .tableWrap td { white-space:nowrap; width:auto; } .scBatT .nmCell .nmTop, .scBowlT .nmCell .nmTop { flex-wrap:nowrap; white-space:nowrap; } .scBatT .nmCell .nmTop a.sqRow, .scBowlT .nmCell .nmTop a.sqRow, .scBatT .nmCell .dis, .scBatT .nmCell .dis a.sqRow { white-space:nowrap; } .scBatT .nmCell .dis, .scBowlT .nmCell .dis { display:block; } /* the box: it scrolls, and it never widens the panel it sits in (width 0 + min-width 100%: no intrinsic width of its own, so the page body keeps its width on a desktop too) */ .scBatT .tableWrap, .scBowlT .tableWrap { width:0; min-width:100%; box-sizing:border-box; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } /* BUILD356: the room's own preview card (no desk preview): the venue briefing's clothes */ .upAuto { max-width:760px; margin:0 auto 14px; padding:16px 16px 14px; } .upAuto h2 { font:800 1.2rem/1.25 Archivo,sans-serif; margin:2px 0 4px; letter-spacing:-.01em; color:var(--ink,#0f172a); } .upAuto h2 small { display:block; font:700 .8rem/1.4 Archivo,sans-serif; color:var(--muted,#64748b); margin-top:2px; } .upAuto .apRows { display:grid; gap:8px; margin-top:10px; } .upAuto .apSec { color:var(--gold); font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-top:4px; } .upAuto .upRow { align-items:baseline; } .upAuto .apK { flex:0 0 auto; min-width:64px; color:var(--ink,#0f172a); font-weight:800; font-size:.78rem; } .upAuto .upRow[hidden] { display:none; } /* BUILD356 v2: the card's title wears each side's crest / flag (DC_CREST markup), the name beside it */ .upAuto h2 .apSide { display:inline-flex; align-items:center; gap:7px; vertical-align:middle; } .upAuto h2 .apSide .dcCrest, .upAuto h2 .apSide .dcCrest img, .upAuto h2 .apSide .upCrest { width:26px; height:26px; border-radius:6px; flex:0 0 auto; } .upAuto h2 .apVs { margin:0 9px; color:var(--muted,#64748b); font-weight:700; font-size:.95rem; vertical-align:middle; } /* BUILD359 (the founder, 3 Oct 2026 08:44: the share disc hid "XI CLOSER TO START"): dc-cardshare.js mounts a 34 px disc at the top-right (10 px in) of every card with a heading. Every head row that can carry text or a chip at its right edge keeps that corner free: 56 px. */ .upSq .upSqHd, .upHero .upTop, .hero .heroTop, .upVb .e, .upVb h2, .upPrev .upPrevKick, .upAuto .upPrevKick, .upAuto h2, .panel .panelHead, .card > .panelHead, .card.upVb > .e, .lhTop { padding-right:56px; } .upSq .upSqHd .upProv { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* BUILD360: the live room's ONE compact head (the founder 3 Oct 2026 09:16 on the LIVEHEAD mockups: "1 = ऐसे ही बना दो") */ #heroSec.hero { padding:14px 16px 12px; } .lhH1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; } .lhTop { display:flex; align-items:center; gap:10px; min-height:22px; } .lhTop .heroState { display:inline-flex; align-items:center; flex:0 0 auto; } .lhTop .lhEye { color:var(--gold); font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; line-height:1.35; flex:1 1 auto; min-width:0; overflow:visible; white-space:normal; } /* never cut: it wraps */ .lhMeta .upd { margin-left:auto; color:var(--muted); font-size:.7rem; font-weight:700; white-space:nowrap; } .lhStrip { margin-top:10px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); } .lhRow { position:relative; display:grid; grid-template-columns:28px minmax(96px,1fr) auto auto; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--line); } .lhRow:first-child { border-top:0; } .lhRow.lhBat { background:var(--soft); box-shadow:inset 4px 0 0 var(--gold); } .lhRow .dcCrest, .lhRow .dcCrest img { width:28px; height:28px; border-radius:6px; } .lhName { font-weight:900; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink); line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .lhCode { display:none; } .lhScore { font:800 1.12rem/1 "Spline Sans Mono",monospace; color:var(--ink); white-space:nowrap; } .lhScore i { font-style:normal; color:var(--gold); font-size:.84rem; margin-left:4px; } .lhScore .lhAmp { color:var(--muted); margin:0 5px; font-weight:600; } .lhScore .lhYet { font:700 .82rem Archivo,sans-serif; color:var(--muted); } .lhRate { min-width:64px; text-align:right; font:800 .72rem "Spline Sans Mono",monospace; color:var(--muted); } .lhRow.lhBat .lhRate { color:var(--ink); } .lhLine { margin:10px 2px 0; font-size:.92rem; font-weight:700; color:var(--muted); line-height:1.35; } .lhLine b { color:var(--ink); font-weight:900; } .lhLine.lhRes { color:var(--ink); font-weight:900; font-size:1rem; } .lhTrack { position:relative; height:6px; margin:8px 2px 0; border-radius:999px; background:var(--soft); overflow:visible; } .lhFill { height:100%; border-radius:999px; background:#2563eb; } .lhFill.lhBehind { background:#dc2626; } .lhFill.lhOv { background:var(--gold); } .lhPar { position:absolute; top:-3px; width:2px; height:12px; background:var(--gold); border-radius:1px; } .lhMeta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; color:var(--muted); font-size:.8rem; font-weight:700; } .lhChip { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--ink); font-size:.72rem; font-weight:800; letter-spacing:.02em; white-space:nowrap; } .lhWhere a { color:var(--gold); text-decoration:none; border-bottom:1px dotted rgba(198,146,0,.55); } .lhWhere i[data-ic] { width:12px; height:12px; vertical-align:-1px; } /* the score badge (khep 167) on the batting row, the innings tile's clothes */ .lhRow .lmDelta { position:absolute; top:6px; right:10px; padding:3px 7px; border-radius:999px; font:800 .7rem/1 "Spline Sans Mono",monospace; white-space:nowrap; pointer-events:none; background:#334155; color:#fff; animation:lmDelta 1.9s cubic-bezier(.22,1,.36,1) 1 both; } .lhRow .lmDelta[data-k="4"] { background:#2563eb; color:#fff; } .lhRow .lmDelta[data-k="6"] { background:#c69200; color:#1a1205; } .lhRow .lmDelta[data-k="w"] { background:#dc2626; color:#fff; } [data-theme="dark"] .lhRow .lmDelta[data-k="n"] { background:#ccd8e8; color:#0a121e; } @media (min-width:760px){ .lhName { font-size:1.08rem; } .lhScore { font-size:1.2rem; } } @media (max-width:360px){ .lhName { font-size:.94rem; } .lhScore { font-size:1rem; } .lhRate { min-width:52px; } } /* BUILD363: no "updated" line; the stale marker inside the badge row; the briefing's first-league line */ .lhTop .lhStale { color:var(--muted,#64748b); font:700 .7rem "Spline Sans Mono",monospace; white-space:nowrap; flex:0 0 auto; } .lhTop .lhStale[hidden] { display:none; } .upVb .upVbFirst { margin:2px 0 6px; color:var(--ink,#0f172a); font:800 .84rem/1.35 Archivo,sans-serif; } /* BUILD365 (the founder 21:35, desktop: "left padhne ke baad gardan ghuma kar score tak ... tennis khel rahe hai, jagah ka sadupyog karo"): from 1100 px up the head is two columns: the score strip (capped, the score right after the name, the rate next to it) and, beside it in the free width, the chase / innings line, its bar and the toss + ground line. Under 1100 px nothing here applies (the phone head is BUILD360's). */ @media (min-width:1100px){ #heroSec.hero { display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); grid-template-rows:auto auto auto auto; column-gap:36px; align-items:center; } #heroSec.hero > .lhH1 { position:absolute; } #heroSec.hero > .lhTop { grid-column:1 / -1; grid-row:1; } #heroSec.hero > .lhStrip { grid-column:1; grid-row:2 / span 3; align-self:start; } #heroSec.hero > .lhLine { grid-column:2; grid-row:2; align-self:end; margin:10px 0 0; font-size:1.08rem; } #heroSec.hero > .lhLine.lhRes { font-size:1.16rem; } #heroSec.hero > .lhTrack { grid-column:2; grid-row:3; margin:10px 0 0; max-width:560px; } #heroSec.hero > .lhMeta { grid-column:2; grid-row:4; align-self:start; margin-top:10px; } #heroSec .lhRow { grid-template-columns:28px minmax(120px,176px) auto auto; justify-content:start; column-gap:18px; padding-right:56px; } #heroSec .lhRate { margin-left:6px; } #liveNow .lnHead { justify-content:flex-start; align-items:center; gap:36px; } #liveNow .lnNeed { text-align:left; max-width:none; } } /* BUILD366 (V7, 3 Oct 2026): (1) the footer never pushes the room sideways: dc-shell.js sizes #dcFoot by measuring it, and measures it while it is still hidden (left 0), so on a late-settling room it sat after the 184 px rail and viewport-wide (+184 px of sideways scroll). These two declarations need no measurement; the condition is the one that gives the body its rail padding. */ @media (min-width:980px){ html:not(.dc-shell-failed) #dcFoot { margin-left:-184px !important; width:calc(100% + 184px) !important; } } /* (2) the Live tab's batter / bowler cards: from 1100 px up the rows and their column head are capped, so the figures sit by the name (the same idea as BUILD365's head). The head and the figures still share one grid (BUILD194). */ @media (min-width:1100px){ #liveNow .creaseCard.lnBat > .batLine, #liveNow .creaseCard.lnBowl > .batLine, #liveNow .creaseCard.lnBat > .lnColHead, #liveNow .creaseCard.lnBowl > .lnColHead { max-width:460px; } #liveNow .creaseCard.lnBat > .lnColHead, #liveNow .creaseCard.lnBowl > .lnColHead { margin-left:0; width:auto; justify-content:end; } } /* BUILD368 (the founder, 4 Oct 2026, desktop, room 70304): (1) the where-to-watch chips sit inside the head, right under the score strip, left-aligned with it (grid row 5, left column of BUILD365's two-column head), not centred under the card with a gutter; (2) the Scorecard tab's batting / bowling / partnership tables are capped at 820 px so the figures sit near the names ("tennis khel jaisa, gardan ghuma kar dekho, ise compact karo"). Under 1100 px nothing here applies. */ @media (min-width:1100px){ #heroSec.hero > #dcWatchHost { grid-column:1; grid-row:5; justify-content:flex-start; margin:8px 0 0; max-width:560px; } #heroSec.hero > .lhStrip { grid-row:2 / span 3; } #scorecards .scoreTitle { max-width:820px; } #scorecards .scBatT > .tableWrap, #scorecards .scBowlT > .tableWrap, #scorecards .scPartT > .tableWrap { width:auto; min-width:0; max-width:820px; } /* the wrap, not the table (a fixed-layout table at width:100% ignores its own max-width); the wrap had width:0 + min-width:100%, and a min-width beats a max-width */ }