@layer reset, tokens, base, layout, components, utilities;
@layer components{
/* == w-crest ====== */
.w-crest{display:inline-grid;place-items:center;flex:none;inline-size:32px;block-size:32px;border-radius:var(--r-pill);background:var(--tile);object-fit:contain;overflow:hidden;color:var(--text-2);font:600 var(--fs-12)/1 var(--font-sans)}
.w-crest--ini{text-transform:uppercase}
.w-face{display:inline-grid;place-items:center;flex:none;inline-size:40px;block-size:40px;border-radius:var(--r-pill);background:var(--tile);object-fit:cover;object-position:50% 15%;overflow:hidden;color:var(--text-2);font:600 var(--fs-14)/1 var(--font-sans)}
.w-sec__count{display:inline-grid;place-items:center;min-inline-size:24px;block-size:24px;padding-inline:var(--s2);border-radius:var(--r-pill);background:var(--tile);font:var(--t-label);color:var(--text-2)}
:lang(hi) .w-crest--ini{text-transform:none}
.w-face--ini{text-transform:uppercase}
:lang(hi) .w-face--ini{text-transform:none}

/* == w-phero ====== */
.w-phero{gap:var(--s2)}
.w-phero .w-hero__scene img{opacity:.5;object-position:50% 40%}
.w-phero__id{display:flex;align-items:center;gap:var(--s3);min-inline-size:0}
.w-phero__crest{inline-size:56px;block-size:56px;font-size:var(--fs-16)}
.w-phero__title{margin:0;font:var(--t-h1);letter-spacing:var(--tr-h1);color:var(--text);overflow-wrap:break-word;min-inline-size:0}
main .w-phero__title{margin-block-start:0}
.w-phero__line{font:var(--t-data);color:var(--text-2);max-inline-size:none}
:lang(hi) .w-phero__title{letter-spacing:0}

/* == w-strip ====== */
.w-strip{display:flex;gap:var(--s2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-block:var(--s3);min-inline-size:0}
.w-strip::-webkit-scrollbar{display:none}
.w-strip__item{display:grid;gap:var(--s1);flex:none;min-inline-size:148px;min-block-size:var(--tap);padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--card);scroll-snap-align:start;color:var(--text)}
.w-strip__item:hover{text-decoration:none;background:var(--card-2)}
.w-strip__item--live{box-shadow:var(--e-ring-live)}
.w-strip__state{font:var(--t-label);color:var(--text-2);white-space:nowrap}
.w-strip__item--live .w-strip__state{color:var(--live-ink)}
.w-strip__line{display:grid;grid-template-columns:20px auto 1fr;align-items:center;gap:var(--s2)}
.w-strip__line .w-crest{inline-size:20px;block-size:20px;font-size:var(--fs-12)}
.w-strip__code{font:var(--t-data);font-weight:600}
.w-strip__score{justify-self:end;font:600 var(--fs-14)/1.25rem var(--font-score);white-space:nowrap}

/* == w-hero ====== */
.w-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:var(--s3);padding:var(--s4);border-radius:var(--r-xl);background:var(--card);min-inline-size:0}
.w-hero__scene{position:absolute;inset:0;z-index:-1}
.w-hero__scene img{inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover;opacity:.45;mask-image:linear-gradient(180deg,#000 20%,transparent 92%)}
.w-hero__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-inline-size:0}
.w-hero__comp{font:var(--t-meta);color:var(--text-2);min-inline-size:0}
.w-hero__teams{display:grid;gap:var(--s2);list-style:none;padding:0;margin:0}
.w-hero__team{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--s3);min-block-size:48px;color:var(--text)}
.w-hero__team .w-crest{inline-size:40px;block-size:40px}
.w-hero[data-state="live"] .w-hero__team:not([data-batting]){color:var(--text-2)}
.w-hero__name{font:600 var(--fs-18)/1.3 var(--font-sans);overflow-wrap:break-word;min-inline-size:0}
.w-hero__score{font:600 var(--fs-28)/1 var(--font-score);letter-spacing:var(--tr-score);text-align:end;white-space:nowrap}
:lang(hi) .w-hero__score{letter-spacing:0}
.w-hero__inn1,.w-hero__ov{font:400 var(--fs-13)/1.3 var(--font-sans);color:var(--text-2);letter-spacing:0}
.w-hero__pre{font:var(--t-meta);color:var(--text-2)}
.w-hero__state{font:var(--t-status);color:var(--text);max-inline-size:none}
.w-hero__line{font:var(--t-status);color:var(--text);max-inline-size:none}
.w-hero__line--gold{color:var(--gold)}
.w-hero__line--win{color:var(--green)}
.w-hero__when{font:var(--t-data);color:var(--text-2);max-inline-size:none}
.w-hero__cd{font-weight:600;color:var(--status)}
.w-hero__chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.w-chip{display:grid;grid-template-columns:40px auto;grid-template-rows:auto auto;column-gap:var(--s2);align-items:center;padding:var(--s1) var(--s3) var(--s1) var(--s1);border-radius:var(--r-pill);background:var(--glass)}
.w-chip .w-face{grid-row:1/3}
.w-chip__name{font:var(--t-data);font-weight:600;color:var(--text)}
.w-chip__line{font:var(--t-meta);color:var(--text-2)}
.w-chip--bowl .w-chip__line{color:var(--blue)}
.w-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
@media (min-width:56.25em){.w-hero{padding:var(--s6) var(--s7);gap:var(--s4)}.w-hero__score{font-size:var(--fs-40)}.w-hero__name{font-size:var(--fs-20)}.w-hero__team .w-crest{inline-size:56px;block-size:56px}.w-hero__team{grid-template-columns:56px minmax(0,1fr) auto}}

