/* Arena layer: navigation, homepage modules and motion, loaded after every other stylesheet. Motion is progressive: it only starts once arena.js marks with .arena-js, and every animation is disabled under prefers-reduced-motion. */ :root{--arena-radius:18px;--arena-ease:cubic-bezier(.2,.8,.2,1);--arena-red:#e5322d;--arena-glow:0 0 0 1px #00e5ff33,0 18px 40px -18px #00e5ff55;--lime:#b8ff00;--magenta:#ff2d78} html:not([data-theme=dark]){--arena-glow:0 0 0 1px #1d4ed833,0 18px 40px -20px #1d4ed866;--lime:#3f8f00;--magenta:#d4195f;--hover:#eef3ff} html{scroll-behavior:smooth;scroll-padding-top:132px} body{overflow-x:hidden} /* ---------- Header: sticky glass bar ---------- */ .topline{font-size:10px} body>header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s,background .3s} html[data-theme=dark] body>header{background:#12121acc} html:not([data-theme=dark]) body>header{background:#ffffffd9} body>header.is-scrolled{box-shadow:0 10px 30px -18px #000c} body>header .header{min-height:68px;transition:min-height .3s var(--arena-ease)} body>header.is-scrolled .header{min-height:58px} nav#nav{gap:4px} nav#nav a{padding:8px 12px;border-radius:999px;transition:background .2s,color .2s} nav#nav a:hover{text-decoration:none;background:var(--hover,var(--soft));color:var(--ink)} nav#nav a[aria-current]{box-shadow:none;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)} .brand .brand-mark{transition:transform .6s var(--arena-ease)} .brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)} #theme{border-radius:999px;width:40px;height:40px;padding:0} /* Scroll progress: a cricket ball rolls along the top edge. */ .arena-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--lime),var(--gold))} /* ---------- Mobile bottom tab bar ---------- */ .tabbar{display:none} @media (max-width:760px){ .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;border:1px solid var(--border);border-radius:20px;padding:6px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -12px #000c} html[data-theme=dark] .tabbar{background:#12121ae6} html:not([data-theme=dark]) .tabbar{background:#ffffffeb} .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:14px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.2px} .tabbar a:hover{text-decoration:none} .tabbar a[aria-current]{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)} .tabbar a[aria-current] svg{transform:translateY(-1px) scale(1.08)} body{padding-bottom:88px} #toast{bottom:96px} .topline{display:none} } /* ---------- Shared surfaces ---------- */ .panel,.feature-card,.leader-panel,.format-card,.home-insight-card,.home-compare-card,.watch-series{border-radius:var(--arena-radius)} .feature-card,.format-card,.home-compare-card,.home-insight-card{transition:transform .35s var(--arena-ease),box-shadow .35s,border-color .35s} .feature-card:hover,.format-card:hover,.home-compare-card:hover{transform:translateY(-4px);box-shadow:var(--arena-glow);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))} button,.button{transition:transform .2s var(--arena-ease),border-color .2s,background .2s,box-shadow .2s} button:not(:disabled):active,.button:active{transform:scale(.97)} main table tbody tr{transition:background .15s} main table tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)} .page-head h1{background:linear-gradient(100deg,var(--ink) 30%,color-mix(in srgb,var(--accent) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent} .section-heading h2{letter-spacing:-.6px} .eyebrow{letter-spacing:1.8px} .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--arena-red);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 0 #e5322d99;animation:arena-pulse 1.6s infinite} @keyframes arena-pulse{70%{box-shadow:0 0 0 9px #e5322d00}100%{box-shadow:0 0 0 0 #e5322d00}} .arena-section{margin:56px 0} .arena-anchor{scroll-margin-top:132px} .arena-section .section-heading{align-items:flex-end} /* ---------- Hero (layout lives in home.css) ---------- */ .hero-quick{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .hero-quick a{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid #9fc5ff40;background:#0d2238b0;color:#d7e6ff;font-size:12px;font-weight:700;transition:background .2s,border-color .2s,transform .2s} .hero-quick a:hover{text-decoration:none;background:#163456;border-color:#c5dcff;transform:translateY(-2px)} .hero-find>div{position:relative} .hero-find kbd{position:absolute;right:104px;top:50%;transform:translateY(-50%);font:600 11px/1 var(--font-mono,monospace);color:#9fb6d6;border:1px solid #9fc5ff40;border-radius:6px;padding:4px 7px;pointer-events:none} .hero-facts{display:grid;gap:10px;align-content:center} .hero-fact{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:14px 16px;border-radius:14px;background:#06142acc;border:1px solid #9fc5ff33;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#e7f0ff;box-shadow:0 14px 30px -14px #000;animation:hero-float 6s ease-in-out infinite;animation-delay:calc(var(--i)*-2s);transition:border-color .2s,transform .2s} .hero-fact:hover{text-decoration:none;border-color:#b9dcff;transform:translateX(-4px)} .hero-fact strong{font:700 24px/1.1 var(--font-heading,inherit);color:#fff;letter-spacing:-.5px;font-variant-numeric:tabular-nums} .hero-fact span{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#8fc6ff} .hero-fact em{grid-column:1/-1;font-style:normal;font-size:12px;color:#becde0} .hero-fact:nth-child(1) strong{color:var(--fmt-odi,#00e5ff)}.hero-fact:nth-child(2) strong{color:var(--fmt-test,#ff5c7a)}.hero-fact:nth-child(3) strong{color:var(--fmt-odi,#00e5ff)} @keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .cricket-hero.motion-paused .hero-fact{animation-play-state:paused} @media (max-width:700px){.hero-find kbd{display:none}} /* ---------- Section jump bar ---------- */ .arena-jump{position:sticky;top:58px;z-index:30;margin:18px 0 0;padding:8px 0;background:linear-gradient(var(--bg) 70%,transparent)} .arena-jump-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px} .arena-jump-track::-webkit-scrollbar{display:none} .arena-jump a{display:inline-flex;align-items:center;gap:7px;flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:13px;font-weight:700;transition:color .2s,border-color .2s,background .2s} .arena-jump a:hover{text-decoration:none;color:var(--ink);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))} .arena-jump a.is-active{color:var(--bg);background:var(--accent);border-color:var(--accent)} @media (max-width:760px){.arena-jump{margin-top:10px}} /* ---------- Match centre ---------- */ .mc-controls{display:flex;align-items:center;gap:8px} .mc-arrow{width:40px;height:40px;border-radius:50%;padding:0;font-size:16px} .mc-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:4px 2px 18px;scrollbar-width:thin} @media (min-width:1100px){.mc-rail{grid-auto-columns:calc((100% - 48px)/4)}} .mc-card{scroll-snap-align:start} .mc-card>a{position:relative;display:flex;flex-direction:column;height:100%;padding:18px;border-radius:var(--arena-radius);border:1px solid var(--border);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 55%);color:var(--ink);overflow:hidden;transition:transform .35s var(--arena-ease),box-shadow .35s,border-color .35s} .mc-card>a:before{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);transition:transform .6s var(--arena-ease)} .mc-card>a:hover{text-decoration:none;transform:translateY(-5px);box-shadow:var(--arena-glow);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))} .mc-card>a:hover:before{transform:scale(1.5)} .mc-card.is-today>a{border-color:color-mix(in srgb,var(--arena-red) 55%,var(--border));background:linear-gradient(160deg,color-mix(in srgb,var(--arena-red) 14%,var(--panel)),var(--panel) 60%)} .mc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase} .mc-state{color:var(--muted)} .mc-today{color:#fff;background:var(--arena-red);padding:3px 9px;border-radius:999px} .mc-countdown{font-family:var(--font-mono,monospace);color:var(--accent);letter-spacing:0;text-transform:none;font-size:12px} .mc-countdown.is-live{color:var(--arena-red)} .mc-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center} .mc-team{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0} .mc-team img{border-radius:5px;box-shadow:0 4px 12px #0006} .mc-team strong{font-size:14px;line-height:1.2} .mc-team-wide{grid-column:1/-1} .mc-vs{font:800 11px/1 var(--font-mono,monospace);color:var(--muted);padding:6px;border:1px solid var(--border);border-radius:50%} .mc-detail{margin:16px 0 12px;color:var(--muted);font-size:13px;text-align:center} .mc-foot{margin-top:auto;display:flex;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px dashed var(--border);font-size:12px} .mc-series{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mc-foot time{font-weight:800;white-space:nowrap} @media (max-width:760px){.mc-controls .mc-arrow{display:none}.mc-rail{grid-auto-columns:82%}} /* ---------- Numbers band ---------- */ .arena-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0} .band-cell{position:relative;padding:22px;border-radius:var(--arena-radius);border:1px solid var(--border);background:var(--panel);overflow:hidden} .band-cell .arena-icon{color:var(--accent);opacity:.9} .band-cell strong{display:block;margin-top:10px;font:700 clamp(28px,3vw,40px)/1 var(--font-heading,inherit);letter-spacing:-1px;font-variant-numeric:tabular-nums} .band-cell span{font-size:12px;color:var(--muted);font-weight:600} .band-cell strong{color:var(--ink)}.band-cell:first-child strong{color:var(--accent)} .band-cell:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.0} @media (max-width:760px){.arena-band{grid-template-columns:1fr 1fr;gap:10px}.band-cell{padding:16px}} /* ---------- Leader race ---------- */ .race-tabs{display:none;gap:6px;margin-bottom:14px} .race-tabs button{border-radius:999px} .race-tabs button[aria-selected=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)} .race-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .race-panel{padding:22px;border-radius:var(--arena-radius);border:1px solid var(--border);background:var(--panel)} .race-panel h3{margin:0 0 14px} .race-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .race-list li{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(60px,1fr) auto;align-items:center;gap:12px;padding:6px 8px;border-radius:10px;transition:background .2s} .race-list li:hover{background:var(--hover,var(--soft))} .race-rank{font:700 13px/1 var(--font-mono,monospace);color:var(--muted);text-align:center} .race-list li:nth-child(1) .race-rank{color:var(--gold)}.race-list li:nth-child(2) .race-rank{color:#c9d3e0}.race-list li:nth-child(3) .race-rank{color:#d9905a} .race-who{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:0} .race-who img{grid-row:span 2;border-radius:3px} .race-who a{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .race-who small{color:var(--muted);font-size:11px} .race-bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden} .race-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--lime));transform-origin:left} .race-panel+.race-panel .race-bar i{background:linear-gradient(90deg,var(--magenta),var(--gold))} .race-list strong{font:700 14px/1 var(--font-mono,monospace);font-variant-numeric:tabular-nums} @media (max-width:860px){.race-tabs{display:flex}.race-grid{grid-template-columns:1fr}.race-grid[data-race] .race-panel[hidden]{display:none}.race-panel h3{display:none}.race-list li{grid-template-columns:24px 1fr auto}.race-bar{grid-column:2/-1;grid-row:2}} /* ---------- Result cards ---------- */ .rc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .rc-card{display:flex;flex-direction:column;gap:12px;height:100%;padding:16px 18px;border-radius:var(--arena-radius);border:1px solid var(--border);background:var(--panel);color:var(--ink);transition:transform .35s var(--arena-ease),box-shadow .35s,border-color .35s} .rc-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--arena-glow);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))} .rc-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);font-weight:700} .rc-meta time{margin-left:auto} .rc-format{padding:2px 8px;border-radius:999px;color:#0a0a0f;font-weight:800;letter-spacing:.5px} .rc-test{background:#f2efe6}.rc-odi{background:var(--accent)}.rc-t20i{background:var(--lime)} .rc-teams{display:grid;gap:8px} .rc-team{display:flex;align-items:center;gap:10px;color:var(--muted)} .rc-team img{border-radius:3px} .rc-team strong{font-size:15px} .rc-team.is-winner{color:var(--ink)} .rc-team b{margin-left:auto;font-size:10px;letter-spacing:1px;color:var(--lime);border:1px solid currentColor;border-radius:999px;padding:1px 7px} .rc-result{margin:0;font-size:13px;color:var(--muted)} .rc-open{margin-top:auto;font-size:12px;font-weight:800;color:var(--accent)} /* ---------- Explore bento ---------- */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .bento-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--arena-radius);border:1px solid var(--border);background:var(--panel);color:var(--ink);overflow:hidden;min-height:170px;transition:transform .35s var(--arena-ease),box-shadow .35s,border-color .35s} .bento-tile:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--arena-glow);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))} .bento-feature{grid-column:span 2;grid-row:span 2;justify-content:flex-end;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--gold) 10%,var(--panel)),var(--panel))} .bento-feature h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-1px} .bento-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-bottom:auto;transition:transform .5s var(--arena-ease)} .bento-tile:nth-child(3n+2) .bento-icon{color:var(--lime);background:color-mix(in srgb,var(--lime) 14%,transparent)} .bento-tile:nth-child(3n) .bento-icon{color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,transparent)} .bento-tile:hover .bento-icon{transform:rotate(-10deg) scale(1.1)} .bento-kicker{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--muted);margin-top:14px} .bento-tile h3{margin:0;font-size:18px} .bento-tile p{margin:0;color:var(--muted);font-size:13px} .bento-go{position:absolute;right:18px;top:18px;font-size:18px;color:var(--muted);transition:transform .3s var(--arena-ease),color .3s} .bento-tile:hover .bento-go{transform:translateX(4px);color:var(--accent)} @media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bento-feature{grid-row:auto}} @media (max-width:520px){.bento{grid-template-columns:1fr 1fr;gap:10px}.bento-tile{min-height:0;padding:16px}.bento-tile p{display:none}.bento-feature p{display:block}.bento-go{display:none}} /* ---------- Quick search palette ---------- */ .palette{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding:12vh 16px 16px;background:#02040acc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pal-in .2s ease-out} .palette[hidden]{display:none} .palette-box{width:min(620px,100%);border-radius:20px;border:1px solid var(--border);background:var(--panel);box-shadow:0 30px 80px -20px #000;overflow:hidden;animation:pal-pop .28s var(--arena-ease)} .palette-box input{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--ink);padding:18px 20px;font-size:17px;outline:none} .palette-list{list-style:none;margin:0;padding:8px;max-height:55vh;overflow:auto} .palette-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink)} .palette-list a small{margin-left:auto;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px} .palette-list a:hover,.palette-list a[aria-selected=true]{text-decoration:none;background:color-mix(in srgb,var(--accent) 14%,transparent)} .palette-list .pal-empty{padding:14px 12px;color:var(--muted)} .palette-hint{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)} .palette-hint kbd{font-family:var(--font-mono,monospace);border:1px solid var(--border);border-radius:5px;padding:1px 5px} @keyframes pal-in{from{opacity:0}} @keyframes pal-pop{from{opacity:0;transform:translateY(-12px) scale(.98)}} /* ---------- Reveal and chart motion (only once arena.js is running) ---------- */ .arena-js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--arena-ease),transform .7s var(--arena-ease);transition-delay:var(--rv-delay,0s)} .arena-js .rv.in{opacity:1;transform:none} .arena-js .ch :is(.race-bar i,.home-dual-track i,.home-world-track i,.cw-hbar,.annual-fill,.format-card i[style*="width"]){transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--arena-ease);transition-delay:calc(.15s + var(--i,0)*60ms)} .arena-js .ch.in :is(.race-bar i,.home-dual-track i,.home-world-track i,.cw-hbar,.annual-fill,.format-card i[style*="width"]){transform:none} .arena-js .ch .cw-man-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .6s var(--arena-ease);transition-delay:calc(var(--n,0)*14ms)} .arena-js .ch.in .cw-man-bar{transform:none} .arena-js .ch .cw-line{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 2.2s var(--arena-ease)} .arena-js .ch.in .cw-line{stroke-dashoffset:0} .arena-js .ch .cw-wicket{opacity:0;transition:opacity .4s ease;transition-delay:1.6s} .arena-js .ch.in .cw-wicket{opacity:1} .arena-js .ch .cw-slice{transform-box:view-box;transform-origin:center;transform:rotate(-90deg) scale(.6);opacity:0;transition:transform 1s var(--arena-ease),opacity .6s} .arena-js .ch.in .cw-slice{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important} .hero-delivery{display:none} } /* Featured explore tile: bars that rise and a line that draws, on loop. */ .bento-art{position:absolute;left:20px;right:20px;top:22px;width:calc(100% - 40px);height:48%;opacity:.9;pointer-events:none} .bento-art rect{fill:color-mix(in srgb,var(--accent) 30%,transparent);transform-box:fill-box;transform-origin:bottom;animation:bento-rise 3.6s var(--arena-ease) infinite;animation-delay:calc(var(--n)*90ms)} .bento-art rect:nth-child(4n){fill:color-mix(in srgb,var(--gold) 45%,transparent)} .bento-art polyline{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:100;animation:bento-draw 3.6s var(--arena-ease) infinite;vector-effect:non-scaling-stroke} @keyframes bento-rise{0%{transform:scaleY(.15)}35%,80%{transform:scaleY(1)}100%{transform:scaleY(.15)}} @keyframes bento-draw{0%{stroke-dashoffset:100}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}} .bento-feature .bento-icon{margin-bottom:0} .bento-feature{gap:8px} @media (max-width:980px){.bento-feature{min-height:260px}} /* Homepage featured scorecard: first charts visible, the rest behind a toggle. */ .home-match-lab.is-collapsed .cw-lab{max-height:1040px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)} .lab-toggle{display:block;margin:14px auto 0;border-radius:999px;padding:10px 20px} @media (max-width:760px){ .arena-section{margin:40px 0} main .section-heading{display:block} main .section-heading>a{display:inline-block;margin-top:6px;font-size:14px} .mc-controls{margin-top:6px} } /* ---------- Section guide: numbered headings ---------- */ .sec-num{display:inline-grid;place-items:center;min-width:34px;height:24px;margin-right:12px;padding:0 7px;border-radius:8px;vertical-align:.18em;font:700 12px/1 var(--font-mono,monospace);letter-spacing:.5px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);-webkit-text-fill-color:var(--accent)} .page-head h1 .sec-num{display:none} .sec-head{position:relative} /* When a section takes over, a line sweeps under its heading with a ball at the front. */ .arena-js .sec-head:after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:min(220px,60%);border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--lime));transform:scaleX(0);transform-origin:left;opacity:.9} .arena-js .sec-head:before{content:"";position:absolute;left:0;bottom:-11px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb4a8,var(--arena-red) 55%,#7a0f12);opacity:0;box-shadow:0 0 10px #e5322d88} .arena-js .sec-head.sec-live:after{animation:sec-sweep .9s var(--arena-ease) forwards} .arena-js .sec-head.sec-live:before{animation:sec-roll .9s var(--arena-ease) forwards} @keyframes sec-sweep{to{transform:scaleX(1)}} @keyframes sec-roll{0%{opacity:1;transform:translateX(0) rotate(0)}90%{opacity:1}100%{opacity:0;transform:translateX(min(212px,calc(60vw - 8px))) rotate(540deg)}} /* ---------- Desktop rail ---------- */ .sec-rail{position:fixed;right:18px;top:50%;z-index:35;transform:translate(24px,-50%);opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--arena-ease)} .sec-rail.is-on{opacity:1;transform:translate(0,-50%);pointer-events:auto} .sec-rail ol{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:6px} .sec-rail-track{position:absolute;right:15px;top:10px;bottom:46px;width:2px;border-radius:2px;background:var(--border)} .sec-rail-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--accent),var(--lime));transform-origin:top;transform:scaleY(var(--fill,0));transition:transform .2s linear} .sec-rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:3px 0;color:var(--muted);text-decoration:none} .sec-rail-num{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:22px;border-radius:7px;font:700 10.5px/1 var(--font-mono,monospace);background:var(--panel);border:1px solid var(--border);transition:background .25s,color .25s,border-color .25s,transform .35s var(--arena-ease)} .sec-rail-label{order:-1;max-width:0;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:700;padding:5px 0;border-radius:8px;opacity:0;transition:max-width .4s var(--arena-ease),opacity .25s,padding .3s} .sec-rail a.is-done .sec-rail-num{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))} .sec-rail a.is-active .sec-rail-num{background:var(--accent);color:var(--bg);border-color:var(--accent);transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)} .sec-rail a.is-active .sec-rail-label,.sec-rail:hover .sec-rail-label{max-width:240px;opacity:1;padding:5px 10px;background:var(--panel);border:1px solid var(--border);box-shadow:0 10px 24px -14px #000} .sec-rail a.is-active .sec-rail-label{color:var(--ink)} .sec-rail:hover a:not(.is-active) .sec-rail-label{color:var(--muted)} .sec-rail a:hover .sec-rail-num{border-color:var(--accent);color:var(--ink)} .sec-top{display:block;margin:10px 0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;font-size:14px} @media (max-width:1439px){.sec-rail{display:none}} /* ---------- Mobile / tablet section pill ---------- */ .sec-pill{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;bottom:22px;z-index:45;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 36px -14px #000c;transform:translateY(140%);opacity:0;transition:transform .45s var(--arena-ease),opacity .3s;max-width:calc(100vw - 32px)} .sec-pill.is-on{transform:none;opacity:1} .sec-pill[hidden]{display:none} @media (min-width:1440px){.sec-pill{display:none}} @media (max-width:760px){.sec-pill{bottom:calc(92px + env(safe-area-inset-bottom))}} .sec-pill button{border:0;background:transparent;color:var(--ink);border-radius:999px} .sec-pill-main{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 12px 7px 8px;font-size:13px} .sec-pill-ball{flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb4a8,var(--arena-red) 55%,#7a0f12);box-shadow:0 0 8px #e5322d88} .sec-pill.flip .sec-pill-ball{animation:pill-spin .6s var(--arena-ease)} .sec-pill.flip .sec-pill-label{animation:pill-in .45s var(--arena-ease)} @keyframes pill-spin{from{transform:rotate(-360deg) scale(.6)}} @keyframes pill-in{from{opacity:0;transform:translateY(8px)}} .sec-pill-count{font:600 11px/1 var(--font-mono,monospace);color:var(--muted)} .sec-pill-count b{color:var(--accent)} .sec-pill-label{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw} .sec-pill-next{flex:none;width:36px;height:36px;padding:0;background:var(--accent)!important;color:var(--bg)!important;font-weight:800} .sec-sheet{position:absolute;left:0;right:0;bottom:calc(100% + 10px);max-height:56vh;overflow:auto;padding:10px;border-radius:18px;border:1px solid var(--border);background:var(--panel);box-shadow:0 24px 50px -16px #000;animation:pal-pop .25s var(--arena-ease);min-width:260px} .sec-sheet p{margin:4px 8px 6px;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)} .sec-sheet ol{list-style:none;margin:0;padding:0} .sec-sheet a{display:flex;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);font-size:14px;font-weight:600} .sec-sheet a span{font:700 11px/1.6 var(--font-mono,monospace);color:var(--muted)} .sec-sheet a.is-active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)} .sec-sheet a:hover{text-decoration:none;background:var(--hover,var(--soft))} /* ---------- Section-change cue ---------- */ .sec-cue{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;top:84px;z-index:55;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 44px -18px #000,0 0 0 1px #00e5ff14;pointer-events:none;opacity:0;transform:translateY(-12px) scale(.96);transition:opacity .3s,transform .45s var(--arena-ease);overflow:hidden;max-width:calc(100vw - 32px)} .sec-cue.is-on{opacity:1;transform:none} .sec-cue.from-above.is-on{animation:cue-drop .45s var(--arena-ease)} @keyframes cue-drop{from{transform:translateY(-26px)}} .sec-cue:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--lime));transform-origin:left;transform:scaleX(0)} .sec-cue.is-on:after{animation:cue-timer 1.9s linear forwards} @keyframes cue-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}} .sec-cue-ball{flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb4a8,var(--arena-red) 55%,#7a0f12)} .sec-cue.is-on .sec-cue-ball{animation:cue-bowl .7s var(--arena-ease)} @keyframes cue-bowl{0%{transform:translate(-40px,-18px)}55%{transform:translate(-6px,6px)}100%{transform:none}} .sec-cue-num{font:800 22px/1 var(--font-heading,inherit);color:var(--accent);letter-spacing:-.5px} .sec-cue-num small{font-size:12px;color:var(--muted);font-weight:600} .sec-cue-text{display:grid;min-width:0} .sec-cue-text b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sec-cue-text small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:760px){.sec-cue{top:74px}} /* ---------- Page-to-page transitions (cross-document View Transitions) ---------- */ @view-transition{navigation:auto} body>header{view-transition-name:site-header} .tabbar{view-transition-name:tabbar} ::view-transition-old(root){animation:vt-out .22s ease-in both} ::view-transition-new(root){animation:vt-in .42s var(--arena-ease) both} @keyframes vt-out{to{opacity:0;transform:translateY(-10px) scale(.99)}} @keyframes vt-in{from{opacity:0;transform:translateY(18px)}} /* Link-click loader for browsers without view transitions or on slow pages. */ .arena-progress.is-loading{transform:none;background:linear-gradient(90deg,transparent,var(--accent),var(--lime),transparent) 0 0/40% 100% no-repeat;animation:nav-load 1s linear infinite} @keyframes nav-load{from{background-position:-40% 0}to{background-position:140% 0}} @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} .sec-cue{display:none} } /* Totals above each decade column. */ .cw-stack-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end} .cw-stack-total{font:700 11px/1 var(--font-mono,monospace);color:var(--ink);margin-bottom:5px;font-variant-numeric:tabular-nums} /* Recent-innings strip: every bar prints its score. */ .cw-form{height:118px;padding-top:18px;gap:4px} .cw-form i{position:relative} .cw-form i:after{content:attr(data-v);position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);font:600 9.5px/1 var(--font-mono,monospace);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} .cw-form i.fifty:after,.cw-form i.hundred:after{color:var(--ink);font-weight:800} .cw-form-key span.notout:before{content:"";background:transparent;box-shadow:inset 0 0 0 2px var(--ink)} @media (max-width:520px){.cw-form i:after{font-size:8px}} /* ---------- Match scoreboard ---------- */ .scoreboard{position:relative;display:grid;gap:10px;margin:18px 0 16px;padding:20px 22px;border-radius:var(--arena-radius);border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel) 60%);overflow:hidden} .scoreboard:before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lime) 14%,transparent),transparent 70%);pointer-events:none} .sb-team{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;color:var(--muted)} .sb-team+.sb-team{border-top:1px dashed var(--border)} .sb-team .team-badge{font-size:clamp(17px,2vw,22px);font-weight:700} .sb-team .team-badge img{width:36px;height:auto;border-radius:4px} .sb-team .team-badge-link{color:inherit} .sb-scores{font:800 clamp(22px,3vw,34px)/1 var(--font-heading,inherit);letter-spacing:-.5px;font-variant-numeric:tabular-nums;text-align:right} .sb-scores a{color:inherit} .sb-scores a:hover{color:var(--accent);text-decoration:none} .sb-and{font-size:.55em;color:var(--muted);font-weight:600;margin:0 4px} .sb-team.is-winner{color:var(--ink)} .sb-team.is-winner .sb-scores{color:var(--lime)} .sb-team.is-winner .team-badge>span:after{content:"WON";margin-left:10px;padding:2px 8px;border-radius:999px;border:1px solid var(--lime);color:var(--lime);font:800 10px/1.4 var(--font-mono,monospace);letter-spacing:1px;vertical-align:middle} .sb-result{margin:4px 0 0;font-size:15px;font-weight:700;color:var(--ink)} .sb-meta{display:flex;flex-wrap:wrap;gap:8px} .sb-meta a{padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-size:12px;font-weight:700} .sb-meta a:hover{text-decoration:none;border-color:var(--accent)} .arena-js .scoreboard .sb-team{animation:sb-in .6s var(--arena-ease) both} .arena-js .scoreboard .sb-team+.sb-team{animation-delay:.12s} @keyframes sb-in{from{opacity:0;transform:translateX(-14px)}} /* Crickrida mark and wordmark */ .brand{gap:10px} .brand .brand-mark{width:30px;height:30px;flex:none;color:var(--ink)} .brand .brand-word{font-family:var(--font-heading,inherit);font-weight:700;font-size:23px;letter-spacing:-.9px;text-transform:none;color:var(--ink)} .footer-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading,inherit);letter-spacing:-.4px} .footer-brand .brand-mark{width:22px;height:22px;color:var(--ink)} .brand-preview{display:flex;align-items:center;gap:18px;color:var(--ink)} .brand-preview strong{font-family:var(--font-heading,inherit);font-size:44px;letter-spacing:-1.6px} .hero-space{min-height:1px} @media(max-width:1100px){.brand .brand-word{font-size:20px}.brand .brand-mark{width:27px;height:27px}.hero-space{display:none}} @media(max-width:360px){.brand .brand-word{font-size:17px}.brand .brand-mark{width:23px;height:23px}}