/* dc-matchcard.css - the shared match card's stylesheet.
*
* THIS LIVED INSIDE dc-matchcard.js AND THAT WAS A MISTAKE. Founder 2026-08-05
* hit it within the hour: the home board came up as an empty block. The markup
* still had a legacy fallback if the script failed - but the CSS had gone into
* that same script, so a single file failing to load left the cards rendered and
* completely unstyled, which reads as a broken page rather than a degraded one.
*
* A stylesheet belongs in a stylesheet. A applies even when scripts are
* blocked, stale or slow, so the card can now only ever lose its BEHAVIOUR, never
* its appearance.
*/
/* ===== Two-column home layout ===== */
.homeGrid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
@media (max-width:980px){ .homeGrid { grid-template-columns:1fr; } }
.mainCol { min-width:0; }
.rail { display:flex; flex-direction:column; gap:18px; }
/* rail scrolls WITH the page (no sticky) so main + rail share one synced scrollbar */
/* ===== Hero ===== */
.hero { padding:32px 30px; }
.hero > .heroCta:first-child { margin-top:0; } /* no title above it any more */
/* 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; }
.sub { color:var(--muted); margin-top:13px; max-width:660px; line-height:1.6; font-weight:600; font-size:1.02rem; }
.sub b { color:var(--text2); }
/* ===== Match-day board · full-width match GRID =====
Powered by /api/live/sm/board?league=&fast=1. Shows the 3 most
relevant matches - live first, then recent finished, then upcoming - as a
RESPONSIVE GRID: 3-up desktop, 2-up tablet, 1-up mobile (founder
2026-07-25: replaces the old horizontal Cricbuzz-style scroller so every
shown card is visible at a glance, no swiping). "All matches ->" in the
bar covers everything beyond these 3. The old hero text block ("Match day,
live." + sub) is retired - the GLOBAL top search is the one entry above. */
.dcMC { margin:16px 0 22px; border:1px solid var(--line); border-radius:14px; background:var(--field); overflow:hidden; }
/* Board view toggle · Latest | Upcoming (founder 2026-08-01: home had no upcoming
tab at all). Reuses the site's existing gold-tint active-chip tokens (.chip /
.topnav a.active) - no new visual pattern. Sits right-aligned before the link. */
.hlTabs { margin-left:auto; display:flex; gap:4px; flex:0 0 auto; }
.hlTab { appearance:none; -webkit-appearance:none; margin:0; border:1px solid transparent; background:none; color:var(--muted); font:800 .68rem/1 Archivo,Manrope-FB,Manrope-FB-R,Manrope-FB-A,sans-serif; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px 6px; border-radius:999px; cursor:pointer; transition:color .15s,background .15s,border-color .15s; }
.hlTab:hover { color:var(--ink); }
.hlTab.on { color:var(--gold); background:#c692001a; border-color:#c6920066; cursor:default; }
.hlAll { color:var(--gold); font-size:.74rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.hlAll:hover { text-decoration:underline; }
.hlRailWrap, .hlEmpty { border-top:1px solid var(--line); }
/* THE grid · up to 3 cards, always the most relevant (live > recent > upcoming).
A plain responsive grid, not a scroller - nothing to pan, so there's no touch-
momentum/anti-jank code fighting the refresh any more (see reconcileRail below,
which patches cards in place instead of ever wiping this container). */
.hlRailWrap { position:relative; }
/* #cardline (founder 15 Aug): three cards in a row left each one 318px, and the
head's three facts - competition, format, ground - measure 357px together, so
something had to break onto a second line every time. Two per row gives each
card ~490px: every fact fits on its own unbroken line, and a wider, shallower
card is the more rectangular shape the founder asked for. auto-fit keeps three
up on a genuinely wide screen. */
/* #boardslide (founder 15 Aug 2026, with Crex open beside our board): TWO matches at
a time, and an arrow that swaps BOTH for the next two. Everything live is reachable
by sliding instead of being cut at three.
It is a NATIVE horizontal scroller with scroll-snap, not a transform carousel and
not a JS-driven glide. That choice is the whole reason it feels different: the
browser runs the pan on the compositor, momentum and rubber-band come free, and a
vertical swipe still scrolls the PAGE because the browser decides the axis, not our
code. Our old rail read wheel deltas in JS and mapped them to scrollLeft, which is
exactly what made the founder's cursor stick on the cards.
overscroll-behavior-x:contain keeps a horizontal overscroll from becoming a browser
back-swipe; the Y axis is deliberately left alone. */
/* #flow (founder 15 Aug 2026: "ek baar haath chalao to tez chale, dheere chalao to
dheere aaye"). That is native momentum, and the two properties that were quietly
taking it away are gone here:
scroll-behavior:smooth - it eases EVERY change of scroll position, so a light
flick was being animated to a stop instead of coasting.
The arrows still ask for smooth by name, per call.
scroll-snap-type:mandatory - it drags the rail to the nearest card no matter how
small the gesture, which is exactly "thoda slide karo
to ek jagah ruk jaata hai". PROXIMITY snaps only when
the finger already left it near a card, so a hard flick
travels several cards and a slow drag stays where the
thumb puts it.
touch-action stays unset (auto) on purpose: the browser decides the axis, so a
vertical swipe that begins on a card still scrolls the PAGE. */
.hlRail { display:flex; gap:14px; padding:14px; align-items:stretch;
overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
-webkit-overflow-scrolling:touch; }
.hlRail::-webkit-scrollbar { display:none; }
.hlRail > * { flex:0 0 calc(50% - 7px); min-width:0; scroll-snap-align:start; }
@media (prefers-reduced-motion:reduce){ .hlRail { scroll-behavior:auto; } }
/* Phones take one card a page, with a sliver of the next showing so the eye knows
there IS a next - the same cue Crex uses, and cheaper than any hint text. */
@media (max-width:600px){
.hlRail { gap:10px; padding:10px; scroll-padding-left:10px; }
.hlRail > * { flex:0 0 calc(100% - 26px); }
}
/* THE ARROWS. Round, quiet, and only present when there is somewhere to go - a dead
control that never moves anything is worse than no control. They sit ON the rail's
edge, vertically centred, and are hidden from screen readers because the rail itself
is already keyboard-scrollable. */
.hlNav { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
border:1px solid var(--line); background:var(--card); color:var(--ink);
box-shadow:0 6px 18px rgba(15,23,42,.16); cursor:pointer; padding:0;
opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.hlRailWrap.canScroll .hlNav { opacity:.94; pointer-events:auto; }
.hlRailWrap.canScroll .hlNav[disabled] { opacity:0; pointer-events:none; }
.hlNav:hover { transform:translateY(-50%) scale(1.06); border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); }
.hlNav.prev { left:4px; } .hlNav.next { right:4px; }
.hlNav svg { width:16px; height:16px; }
@media (max-width:600px){ .hlNav { display:none; } } /* a thumb is the control here */
/* #cardmob (founder 15 Aug, phone): the head's three facts measure 332px and a
phone card offers 315, so competition AND ground were both being cut. On a
phone the ground takes its own line beneath, with the format beside it - every
fact still unbroken, and the eye reads competition, tour, then format and venue.
Desktop keeps all three on one line, where they fit. */
/* CORRECTED TWICE, same day. First cut put the ground on a line of its own below
the tour - "galle neeche ho gaya". Second cut stacked competition and tour in one
column with the ground beside them, which fixed the names but left the TOUR with
only 150px of the 182 it needs, so it was cut instead. A shared grid column can
never win that: whatever the ground takes, the tour loses.
So the head is now TWO INDEPENDENT ROWS, each free to size itself:
row 1 competition ................. ground
row 2 tour ......................... TEST
Measured on a 375px phone card (301px usable): row one 294, row two 228. Nothing
is cut on either line, and the founder's sentence is honoured exactly - both
names on top, the format in the middle, above the two team scores. */
.hlEmpty { padding:16px 14px; color:var(--muted); font-size:.82rem; font-weight:700; }
.hlEmpty a { color:var(--gold); font-weight:800; text-decoration:none; }
.hlEmpty a:hover { text-decoration:underline; }
/* ===== Board cards · ONE unified skeleton shared by live / finished / upcoming
(founder 2026-07-25 redesign):
TOP [LIVE/FINISHED tag + competition · match-no] ...... [ground name]
MIDDLE team A (flag+name+score) · VS · team B (flag+name+score)
STATUS live status line / finished verdict+POM / upcoming badges - a
fixed-height slot so it reserves the SAME space whether or not
THIS match happens to carry that optional field, keeping every
live card structurally identical to every other live card.
BOTTOM [small pill: deep room / match room] ...... [time or date, right]
Finished cards run a calmer, smaller type scale (.fin overrides near the
bottom) - they carry the most text (verdict + POM + footer) so they're the
ones that read cluttered at full size. */
/* #cardline: squarer corners and tighter padding - the founder's word was that the
card looks better the more rectangular it is. */
.dcMC .mCard { display:flex; flex-direction:column; min-width:0; text-decoration:none; color:var(--ink); padding:12px 14px; border-radius:10px; position:relative; overflow:hidden;
background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow, 0 12px 30px rgba(15,23,42,.06)); transition:border-color .15s ease, transform .15s ease; }
.dcMC .mCard:hover { border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); transform:translateY(-2px); }
.dcMC .mCard.live { border-color:color-mix(in srgb,var(--gold) 40%,var(--line));
background:radial-gradient(circle at 92% 0%, color-mix(in srgb,var(--blue) 12%,transparent), transparent 20rem), var(--card); }
.dcMC .mCard.live::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
background-image:linear-gradient(color-mix(in srgb,var(--gold) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--gold) 8%,transparent) 1px,transparent 1px); background-size:38px 38px;
-webkit-mask-image:linear-gradient(115deg,rgba(0,0,0,.55),transparent 62%); mask-image:linear-gradient(115deg,rgba(0,0,0,.55),transparent 62%); }
.dcMC .mCard.fin { background:radial-gradient(circle at 92% 0%, color-mix(in srgb,var(--green) 8%,transparent), transparent 20rem), var(--card); }
.dcMC .mCard > * { position:relative; }
/* #livedot: the live marker is announced, not drawn - it costs no space at all. */
.dcMC .mTag.mTagSr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.dcMC .mTag.mTagDot { margin-right:7px; padding:0; display:inline-flex; align-items:center; vertical-align:middle; }
.dcMC .mTag.mTagDot .livedot { margin-right:0; width:7px; height:7px; }
.dcMC .livedot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); margin-right:5px; box-shadow:0 0 10px var(--red); }
/* ---- THE CALM CHIP · PAUSED (founder 2026-08-13) ---------------------------
A red pulsing dot on a match where play has stopped for the day is a false
claim. Where the pulse used to sit, a paused card carries this instead: the
quiet gold eyebrow voice the pages already speak, NO animation, NO red, and a
solid (never pulsing) dot so the shape of the top row does not jump between
states. Deliberately reads as information, not as an alarm.
`.dcHold` is also the match room's chip - livematch.html carries the same three
rules inline because it does not load this stylesheet (see the note there). */
.dcMC .dcHold, .dcHold { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
font:800 .58rem/1 Archivo,Manrope-FB,Manrope-FB-R,Manrope-FB-A,system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase;
padding:3px 7px; 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); }
.dcMC .dcHold .dcHoldDot, .dcHold .dcHoldDot { display:inline-block; width:5px; height:5px; border-radius:50%;
background:currentColor; opacity:.9; flex:0 0 auto; animation:none; }
.dcMC .mTagHold { margin-right:7px; vertical-align:middle; }
/* A paused card drops the live grid shimmer too - that texture is the "something
is happening here" cue, and at stumps nothing is. */
.dcMC .mCard.live.held::before { opacity:.22; }
/* -- top row: tag+competition (left, wraps up to 2 lines, never collides) /
ground (right, one line, own capped width) -- */
/* #cardhead2: the head is a two-row block now, not one row of three items. */
.dcMC .mTop { display:block; }
/* Type scale (founder 2026-07-29 declutter): the whole card speaks in FOUR
sizes only - meta .64rem / prose .7rem / team name .84rem / score 1.1rem -
shared by live, finished and upcoming alike. Quiet things (labels, footer)
sit at weight 700 so only the score and the winner carry 800; nothing on
the card ever drops below ~10px. */
/* PILLS NEVER SIT INSIDE A CLAMP (founder 2026-08-12: "PLAYED aur T20 chip me kat
raha hai"). The whole meta used to be one -webkit-box with line-clamp:2, so at
narrow widths the clamp could cut across the PLAYED tag or the format pill. Now
the pills live on their own uncuttable first row and ONLY the competition words
(.mCompTx below) carry the 2-line clamp. */
/* ROW ONE of the head: the tag, the competition (takes the slack, one line), and
the ground pinned to the right edge. */
.dcMC .mComp { display:flex; align-items:baseline; column-gap:8px; min-width:0; color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.02em; line-height:1.4; }
/* ROW TWO: the tour on the left, the format pill on the right. Its own flex row, so
the tour is measured against the FULL card width, not against a column the ground
already spent. */
.dcMC .mHeadRow2 { display:flex; align-items:center; justify-content:space-between; column-gap:8px; min-width:0; margin-top:1px; color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.02em; line-height:1.35; }
/* #cardline (founder 15 Aug, three cards side by side): the competition, the tour
and the ground each take ONE line. Two-line clamps stacked three deep made the
head taller than the scores it introduces; on one line the card reads as a
rectangle and every card in the row starts its teams at the same height. */
/* The competition asks first and never shrinks below what it needs, capped at just
over half the row; the ground then takes ALL the rest. Measured the other way
round first - ground capped, competition flexible - and a 293px stadium name ate
the competition down to 86px on a phone. */
.dcMC .mComp .mCompTx { flex:0 0 auto; max-width:56%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The tour and which match of it, on their own quieter line. Splitting this off the
competition name is what stopped the top line clipping mid word. */
.dcMC .mHeadRow2 .mSeries { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
opacity:.82; font-weight:700; }
.dcMC .mTag { color:var(--red); font-weight:800; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; margin-right:5px; }
/* #cardhead2: inside the flex head row the column-gap already spaces the tag. */
.dcMC .mComp > .mTag, .dcMC .mComp > .mTagHold { flex:0 0 auto; margin-right:0; }
.dcMC .mCard.fin .mTag { color:var(--green); }
/* A ground's name is a fact, not decoration: "Marrara Cricket Gro..." tells the reader
nothing. It wraps to a second line now instead of being cut mid word, and the pin
stays on the first line beside it. */
/* #cardline: one line, and the pin sits ON the name. It used to be flex-start on a
two-line right-aligned block, so the pin hung at the top-left of a box as wide as
the column while "Galle" began far to its right - a marker pointing at nothing.
The name gets the wider half of the head now that the left side is single-line. */
.dcMC .mGround { flex:1 1 auto; min-width:0; margin-left:auto; display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; text-align:right; color:var(--muted); font-size:.64rem; font-weight:700; overflow:hidden; }
/* The legacy inline card body in home.html (unreachable once the component loads)
still has the ground as a direct child of the head; keep it on the same line there. */
.dcMC .mTop > .mGround { float:right; max-width:54%; margin-left:8px; }
.dcMC .mGround svg { flex:0 0 auto; opacity:.75; }
.dcMC .mGround .gTxt { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/* -- middle: team rows, side by side with VS between. crest is REAL artwork
(dc-crest.js strips its own border/ring/background once a logo lands), so no
border is added here; falls back to dc-crest.js's own initials badge when a
team has no mapped logo - never a broken image (see wireCrestFallback below). */
/* THE MATCH ROW (founder 2026-08-02: "flag ke thoda space chorkar naam, VS
ekdam beech me, sab aligned" - and the same discipline on live, upcoming AND
played cards). One symmetric grid: equal team columns either side of a fixed
centre lane, so VS lands on the card's true midline no matter how long the
names are, and every card in the rail lines up with its neighbours. */
.dcMC .mTms { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:10px; align-items:start; margin-top:12px; }
.dcMC .mTms .tCol { min-width:0; display:flex; flex-direction:column; justify-content:flex-start; }
.dcMC .mTms .tCol.right { text-align:right; align-items:flex-end; }
/* founder 17 Aug 2026 16:10 (Match Centre): "dono team ke naam ek line me, crest team name ke thik
peeche". The name no longer stretches to fill its column (that slack was the gap between the
away crest and the away name); it takes only its own width, so the crest sits flush against it
on both sides, and it stays on ONE line - a name too long for a narrow card is cut with an
ellipsis rather than folded into two rows that pushed the scores out of line. */
.dcMC .mTms .tn2 { display:flex; align-items:center; min-width:0; max-width:100%; gap:7px; font-size:.86rem; font-weight:800; color:var(--ink); line-height:1.2; min-height:22px; letter-spacing:-.005em; }
/* max-width:100% above: the right column is align-items:flex-end, so this row was shrink-to-fit and a long
name (Royal Challengers Bengaluru) ran left into the VS lane once it stopped wrapping (founder's WPL
screenshot, 17 Aug 16:27). Capped, the name shrinks and clips instead. A name over 20 characters is set
a size smaller (.nmLong, from tCell), and only on a phone-width column, where even that cannot fit on
one line, may it take two lines - the crest stays beside its first line. */
.dcMC .mTms .nmTxt.nmLong { font-size:.78rem; letter-spacing:-.01em; }
@media (max-width:480px){
.dcMC .mTms .nmTxt.nmLong { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:normal; }
.dcMC .mTms .tCol.right .nmTxt.nmLong { text-align:right; }
}
.dcMC .mTms .tCol.right .tn2 { flex-direction:row-reverse; }
.dcMC .mTms .nmTxt { flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
/* founder 2026-08-05: "First, the flag is missing. If there's no flag, then in
bold, the team's color, just make it the jersey color." The 2026-08-02 rule
blanked the badge for a team the logo map does not know; now the initials
STAY, in the team's own JERSEY colour. The colour rides in as --tc on the
crest span (dc-crest.js reads it from dc-teams.js's brand-colour map; a team
absent from that map gets DCTeam's stable hashed hue, never a random one).
Contrast: the initials are the jersey colour pulled toward ink on light
(60% jersey / 40% ink) and toward white on dark (48% / 52%) - a saturated
brand hex as raw text fails on the dark card - sitting on a soft disc
tinted with the same colour. The mixes were measured against the real
dc-teams map: every jersey clears 4.5:1 on its disc in dark, and all but
CSK/Chennai yellow (3.4:1, yellow-on-light physics; the full team name in
ink stands beside the badge) clear it in light. So CSK reads yellow, MI
reads blue, and both stay legible in either theme.
dc-mobile.css's outer monogram-badge chrome is still stripped: the coloured
disc is the .dcCrestFb itself, not a second ring around it. */
.mTms .dcCrest:not(.dcCrestLogo), .dcMC .fxTeam .dcCrest:not(.dcCrestLogo){background:none!important;border:0!important;box-shadow:none!important;}
/* founder 17 Aug 2026 16:10: "initials ko bold aur colourful karo" - the soft tint became a SOLID
disc in the jersey colour with the initials in the contrast ink DCTeam.textOn picks (--tcfg:
white on a dark jersey, ink on CSK yellow), 900 weight, a faint ring of the same colour so it
reads as a badge and not a dot. Same in both themes: the disc carries its own contrast. */
.mTms .dcCrest .dcCrestFb, .dcMC .fxTeam .dcCrest .dcCrestFb{
font-weight:900; font-size:8.5px!important; letter-spacing:.03em;
color:var(--tcfg, #ffffff);
background:var(--tc, var(--muted));
box-shadow:0 0 0 2px color-mix(in srgb, var(--tc, var(--muted)) 26%, transparent), 0 1px 2px rgba(15,23,42,.18);
}
html[data-theme="dark"] .mTms .dcCrest .dcCrestFb, html[data-theme="dark"] .dcMC .fxTeam .dcCrest .dcCrestFb{
color:var(--tcfg, #ffffff);
background:var(--tc, var(--muted));
box-shadow:0 0 0 2px color-mix(in srgb, var(--tc, var(--muted)) 32%, transparent);
}
/* a crest that came from the fixture itself (SportMonks image_path): a square badge, the
artwork whole (contain), never cropped into the 22x16 flag frame the map's flags use */
.mTms .dcCrestLogo.dcCrestSm, .dcMC .fxTeam .dcCrestLogo.dcCrestSm{width:22px!important;height:22px!important;border-radius:5px;overflow:hidden;background:none;}
.mTms .dcCrestLogo.dcCrestSm img, .dcMC .fxTeam .dcCrestLogo.dcCrestSm img{width:100%;height:100%;object-fit:contain;}
.mTms .dcCrestLogo{border-radius:3px;overflow:hidden;width:22px!important;height:16px!important;}
.mTms .dcCrestLogo img{width:100%;height:100%;object-fit:cover;}
.dcMC .mTms .dcCrest { flex:0 0 auto; }
/* 1.1rem on EVERY state (was 1.16 live / 1.0 finished): the score is the one
focal point per card, so finished cards no longer demote it below the
teams' visual weight while live cards shout a little less. */
.dcMC .mTms .sc2 { font-family:var(--font-numeric,"Spline Sans Mono",monospace); font-variant-numeric:tabular-nums lining-nums; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-top:3px; color:var(--ink); }
.dcMC .mTms .sc2 small { font-size:.64rem; color:var(--muted); font-weight:700; }
/* A red-ball side's COMPLETED earlier innings, printed before the current one as
"311 & 126/7". It is context, not the live number, so it sits back a step in
both size and colour while the innings that matters keeps full weight. */
.dcMC .mTms .sc2 .scPrev { font-size:.82em; color:var(--muted); font-weight:700; }
/* the centre lane: a fixed-width column, so VS is optically centred on every
card rather than drifting with the longer team name */
.dcMC .mVs { color:var(--muted); font-weight:800; font-size:.62rem; letter-spacing:.08em;
text-align:center; align-self:start; padding-top:3px; }
.dcMC .tCol.won .tn2 { font-weight:800; }
.dcMC .tCol.won .sc2 { color:var(--gold2); }
/* -- status slot: fixed min-height reserves the same space whether or not this
particular match has the optional line, so structure never shifts card to
card (the exact bug the founder flagged between the 1st/2nd live cards) -- */
.dcMC .mStatus { margin-top:9px; min-height:18px; }
/* .7rem/600 (was .76/700): the status is a SENTENCE, so it reads as prose a
step under the team names instead of competing with them; gold still marks
it as the live signal. */
.dcMC .mCard.live .mStatus { display:flex; align-items:center; gap:10px; color:var(--gold2); font-weight:600; font-size:.7rem; line-height:1.3; }
/* the state chip takes the empty half of the situation line */
.dcMC .mCard.live .mStatus { flex-wrap:wrap; row-gap:6px; }
/* founder 18 Aug 2026 00:30 (Galle at stumps): the state chip sat parked at the far right of the line,
away from the sentence it belongs to. It now follows the sentence directly - "Sri Lanka trail by 179 runs
· Stumps · Day 3" - a clear 12px breath between them, and if the phone is too narrow it drops under the
sentence at the left edge, never stranded on the right. */
.dcMC .mCard.live .mStatus .mHoldSlot { flex:0 0 auto; margin-left:12px; }
.dcMC .mCard.live .mStatus .stTxt { flex:0 1 auto; }
/* founder 18 Aug 2026 01:30: one gold sentence, one font, one weight - the number is not bolder than its words */
.dcMC .mCard.live .mStatus .stOne { color:var(--gold); font-weight:700; font-size:.74rem; letter-spacing:.005em; }
.dcMC .mCard.live .mStatus .stOne b { font-weight:inherit; color:inherit; }
/* #holdleft (founder 15 Aug, SL-IND at lunch): with no situation line - one
innings played, nothing to lead or trail - the chip was the row's only child
and margin-left:auto parked it at the far right, under the side that has not
batted, where the reader never looks. Alone, it starts at the left, under the
batting side, where the score is. With a sentence beside it, nothing changes. */
.dcMC .mCard.live .mStatus .mHoldSlot:first-child { margin-left:0; }
.dcMC .mCard.live .mStatus .mHoldSlot .mTagHold { margin-right:0; }
/* "129 runs" is one phrase and must break as a unit; at 320px the chase line
otherwise wrapped to "Pakistan need / 129 / runs", stranding the number. */
.dcMC .mStatus .needQty { white-space:nowrap; }
.dcMC .mCard.fin .mStatus { display:flex; flex-direction:column; gap:6px; }
/* verdict = prose too: .7rem/600 with only the winner's name (the ) kept
heavy, so "X won by N runs" stops reading like a second headline. */
.dcMC .finVerdict { padding:5px 10px; border-radius:9px; font-size:.7rem; font-weight:600; line-height:1.35; color:var(--ink);
background:color-mix(in srgb,var(--green) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--green) 26%,var(--line)); }
.dcMC .finVerdict b { color:var(--green); font-weight:800; }
.dcMC .finVerdict.plain { background:var(--soft); border-color:var(--line); color:var(--muted); }
.dcMC .finMom { display:flex; align-items:center; gap:6px; min-width:0; }
/* micro-labels join the .64rem meta step (were .56rem = 8.96px, below the
legibility floor); their quietness now comes from colour + weight 700, not
from an illegible size. */
.dcMC .finMom .lbl { color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.dcMC .finMom .who { margin-left:auto; min-width:0; font-size:.64rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* -- bottom row: small pill bottom-left, time/date bottom-right (live + played) -- */
/* #cardline: the action bar was taller than the words in it. */
.dcMC .mBottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; }
.dcMC .mPill { display:inline-flex; align-items:center; gap:4px; font-size:.64rem; font-weight:800; letter-spacing:.01em; padding:4px 9px; border-radius:8px; white-space:nowrap; }
.dcMC .mCard.live .mPill { background:linear-gradient(135deg,#f5cd60,#c78f06); color:#191104; }
.dcMC .mCard.fin .mPill { background:var(--track); color:var(--ink); border:1px solid var(--line); }
.dcMC .mCard.fin .mPill.deep { background:linear-gradient(135deg,#f5cd60,#c78f06); color:#191104; border:none; }
.dcMC .mWhen { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.64rem; font-weight:700; white-space:nowrap; }
.dcMC .mCard.live .mWhen { color:var(--gold2); }
.dcMC .mWhen svg { display:block; opacity:.85; flex:0 0 auto; }
/* -- finished: same four-step scale as every other state (founder 2026-07-29:
the per-state size fork DOUBLED the number of sizes on the board - eight in
one card - and shrank the score below the team names; state now differs by
colour and content only, never by type size) -- */
.dcMC .mCard.fin .mTms { margin-top:8px; }
.dcMC .livedot { animation:hlLivedot 1.4s infinite; }
.dcMC .mCard { transition:none; }
.dcMC .mCard:hover { transform:none; }
.homeLive{ margin:11px 0 16px; border-radius:12px; }
.dcMC .mCard{ padding:12px 13px; }
.dcMC .mTms .sc2{ font-size:1.05rem; }
/* ===== UPCOMING · home.html's fixCard, verbatim (founder 2026-08-05, the same
screenshot sent three times): teams STACKED left with 22px crests, a bordered
STARTS block right - the day (Today/Tomorrow in green) over the IST time in
gold mono - format pill + Upcoming tag top-right, venue + city underneath,
full-width CTA footer. The first unification wrongly gave upcoming the played
card's side-by-side skeleton; "same chip everywhere" means each STATE keeps
its own shape, identical on every page, and THIS is the upcoming shape.
Every rule is scoped .dcMC .mCard.fx so these class names can never collide
with a page's own (the bare .fx on the old live.html was that collision). */
.dcMC .mCard.fx { padding:0; }
.dcMC .mCard.fx .fxTop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 14px 0; }
.dcMC .mCard.fx .srs2 { font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.4; min-width:0; }
.dcMC .mCard.fx .fxBadges { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.dcMC .mCard.fx .fxTag { flex:0 0 auto; font-size:.56rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); background:color-mix(in srgb,var(--blue) 12%,transparent); border-radius:999px; padding:3px 9px; }
/* FORMAT CHIP - the colour IS the answer (founder 2026-08-10: "eye catching lagna
chahiye ki ye kis format ka hai"). Measured on prod before the change: T20, ODI,
100-Ball and List A all rendered rgb(138,101,0) at 8.96px, so colour carried no
information at all and the format could only be had by reading. Now every family
owns a fill and the chip is solid at .68rem, which is what makes it land before
the words do.
Selector is `.dcMC .fxFmt`, NOT `.mCard.fx .fxFmt`: the same chip now rides the
live and played cards too, where the format was not shown at all. Its family
comes from fmtFam() in dc-matchcard.js, which reads the printed label, so the
colour can never contradict the word sitting on top of it.
display is inline-BLOCK, not inline-flex, and that is load-bearing: on the live
and played cards the chip sits inside `.mComp`, which is a `-webkit-box` with
`-webkit-line-clamp:2`. A flex child inside a line-clamped box is where clamping
quietly stops working. The chip holds only text, so inline-block costs nothing.
ONE PALETTE FOR BOTH THEMES, and the first cut got this backwards. I gave dark
mode brighter fills, reasoning that a dark card needs a brighter chip - but the
text on it is WHITE, so lifting the fill lowers the contrast. Measured: amber
went to 3.19:1 and green to 3.30:1, both under the 4.5 needed at this size. The
light values clear it everywhere (5.02 at worst), so there is no dark override
at all. */
.dcMC .fxFmt { flex:0 0 auto; display:inline-block; vertical-align:middle; font-size:.68rem;
font-weight:800; letter-spacing:.05em; text-transform:uppercase; line-height:1.35;
white-space:nowrap; border-radius:999px; padding:2px 9px; color:#fff;
background:#8a6500; border:0; }
.dcMC .mCard.live .fxFmt, .dcMC .mCard.fin .fxFmt { margin-right:6px; }
/* #cardline: the format's own slot in the middle of the head, between the
competition and the ground. It never grows, never shrinks, never wraps. */
.dcMC .mFmtSlot { flex:0 0 auto; display:inline-flex; align-items:center; }
.dcMC .mCard.live .mFmtSlot .fxFmt, .dcMC .mCard.fin .mFmtSlot .fxFmt { margin-right:0; }
/* #fmtpalette · the whole set re-cut on the founder's word (15 Aug: "test ka color
white na rakho, thoda fika lagta hai... red mat rakhna... sab ka color revamp
karo"). White was honest about the clothing and dead on the page, and red was
never available: Test earns the deep field green instead - the oldest colour in
the game, and nothing else on a card wears it.
Six families, six hues far enough apart to be told apart at 8.96px: green, blue,
amber, violet, teal, plum. All carry WHITE text, and all clear 4.5:1 against it
(worst is teal at 4.9), so there is still no dark-theme override to keep in step. */
.dcMC .fxFmt[data-fam="test"] { background:#14532d; }
.dcMC .fxFmt[data-fam="odi"] { background:#2544a8; }
.dcMC .fxFmt[data-fam="t20"] { background:#9a5410; }
.dcMC .fxFmt[data-fam="hundred"] { background:#5b3bbf; }
.dcMC .fxFmt[data-fam="lista"] { background:#0e7490; }
.dcMC .fxFmt[data-fam="women"] { background:#8e3b6e; }
/* #livedot2 (founder 15 Aug): a live match wears a small red dot beside its format,
"zyada deep nahi, ekdam aasani se undisturb dikhne wala". So: 6px, a soft red, no
pulse. The pulse is what made the last one nag; a steady dot is read once and then
left alone. It is decoration only - the card already carries a screen-reader LIVE
tag - so it is drawn in CSS and announced to nobody. */
.dcMC .mCard.live .mFmtSlot::after { content:""; flex:0 0 auto; width:6px; height:6px; margin-left:6px;
border-radius:50%; background:#e2574c; }
.dcMC .mCard.fx .fxMain { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; }
.dcMC .mCard.fx .fxTeams { display:flex; flex-direction:column; gap:9px; min-width:0; }
.dcMC .mCard.fx .fxTeam { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--ink); min-width:0; }
.dcMC .mCard.fx .fxTeam .nm3 { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcMC .mCard.fx .fxTeam .dcCrest { flex:0 0 auto; }
.dcMC .mCard.fx .fxTime { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; text-align:right; padding-left:12px; border-left:1px solid var(--line); }
.dcMC .mCard.fx .fxTime .lbl { font-size:.56rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.dcMC .mCard.fx .fxTime .d { font-size:.76rem; font-weight:800; color:var(--ink); line-height:1.2; white-space:nowrap; }
.dcMC .mCard.fx .fxTime .d.rel { color:var(--green); }
.dcMC .mCard.fx .fxTime .t { font-size:.9rem; font-weight:800; color:var(--gold2); white-space:nowrap; }
.dcMC .mCard.fx .fxVenue { display:flex; align-items:center; gap:7px; padding:0 14px 11px; font-size:.72rem; color:var(--muted); font-weight:600; min-width:0; }
.dcMC .mCard.fx .fxVenue span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcMC .mCard.fx .fxVenue::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--muted); opacity:.5; flex:0 0 auto; }
.dcMC .mCard.fx .fxCta { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:9px 14px; border-top:1px solid var(--line); font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold2); border-radius:0 0 14px 14px; }
/* the CTA label rides in an .mPill span ONLY so the shared {cta} option keeps
replacing it; here it is plain footer text, so the pill chrome (dc-mobile's
shared pill shape included) is unset */
.dcMC .mCard.fx .fxCta .mPill { display:inline; background:none; border:0; padding:0; color:inherit; font:inherit; letter-spacing:inherit; }
/* TWO ACTIONS (founder 2026-08-12): the schedule and the venue briefing, side by side,
split by a hairline so the footer reads as two choices rather than one long label.
Rendered only when a caller passes opts.second, so every other page's footer is
untouched. The alternate half lights gold on hover and carries a real focus ring: it
is a click target layered over the card's own link, so it has to look and behave like
one for a keyboard too. */
.dcMC .mCard.fx .fxCta2 { padding:0; justify-content:stretch; gap:0; }
.dcMC .mCard.fx .fxCta2 .fxAct { display:flex; align-items:center; justify-content:space-between;
gap:8px; flex:1 1 0; min-width:0; padding:9px 14px; color:inherit; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; transition:background-color .15s, color .15s; }
.dcMC .mCard.fx .fxCta2 .fxAct + .fxAct { border-left:1px solid var(--line); }
.dcMC .mCard.fx .fxCta2 .fxAlt { cursor:pointer; }
.dcMC .mCard.fx .fxCta2 .fxAlt:hover { background:color-mix(in srgb, var(--gold) 10%, transparent); color:var(--gold); }
.dcMC .mCard.fx .fxCta2 .fxAlt:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; border-radius:0 0 14px 0; }
@media (max-width:380px){
.dcMC .mCard.fx .fxCta2 { flex-wrap:wrap; }
.dcMC .mCard.fx .fxCta2 .fxAct { flex:1 1 100%; }
.dcMC .mCard.fx .fxCta2 .fxAct + .fxAct { border-left:0; border-top:1px solid var(--line); }
}
/* TWO ACTIONS ON THE LIVE CARD (venue briefing reach, 12 Aug). The deep-room pill
keeps the left half; the right half swaps the passive start time for the
briefing entry. The hairline on top makes the row read as the card's action
bar, the same grammar as the upcoming chip's split footer. Rendered only when
a caller passes opts.second, so every other live card is untouched. */
.dcMC .mCard.live .mBottom2 { margin-top:8px; padding-top:0; border-top:1px solid var(--line); }
.dcMC .mCard.live .mBottom2 .fxAct { display:flex; align-items:center; gap:8px; min-width:0; padding-top:7px; }
.dcMC .mCard.live .mBottom2 .fxAlt { color:var(--gold2); font-size:.6rem; font-weight:800;
letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
transition:color .15s; }
.dcMC .mCard.live .mBottom2 .fxAlt:hover { color:var(--gold); }
.dcMC .mCard.live .mBottom2 .fxAlt:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ .dcMC .mCard.live .mBottom2 .fxAlt { transition:none; } }
/* the fx crest keeps its inline 22px box; the played/live 6px-collapse and
16px-logo overrides above are .mTms-scoped, so they never reach in here */
/* ===== LIVE TICK · the one-shot gold flash (founder 2026-08-12: live cards must
move like a live-score app - "the ball changes on screen"). startLivePulse in
dc-matchcard.js stamps .scTick on a score cell whose TEXT just moved and takes
it off again on animationend, so the flash runs exactly once per real change:
the number rises gold, then settles back into the card's own ink. Colour and a
soft glow only - the site's grammar is navy + gold, and a scoreboard should
tick, not bounce. */
.dcMC .mTms .sc2.scTick { animation: dcScTick 1.1s ease-out 1; }
@keyframes dcScTick {
0% { color: var(--gold2, #c69200); text-shadow: 0 0 14px color-mix(in srgb, var(--gold, #c69200) 45%, transparent); }
60% { color: var(--gold2, #c69200); text-shadow: 0 0 6px color-mix(in srgb, var(--gold, #c69200) 25%, transparent); }
100% { color: inherit; text-shadow: none; }
}
/* a reader who asked the OS for less motion still gets the fresh number -
just without the flash; nothing else on the card moves either way */
@media (prefers-reduced-motion: reduce) {
.dcMC .mTms .sc2.scTick { animation: none; }
}
/* #cardhead2 (phone step). THIS BLOCK LIVES AT THE END ON PURPOSE. It sat near the
top first, where the later .mComp / .mGround rules - same specificity, further down
the file - simply overruled it, so a phone kept the desktop .64rem and "Galle
International Stadium" lost its last two letters. Measured after the move: the head
row needs 284 of the 301 a phone card offers. */
@media (max-width:400px){
.dcMC .mComp, .dcMC .mGround, .dcMC .mHeadRow2, .dcMC .mComp .mCompTx, .dcMC .mHeadRow2 .mSeries { font-size:.60rem; }
.dcMC .mComp { column-gap:6px; }
.dcMC .mGround { gap:3px; }
}
/* #groundfit (16 Aug 2026) - THE GROUND'S NAME IS THE FACT, SO IT ASKS FIRST.
Head row one is [tag][competition][ground]. The competition asked first and never shrank
(flex:0 0 auto, capped 56%); the ground took what was left. That fit while a card was the
full width of the phone, and stopped fitting the day the home board became a two-at-a-time
slider: measured 16 Aug at 390px, the head row is 336px on Match Centre and 290px on home,
and "Galle International Stadium" needs 133px but is handed 128 - short by five pixels.
"Marrara Cricket Ground No. 1" is short by ten.
So the order is swapped, with a bound on both sides. The ground takes its natural width and
never shrinks (flex:0 0 auto), capped at 60% so it can never do to the competition what the
old ground-flexible layout did (a 293px stadium name once ate the competition down to 86px);
the competition now shrinks first and ellipsises, which is the cheaper loss - a tour line
sits under it and says the same thing, while a clipped ground name says nothing at all.
No width threshold and no container query: this holds at any card width, which is the point,
because the card width is what changed under the last fix. */
.dcMC .mComp .mCompTx { flex:0 1 auto; }
.dcMC .mComp > .mGround { flex:0 0 auto; max-width:60%; }