/* == w-row ====== */
.w-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3);align-items:center;min-block-size:56px;padding:var(--s3) var(--s4);color:var(--text);border-block-start:1px solid var(--line)}
.w-row:first-child{border-block-start:0}
.w-row:hover{text-decoration:none;background:var(--card-2)}
.w-row__teams{display:grid;gap:var(--s1);min-inline-size:0}
.w-row__team{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:var(--s2)}
.w-row__team .w-crest{inline-size:24px;block-size:24px;font-size:var(--fs-12)}
.w-row__name{font:var(--t-data);font-weight:600;overflow-wrap:break-word;min-inline-size:0}
.w-row__side{display:grid;justify-items:end;gap:var(--s1)}
.w-row__score{font:600 var(--fs-15)/1.3 var(--font-score);white-space:nowrap}
.w-row__when{font:var(--t-meta);color:var(--text-2);white-space:nowrap}
.w-row__when--live{color:var(--live-ink);font-weight:600}
.w-row__when--gold{color:var(--gold)}
.w-row__sit{grid-column:1/-1;font:var(--t-meta);color:var(--text-2)}

/* == w-group ====== */
.w-group{border-radius:var(--r-lg);background:var(--card);overflow:hidden;min-inline-size:0}
.w-group__head{display:flex;align-items:center;gap:var(--s2);min-block-size:48px;padding:var(--s2) var(--s4);border-block-end:1px solid var(--line)}
.w-group__seal{flex:none;inline-size:28px;block-size:28px;border-radius:var(--r-sm)}
.w-group__name{margin:0;font:var(--t-data);font-weight:600;color:var(--text);min-inline-size:0}
.w-group__count{margin-inline-start:auto;font:var(--t-meta);color:var(--text-2)}
.w-group__more{display:flex;align-items:center;justify-content:center;min-block-size:var(--tap);border-block-start:1px solid var(--line);font:var(--t-data);font-weight:600;color:var(--text-2)}
.w-group__more:hover{color:var(--text);text-decoration:none}
.w-alllive{display:flex;align-items:center;justify-content:center;min-block-size:var(--tap);border-radius:var(--r-pill);background:var(--glass);font:var(--t-data);font-weight:600;color:var(--text)}

/* == w-tbl ====== */
.w-tbl{overflow-x:auto;border-radius:var(--r-lg);background:var(--card);min-inline-size:0}
.w-tbl table{inline-size:100%;font:var(--t-data);color:var(--text)}
.w-tbl caption{padding:var(--s3) var(--s4);text-align:start;font:var(--t-label);color:var(--text-2)}
.w-tbl :is(th,td){block-size:44px;padding-inline:var(--s3);text-align:end;white-space:nowrap;border-block-end:1px solid var(--line)}
.w-tbl :is(th,td):first-child{text-align:start;white-space:normal;padding-inline-start:var(--s4)}
.w-tbl thead th{font:var(--t-label);color:var(--text-2)}

/* == w-ix ====== */
.w-azpills{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;padding:0;margin:0}
.w-azpills a{display:inline-grid;place-items:center;min-inline-size:var(--tap);min-block-size:var(--tap);border-radius:var(--r-pill);background:var(--glass);color:var(--text-2);font:var(--t-data);font-weight:600}
.w-azpills a[aria-current]{background:var(--btn);color:var(--btn-ink)}
.w-azpills a:hover{text-decoration:none;color:var(--text)}
.w-ixrow{display:flex;align-items:center;gap:var(--s3);min-inline-size:0}
.w-tbl .w-face{inline-size:32px;block-size:32px;font-size:var(--fs-12)}

/* == w-empty ====== */
.w-empty{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--card);min-inline-size:0}
.w-empty__art{flex:none;inline-size:72px;block-size:auto;opacity:.9}
.w-empty__body{display:grid;gap:var(--s1);min-inline-size:0}
.w-empty__title{font:var(--t-data);font-weight:600;color:var(--text);max-inline-size:none}
.w-empty__when{font:var(--t-meta);color:var(--text-2);max-inline-size:none}

/* == w-tabs ====== */
.w-tabs{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;min-inline-size:0}
.w-tabs::-webkit-scrollbar{display:none}
.w-tabs__item{display:inline-flex;align-items:center;flex:none;block-size:var(--tap);padding-inline:var(--s4);border-radius:var(--r-pill);background:var(--glass);font:var(--t-data);font-weight:600;color:var(--text-2);white-space:nowrap}
.w-tabs__item:hover{color:var(--text);text-decoration:none}
.w-tabs__item[aria-current]{background:var(--btn);color:var(--btn-ink)}
.w-tabs__item:focus-visible{outline-offset:-2px}

/* == w-ser ====== */
.w-ser{min-inline-size:0}
.w-ser--live .w-sec__title{color:var(--gold)}
.w-ser__list{display:grid;list-style:none;padding:0;margin:0;border-radius:var(--r-lg);background:var(--card);overflow:hidden;min-inline-size:0}
.w-ser__list>li+li{border-block-start:1px solid var(--line)}
.w-ser__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);list-style:none;padding:0;margin:0;min-inline-size:0}
.w-ser__cards .w-ser__row{border-radius:var(--r-lg);background:var(--card)}
.w-ser__row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:var(--s3);min-block-size:56px;padding:var(--s3) var(--s4);color:var(--text)}
.w-ser__row:hover{text-decoration:none;background:var(--card-2)}
.w-ser__row--live{box-shadow:inset 3px 0 0 var(--gold)}
.w-ser__body{display:grid;gap:var(--s1);min-inline-size:0}
.w-ser__name{font:var(--t-data);font-weight:600;overflow-wrap:break-word;min-inline-size:0}
.w-ser__dates{font:var(--t-meta);color:var(--text-2);overflow-wrap:break-word}
.w-ser__tags{display:grid;justify-items:end;gap:var(--s1)}
.w-ser__st{font:var(--t-label);color:var(--text-2);white-space:nowrap}
.w-ser__st--live{color:var(--gold)}
.w-ser__st--up{color:var(--blue)}
.w-ser__fmt{padding:2px var(--s2);border-radius:var(--r-pill);background:var(--tile);font:var(--t-label);color:var(--text-2);white-space:nowrap}
@media (min-width:48em){.w-ser__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:90em){.w-ser__cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
}
