@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
  --bg: #07101f;
  --panel: #0d1a2c;
  --panel2: #122238;
  --white: #f4f7fb;
  --muted: #91a0b6;
  --orange: #ff6a35;
  --cyan: #7ce5f2;
  --line: rgba(255, 255, 255, 0.12);
  --mono: "DM Mono", monospace;
  --display: "Barlow Condensed", sans-serif;
  --body: "Manrope", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--body);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
.topbar {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.5vw;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(18, 34, 56, 0.97);
  border-bottom-color: #38516d;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.brand small {
  display: block;
  font: 10px var(--mono);
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 3px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid var(--orange);
  display: grid;
  place-items: center;
  font: 800 20px var(--display);
  color: var(--orange);
  transform: skew(-7deg);
}
nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(8px, 1.1vw, 16px);
  font-size: clamp(10px, 0.82vw, 12px);
  color: #c6d0df;
}
nav a:hover,
.text-link:hover {
  color: var(--orange);
}
.menu-toggle {
  display: none;
  background: none;
  color: white;
  border: 0;
  font-size: 24px;
}
.hero {
  min-height: 650px;
  padding: 76px 8vw 58px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 30px;
  background:
    radial-gradient(ellipse at 75% 45%, rgba(32, 76, 112, 0.27), transparent 48%),
    linear-gradient(115deg, #07101f, #091626);
}
.eyebrow {
  font: 11px var(--mono);
  letter-spacing: 0.13em;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 10px;
}
.live-dot {
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 12px #ff6a3588;
}
.hero h1,
.section h2,
.impact-copy h2 {
  font: 900 clamp(54px, 7vw, 98px) / 0.9 var(--display);
  letter-spacing: -0.025em;
  margin: 25px 0;
}
.hero h1 span {
  color: var(--orange);
}
.hero-copy > p {
  max-width: 450px;
  color: #a8b6c9;
  line-height: 1.8;
  font-size: 14px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 15px 19px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.primary {
  background: var(--orange);
  color: #101522;
}
.primary:hover {
  background: #ff865c;
}
.text-link {
  font-size: 11px;
  color: #c4cedb;
}
.hero-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 60px;
  color: #73849c;
  font: 9px var(--mono);
  letter-spacing: 0.12em;
}
.hero-foot i {
  width: 4px;
  height: 4px;
  background: var(--orange);
  border-radius: 50%;
}
.hero-art {
  height: 440px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.orbit {
  position: absolute;
  border: 1px solid rgba(124, 229, 242, 0.22);
  border-radius: 50%;
  aspect-ratio: 1;
}
.orbit-one {
  width: 390px;
}
.orbit-two {
  width: 500px;
  border-style: dashed;
  opacity: 0.5;
}
.giant-number {
  position: absolute;
  font: 900 clamp(200px, 29vw, 390px) / 1 var(--display);
  color: rgba(124, 229, 242, 0.09);
  letter-spacing: -0.1em;
  transform: translateX(-14px);
}
.hero-card {
  position: relative;
  width: 250px;
  height: 310px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(255, 106, 53, 0.95), rgba(179, 48, 33, 0.93));
  transform: rotate(5deg);
  box-shadow: 0 25px 80px #0008;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-kicker,
.card-bottom {
  font: 10px var(--mono);
  letter-spacing: 0.13em;
}
.hero-card strong {
  font: 900 48px/0.86 var(--display);
  letter-spacing: -0.02em;
}
.card-bottom {
  display: flex;
  justify-content: space-between;
}
.card-bottom b {
  color: var(--cyan);
}
.vertical-label {
  position: absolute;
  right: 0;
  top: 50%;
  writing-mode: vertical-rl;
  font: 9px var(--mono);
  letter-spacing: 0.16em;
  color: #8295ac;
}
.ticker {
  overflow: hidden;
  background: var(--cyan);
  color: #07101f;
  white-space: nowrap;
  padding: 13px 0;
  font: 800 12px var(--mono);
  letter-spacing: 0.12em;
}
.ticker div {
  min-width: max-content;
  animation: scroll 28s linear infinite;
}
.ticker b {
  margin: 0 30px;
  color: #e6532d;
}
@keyframes scroll {
  to {
    transform: translateX(-35%);
  }
}
.section {
  padding: 100px 8vw;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px;
}
.section h2 {
  font-size: clamp(42px, 5vw, 68px);
  margin: 17px 0 0;
}
.section h2 em,
.impact-copy h2 em,
.about-section h2 em {
  font-style: normal;
  color: var(--orange);
}
.section-heading > p {
  max-width: 350px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  margin: 0 0 4px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-card {
  min-height: 165px;
  padding: 25px;
  background: var(--panel);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.stat-feature {
  background: var(--orange);
  color: #101522;
  border-color: var(--orange);
}
.stat-label {
  font: 10px var(--mono);
  letter-spacing: 0.12em;
  display: block;
  color: var(--muted);
}
.stat-feature .stat-label {
  color: #38211e;
}
.stat-card strong {
  display: block;
  font: 800 clamp(36px, 5vw, 57px) / 1 var(--display);
  margin: 22px 0 12px;
  position: relative;
  z-index: 1;
}
.stat-note {
  font-size: 10px;
  color: var(--muted);
}
.stat-feature .stat-note {
  color: #48261e;
}
.stat-watermark {
  position: absolute;
  right: 0;
  bottom: -40px;
  font: 900 170px var(--display);
  color: #fff2;
}
.data-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  color: var(--muted);
  font: 10px var(--mono);
}
.data-line b {
  color: var(--white);
  font-weight: 500;
}
.data-line a {
  color: var(--cyan);
}
.innings-section {
  background: #091523;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
  text-align: left;
}
th {
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: var(--panel);
  padding: 17px 20px;
}
td {
  font-size: 12px;
  padding: 17px 20px;
  border-top: 1px solid var(--line);
  color: #d7dfeb;
}
tbody tr:hover {
  background: #ffffff07;
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 28px;
}
.table-foot {
  display: flex;
  gap: 25px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 17px;
  color: var(--muted);
  font: 10px var(--mono);
}
.table-foot b {
  color: var(--white);
}
.impact-section {
  padding: 85px 8vw;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  background: linear-gradient(110deg, #12243a, #0b1524);
  position: relative;
  overflow: hidden;
}
.impact-number {
  font: 900 clamp(200px, 30vw, 400px) / 0.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 1px #ff6a3566;
  letter-spacing: -0.1em;
}
.impact-copy {
  position: relative;
}
.impact-copy h2 {
  font-size: clamp(44px, 6vw, 78px);
}
.impact-copy p,
.about-copy p {
  max-width: 500px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}
.outline {
  border: 1px solid #71829a;
  margin-top: 15px;
}
.outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.about-section h2 {
  font: 900 clamp(48px, 6vw, 76px) / 0.9 var(--display);
  margin: 20px 0;
}
.about-copy {
  padding-top: 10px;
}
.about-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 25px;
  font: 10px var(--mono);
  color: var(--cyan);
}
.about-links a:hover {
  color: var(--orange);
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 5.5vw;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 0.06em;
}
footer .brand {
  color: var(--white);
}
@media (max-width: 800px) {
  .topbar {
    padding: 0 6vw;
  }
  .menu-toggle {
    display: block;
  }
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #091523;
    padding: 20px 6vw;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid var(--line);
  }
  nav.open {
    display: flex;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 65px 7vw 35px;
  }
  .hero-art {
    height: 360px;
  }
  .hero-foot {
    margin-top: 38px;
  }
  .section {
    padding: 72px 7vw;
  }
  .section-heading {
    display: block;
  }
  .section-heading > p {
    margin-top: 20px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card {
    min-height: 145px;
    padding: 20px;
  }
  .impact-section {
    grid-template-columns: 1fr;
    padding: 65px 7vw;
  }
  .impact-number {
    position: absolute;
    right: -20px;
    top: 30px;
    font-size: 240px;
  }
  .impact-copy {
    z-index: 1;
  }
  .about-section {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  footer {
    padding: 25px 6vw;
    flex-wrap: wrap;
  }
  footer > span:last-child {
    display: none;
  }
}
@media (max-width: 430px) {
  .hero h1 {
    font-size: 54px;
  }
  .hero-art {
    height: 300px;
  }
  .hero-card {
    width: 205px;
    height: 255px;
  }
  .hero-card strong {
    font-size: 40px;
  }
  .orbit-one {
    width: 290px;
  }
  .orbit-two {
    width: 350px;
  }
  .vertical-label {
    font-size: 7px;
  }
  .stats-grid {
    gap: 8px;
  }
  .stat-card {
    padding: 16px;
    min-height: 130px;
  }
  .stat-card strong {
    font-size: 37px;
  }
  .data-line {
    flex-direction: column;
  }
  .hero-actions {
    gap: 18px;
  }
  .section h2 {
    font-size: 44px;
  }
  .about-section h2 {
    font-size: 52px;
  }
  footer .brand {
    font-size: 11px;
  }
}
.profile-section {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) 1.28fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  background: linear-gradient(115deg, #0a1627, #0c1d30);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.profile-photo-wrap {
  position: relative;
  min-height: 350px;
  max-height: 480px;
  aspect-ratio: 4/5;
  background: linear-gradient(145deg, #1c3955, #0b1524);
  overflow: hidden;
  border: 1px solid var(--line);
}
.profile-photo-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 2;
}
.photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 clamp(90px, 16vw, 190px) / 1 var(--display);
  color: #ff6a3555;
  letter-spacing: -0.08em;
}
.photo-fallback span {
  position: absolute;
  right: 12px;
  bottom: 0;
  font-size: 90px;
  color: var(--orange);
}
.profile-copy h2 {
  font: 900 clamp(54px, 7vw, 90px) / 0.9 var(--display);
  margin: 20px 0;
}
.profile-copy h2 em {
  font-style: normal;
  color: var(--orange);
}
.profile-intro {
  max-width: 560px;
  color: #a8b6c9;
  font-size: 13px;
  line-height: 1.9;
}
.profile-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0;
}
.profile-facts div {
  padding: 15px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.profile-facts small {
  display: block;
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.profile-facts strong {
  font-size: 12px;
}
.profile-teams {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.9;
}
.profile-teams b {
  display: block;
  color: var(--cyan);
  font: 10px var(--mono);
  margin-bottom: 4px;
}
@media (max-width: 800px) {
  .profile-section {
    grid-template-columns: 1fr;
  }
  .profile-photo-wrap {
    width: min(100%, 360px);
    min-height: 330px;
  }
  .profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.career-formats {
  margin: 18px 0 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.format-card strong {
  font-size: clamp(30px, 4vw, 46px);
}
.format-detail {
  display: block;
  color: var(--muted);
  font: 9px var(--mono);
  line-height: 1.8;
  margin-top: 9px;
}
.format-card > a {
  display: inline-block;
  color: var(--cyan);
  font: 9px var(--mono);
  margin-top: 12px;
}
.format-heading {
  margin-top: 60px;
}
@media (max-width: 800px) {
  .career-formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Profile-first layout and stronger career-run hierarchy */
.profile-section {
  padding-top: 72px;
  padding-bottom: 72px;
}
.profile-photo-wrap {
  min-height: 390px;
  box-shadow: 0 24px 70px #0004;
}
.stats-section {
  background: linear-gradient(180deg, #07101f 0%, #091726 100%);
}
.stats-section .section-heading:first-child {
  margin-bottom: 32px;
}
.stats-grid:not(.career-formats) .stat-feature {
  grid-column: span 2;
  min-height: 190px;
  padding: 28px 32px;
  background: linear-gradient(125deg, #ff7847, #e94e2e);
  box-shadow: 0 16px 38px #ff6a351c;
}
.stats-grid:not(.career-formats) .stat-feature strong {
  font-size: clamp(58px, 7vw, 82px);
  margin: 16px 0 8px;
}
.stats-grid:not(.career-formats) .stat-card:not(.stat-feature) {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stats-grid:not(.career-formats) .stat-card:not(.stat-feature) strong {
  font-size: clamp(42px, 4.5vw, 58px);
}
.stats-grid:not(.career-formats) .stat-feature .stat-label {
  font-size: 11px;
}
.stats-grid:not(.career-formats) .stat-feature .stat-note {
  font-size: 11px;
}
.format-heading {
  padding-top: 8px;
}
.data-line {
  padding: 15px 17px;
  background: #0d1a2c;
  border: 1px solid var(--line);
}
@media (max-width: 800px) {
  .profile-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .stats-grid:not(.career-formats) .stat-feature {
    grid-column: span 2;
    min-height: 155px;
  }
  .stats-grid:not(.career-formats) .stat-card:not(.stat-feature) {
    min-height: 135px;
  }
}
@media (max-width: 430px) {
  .stats-grid:not(.career-formats) .stat-feature strong {
    font-size: 58px;
  }
  .stats-grid:not(.career-formats) .stat-card:not(.stat-feature) strong {
    font-size: 38px;
  }
}

/* The 72 Club — responsive polish and match/activity surfaces */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
img {
  max-width: 100%;
}
.button,
.primary,
.outline,
.calculate-button {
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.button:hover,
.calculate-button:hover {
  transform: translateY(-2px);
}
.profile-photo-wrap img {
  transition: transform 0.45s ease;
}
.profile-photo-wrap:hover img {
  transform: scale(1.025);
}
.activity-section {
  background:
    radial-gradient(ellipse at 8% 10%, rgba(124, 229, 242, 0.07), transparent 35%), #07101f;
}
.featured-match {
  margin: 0 0 22px;
}
.featured-match-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 106, 53, 0.38);
  border-radius: 4px;
  background: linear-gradient(115deg, #13273d 0%, #0d1a2c 62%, #101c2a 100%);
  box-shadow: 0 22px 55px #0002;
}
.featured-match-card:after {
  content: "72";
  position: absolute;
  right: 3%;
  top: -42px;
  font: 900 clamp(140px, 22vw, 260px) / 1 var(--display);
  color: #ffffff05;
  pointer-events: none;
}
.featured-match-top,
.featured-match-main,
.featured-stats {
  position: relative;
  z-index: 1;
}
.featured-match-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.match-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #ff6a3566;
  color: var(--orange);
  font: 10px var(--mono);
  letter-spacing: 0.1em;
}
.featured-date {
  font: 10px var(--mono);
  color: var(--muted);
}
.featured-match-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 25px 0;
}
.featured-kicker {
  margin: 0 0 9px;
  color: var(--cyan);
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.featured-match-main h3 {
  margin: 0;
  font: 800 clamp(28px, 4vw, 44px) / 1 var(--display);
}
.featured-result {
  margin: 12px 0 0;
  color: #e2e9f2;
  font-size: 12px;
}
.featured-partnership {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.featured-score {
  flex-shrink: 0;
  text-align: right;
}
.featured-score strong {
  display: block;
  font: 900 clamp(62px, 9vw, 100px) / 0.85 var(--display);
  color: var(--orange);
  letter-spacing: -0.04em;
}
.featured-score strong small {
  font-size: 0.55em;
}
.featured-score span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: 0.08em;
}
.featured-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.featured-stats span {
  padding: 13px;
  background: #07101f8c;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.featured-stats b {
  display: block;
  color: var(--white);
  font: 800 22px var(--display);
  letter-spacing: 0;
}
.featured-source {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 18px;
  color: var(--cyan);
  font: 10px var(--mono);
}
.activity-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.activity-item {
  display: flex;
  gap: 15px;
  min-width: 0;
  padding: 22px;
  background: linear-gradient(145deg, #0e1d30, #0a1524);
  border: 1px solid var(--line);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.activity-item:hover {
  transform: translateY(-3px);
  border-color: #7ce5f255;
}
.activity-index {
  color: var(--orange);
  font: 800 28px var(--display);
}
.activity-content {
  min-width: 0;
}
.activity-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: 0.06em;
}
.activity-meta time {
  color: var(--muted);
}
.activity-content h3 {
  margin: 12px 0 8px;
  font-size: 14px;
  line-height: 1.4;
}
.activity-content p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.activity-content > a {
  display: inline-block;
  margin-top: 14px;
  color: var(--orange);
  font: 9px var(--mono);
}
.activity-empty {
  padding: 22px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
}
.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: 0.1em;
}
.activity-footer a {
  color: var(--cyan);
}
@media (max-width: 900px) {
  .activity-feed {
    grid-template-columns: 1fr 1fr;
  }
  .featured-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .featured-match-card {
    padding: 18px;
  }
  .featured-match-main {
    align-items: flex-start;
    gap: 12px;
    padding: 22px 0;
  }
  .featured-score strong {
    font-size: 66px;
  }
  .featured-score span {
    max-width: 100px;
    line-height: 1.6;
  }
  .featured-match-main h3 {
    font-size: 30px;
  }
  .featured-date {
    font-size: 9px;
  }
  .activity-feed {
    grid-template-columns: 1fr;
  }
  .activity-item {
    padding: 18px;
  }
  .activity-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-photo-wrap {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4/5;
  }
  .hero-actions .button {
    justify-content: space-between;
  }
  footer {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 600px) {
}

/* India theme + interactive feature modules */
:root {
  --orange: #ff9933;
  --cyan: #8fbfff;
  --india-green: #138808;
  --panel: #0c1e37;
  --panel2: #122b49;
}
.search-section {
  padding-top: 34px;
  padding-bottom: 36px;
  background: linear-gradient(100deg, #fff8ef 0%, #f8fbff 54%, #eff8ef 100%);
  color: #10264b;
  border-bottom: 3px solid #ff9933;
}
.search-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.search-top h2 {
  font: 900 clamp(32px, 4vw, 48px) / 0.95 var(--display);
  margin: 12px 0 0;
}
.search-top h2 em {
  font-style: normal;
  color: #1765bd;
}
.search-top .eyebrow {
  color: #1765bd;
}
.search-top p {
  max-width: 350px;
  color: #4c607a;
  font-size: 12px;
  line-height: 1.7;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 8px 15px;
  border: 1px solid #c5d3e4;
  background: #fff;
  box-shadow: 0 8px 28px #10264b0d;
}
.search-box > span {
  font-size: 28px;
  color: #1765bd;
}
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 0;
  color: #10264b;
  font: 14px var(--body);
}
.search-box kbd {
  font: 9px var(--mono);
  color: #536780;
}
.search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.search-hint {
  grid-column: 1/-1;
  margin: 8px 0 0;
  color: #536780;
  font-size: 11px;
}
.search-result {
  display: block;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #dbe3ed;
  color: #10264b;
}
.search-result strong,
.search-result span {
  display: block;
}
.search-result strong {
  font-size: 12px;
}
.search-result span {
  margin-top: 6px;
  color: #536780;
  font-size: 10px;
  line-height: 1.6;
}
.search-result:hover {
  border-color: #1765bd;
}
.feature-section,
.records-section,
.fan-zone-section,
.poster-section {
  background: linear-gradient(135deg, #091a30, #0d2440);
  border-top: 1px solid #ffffff12;
  border-bottom: 1px solid #ffffff12;
}
.explorer-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 16px;
}
.explorer-toolbar label,
.poster-controls label {
  display: grid;
  gap: 8px;
  color: #9db1ca;
  font: 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.explorer-toolbar select,
.explorer-toolbar input,
.poster-controls input,
.poster-controls select {
  width: 100%;
  min-width: 0;
  background: #07101f;
  border: 1px solid #314b6a;
  color: #f4f7fb;
  padding: 13px;
  font: 12px var(--body);
  border-radius: 0;
}
.explorer-summary,
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.explorer-metric,
.analytics-metric {
  padding: 18px;
  background: #f5f8fc;
  color: #10264b;
  border-top: 3px solid #1765bd;
  min-width: 0;
}
.explorer-metric span,
.analytics-metric span {
  display: block;
  font: 9px var(--mono);
  line-height: 1.6;
  color: #536780;
  letter-spacing: 0.06em;
}
.explorer-metric strong,
.analytics-metric strong {
  display: block;
  margin-top: 10px;
  font: 800 clamp(25px, 3vw, 38px) / 1 var(--display);
  overflow-wrap: anywhere;
}
.explorer-chart,
.analytics-chart {
  margin: 20px 0 26px;
  padding: 20px;
  background: #071528;
  border: 1px solid #ffffff12;
}
.bar-chart {
  display: grid;
  gap: 12px;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(115px, 190px) 1fr 38px;
  gap: 12px;
  align-items: center;
}
.bar-row > span {
  font: 10px var(--mono);
  color: #b6c6da;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-row > b {
  text-align: right;
  color: #fff;
  font: 700 13px var(--display);
}
.bar-track,
.milestone-track,
.poll-track {
  height: 9px;
  background: #ffffff14;
  overflow: hidden;
}
.bar-track i,
.milestone-track i,
.poll-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1765bd, #ff9933);
  min-width: 0;
}
.records-section {
  background: linear-gradient(110deg, #f4f8ff, #fff8ef);
  color: #10264b;
}
.records-section .section-heading > p {
  color: #536780;
}
.records-section .eyebrow {
  color: #1765bd;
}
.records-section h2 em,
.analytics-head h3 em {
  color: #1765bd;
}
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.milestone-card {
  padding: 22px;
  background: #fff;
  border: 1px solid #d7e1ee;
  box-shadow: 0 12px 30px #10264b08;
  min-width: 0;
}
.feature-eyebrow {
  color: #1765bd;
  font: 9px var(--mono);
  letter-spacing: 0.1em;
}
.milestone-card h3 {
  min-height: 42px;
  margin: 14px 0;
  font-size: 15px;
}
.milestone-values {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.milestone-values strong {
  font: 800 35px var(--display);
  color: #1765bd;
}
.milestone-values span,
.milestone-card p,
.milestone-card small {
  color: #536780;
  font-size: 10px;
}
.milestone-track {
  margin: 14px 0;
  background: #e3eaf3;
}
.milestone-card p {
  line-height: 1.7;
}
.milestone-card small {
  font: 9px var(--mono);
}
.analytics-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 15px;
  margin-top: 50px;
}
.analytics-head h3 {
  font: 800 clamp(26px, 4vw, 42px) var(--display);
  margin: 10px 0;
}
.analytics-head > span {
  font: 10px var(--mono);
  color: #536780;
  text-align: right;
}
.records-section .analytics-chart {
  background: #10264b;
}
.feature-note {
  color: #8296b0;
  font-size: 10px;
  line-height: 1.8;
}
.fan-zone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fan-card {
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
  color: #10264b;
  border-top: 4px solid #ff9933;
}
.fan-card:nth-child(2) {
  border-top-color: #138808;
}
.fan-card h3 {
  font: 800 clamp(25px, 3vw, 36px) / 1.1 var(--display);
  margin: 14px 0 20px;
}
.fan-card .feature-eyebrow {
  color: #1765bd;
  font: 10px var(--mono);
}
.poll-options {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.poll-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #d6e0ec;
  cursor: pointer;
  font-size: 12px;
}
.poll-option:has(input:checked) {
  border-color: #1765bd;
  background: #edf5ff;
}
.poll-option input {
  accent-color: #1765bd;
}
.fan-card .button {
  border: 0;
  cursor: pointer;
}
.poll-results {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.poll-result > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #536780;
  font-size: 10px;
}
.poll-result b {
  color: #1765bd;
}
.poll-track {
  margin-top: 6px;
  background: #e4eaf2;
}
.poll-track i {
  background: linear-gradient(90deg, #1765bd, #138808);
}
.poll-results small {
  color: #6a7d94;
  font: 9px var(--mono);
}
.fan-links {
  display: grid;
  gap: 10px;
}
.fan-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 15px;
  border: 1px solid #d6e0ec;
  color: #10264b;
}
.fan-link span,
.fan-link small {
  grid-column: 1/-1;
  color: #64768b;
  font: 9px var(--mono);
}
.fan-link strong {
  font-size: 12px;
}
.fan-link:hover {
  border-color: #1765bd;
}
.poster-section {
  background: linear-gradient(120deg, #0b1d33, #0e2847);
}
.poster-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 24px;
  align-items: start;
}
.poster-controls {
  display: grid;
  gap: 15px;
  padding: 22px;
  background: #fff;
  color: #10264b;
}
.poster-controls label {
  color: #536780;
}
.poster-controls input,
.poster-controls select {
  background: #f7f9fc;
  color: #10264b;
  border-color: #d5deea;
}
.poster-controls .button {
  justify-content: center;
  cursor: pointer;
}
.poster-controls .outline {
  color: #10264b;
  border-color: #b6c4d5;
  margin: 0;
}
.poster-controls .feature-note {
  color: #536780;
  margin: 0;
}
.poster-preview {
  padding: 14px;
  background: #07101f;
  border: 1px solid #ffffff22;
}
.poster-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  background: #f7f8fc;
}
@media (max-width: 900px) {
  .search-results {
    grid-template-columns: 1fr 1fr;
  }
  .milestone-grid {
    grid-template-columns: 1fr 1fr;
  }
  .explorer-summary,
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .search-top {
    display: block;
  }
  .search-top p {
    margin-top: 14px;
  }
  .search-results {
    grid-template-columns: 1fr;
  }
  .explorer-toolbar {
    grid-template-columns: 1fr;
  }
  .explorer-summary,
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .bar-row {
    grid-template-columns: 95px 1fr 28px;
    gap: 8px;
  }
  .bar-row > span {
    font-size: 8px;
  }
  .milestone-grid,
  .fan-zone-grid,
  .poster-layout {
    grid-template-columns: 1fr;
  }
  .analytics-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .analytics-head > span {
    text-align: left;
  }
  .poster-controls {
    padding: 17px;
  }
}
@media (max-width: 650px) {
}

/* Refined editorial layout: compact search, restrained labels, less template-like chrome */
.search-section {
  padding: 18px clamp(20px, 5vw, 76px) 20px !important;
  background: linear-gradient(100deg, #fffaf4 0%, #fbfcfe 55%, #f2f8f2 100%);
  border-bottom: 2px solid #ff9933;
}
.search-top {
  align-items: center !important;
  margin-bottom: 12px !important;
  gap: 18px;
}
.search-top h2 {
  font-size: clamp(23px, 2.3vw, 32px) !important;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.search-top .eyebrow {
  font-size: 9px;
  letter-spacing: 0.13em;
}
.search-top p {
  max-width: 280px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}
.search-box {
  max-width: 100%;
  padding: 3px 12px !important;
  box-shadow: none !important;
  border-color: #d9e0e8;
}
.search-box > span {
  font-size: 21px;
}
.search-box input {
  padding: 9px 0 !important;
  font-size: 12px;
}
.search-box kbd {
  font-size: 8px;
}
.search-results {
  margin-top: 8px !important;
  gap: 6px;
}
.search-hint {
  font-size: 10px;
  margin: 2px 0 0;
}
.search-result {
  padding: 10px 12px;
}
.search-result strong {
  font-size: 11px;
}
.search-result span {
  font-size: 9px;
  margin-top: 4px;
}
.section-heading .eyebrow {
  letter-spacing: 0.09em;
}
.section-heading h2 {
  letter-spacing: -0.025em;
}
.section-heading > p {
  max-width: 390px;
  font-size: 12px;
  line-height: 1.65;
}
.profile-section {
  padding-top: clamp(36px, 5vw, 70px) !important;
  padding-bottom: clamp(38px, 5vw, 70px) !important;
}
@media (max-width: 700px) {
  .search-section {
    padding: 16px 18px !important;
  }
  .search-top {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .search-top h2 {
    font-size: 26px !important;
  }
  .search-top p {
    max-width: 100%;
  }
  .search-box input {
    font-size: 12px;
  }
  .search-box kbd {
    display: none;
  }
}

/* Final visual system: one consistent navy canvas, warm India-orange accent */
:root {
  --bg: #07101f;
  --panel: #0d1a2c;
  --panel2: #122238;
  --white: #f4f7fb;
  --muted: #a0aec1;
  --orange: #ff9933;
  --cyan: #b8d4f7;
  --line: rgba(184, 212, 247, 0.14);
  --india-green: #138808;
}
body,
.hero,
.profile-section,
.stats-section,
.feature-section,
.records-section,
.fan-zone-section,
.poster-section,
.innings-section,
.activity-section,
.impact-section,
.about-section {
  background: #07101f !important;
  color: var(--white);
}
.hero {
  background:
    radial-gradient(ellipse at 75% 45%, rgba(35, 75, 112, 0.2), transparent 48%), #07101f !important;
}
.profile-section {
  background: #091626 !important;
}
.ticker {
  background: #10243b !important;
  color: #d9e8fa !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker b {
  color: var(--orange) !important;
}
.section h2 em,
.profile-copy h2 em,
.section-heading h2 em,
.records-section h2 em,
.analytics-head h3 em {
  color: var(--orange) !important;
}
.stats-grid:not(.career-formats) .stat-feature {
  background: #0d1a2c !important;
  color: var(--white) !important;
  border: 1px solid rgba(255, 153, 51, 0.5) !important;
  box-shadow: none !important;
}
.stat-feature .stat-label,
.stat-feature .stat-note {
  color: var(--muted) !important;
}
.stat-feature strong {
  color: var(--orange);
}
.stat-watermark {
  color: #ff993311 !important;
}
.stat-card,
.format-card,
.milestone-card,
.analytics-metric,
.explorer-metric,
.fan-card,
.poster-controls {
  background: #0d1a2c !important;
  color: var(--white) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.stat-card .stat-label,
.stat-card .stat-note,
.format-detail,
.milestone-values span,
.milestone-card p,
.milestone-card small,
.analytics-metric span,
.explorer-metric span,
.poster-controls label {
  color: var(--muted) !important;
}
.stat-card strong,
.milestone-values strong,
.analytics-metric strong,
.explorer-metric strong {
  color: var(--white) !important;
}
.stat-feature strong,
.milestone-values strong {
  color: var(--orange) !important;
}
.data-line,
.featured-match-card,
.activity-item,
.explorer-chart,
.analytics-chart,
.poster-preview {
  background: #0d1a2c !important;
  border-color: var(--line) !important;
}
.records-section .section-heading > p,
.section-heading > p,
.profile-intro,
.profile-teams,
.impact-copy p,
.about-copy p {
  color: var(--muted) !important;
}
.explorer-summary,
.analytics-grid {
  gap: 10px;
}
.explorer-metric,
.analytics-metric {
  border-top: 2px solid var(--orange) !important;
}
.bar-track i,
.milestone-track i,
.poll-track i {
  background: var(--orange) !important;
}
.milestone-track,
.poll-track {
  background: #24354b !important;
}
.fan-card {
  border-top: 2px solid var(--orange) !important;
}
.fan-card:nth-child(2) {
  border-top-color: var(--orange) !important;
}
.poll-option {
  background: #091626 !important;
  border-color: var(--line) !important;
  color: var(--white) !important;
}
.poll-option:has(input:checked) {
  background: #12243a !important;
  border-color: var(--orange) !important;
}
.poll-option input {
  accent-color: var(--orange) !important;
}
.poll-result > div:first-child,
.poll-results small,
.fan-link small,
.fan-link span {
  color: var(--muted) !important;
}
.poll-result b,
.fan-link:hover {
  color: var(--orange) !important;
}
.fan-link {
  background: #091626 !important;
  border-color: var(--line) !important;
  color: var(--white) !important;
}
.poster-controls input,
.poster-controls select,
.explorer-toolbar select,
.explorer-toolbar input {
  background: #07101f !important;
  color: var(--white) !important;
  border-color: var(--line) !important;
}
.button.primary,
.primary {
  background: var(--orange) !important;
  color: #171717 !important;
}
.button.primary:hover,
.primary:hover {
  background: #ffb45e !important;
}
.button.outline,
.outline {
  background: transparent !important;
  color: var(--white) !important;
  border-color: #53657b !important;
}
.button.outline:hover,
.outline:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}
.feature-eyebrow,
.eyebrow,
.profile-teams b,
.featured-kicker,
.activity-meta {
  color: var(--cyan) !important;
}
.live-dot {
  background: var(--orange) !important;
  box-shadow: 0 0 10px #ff993344 !important;
}
.activity-item:hover {
  border-color: #ff993355 !important;
}
.quiz-feedback {
  min-height: 44px;
  margin: 14px 0 8px;
  color: #dce8f7;
  font-size: 11px;
  line-height: 1.8;
}
.fan-zone-updated {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font: 9px/1.7 var(--mono);
}
.fan-quiz-card {
  border-top: 2px solid var(--orange) !important;
}
@media (max-width: 900px) {
  .fan-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .fan-zone-grid {
    grid-template-columns: 1fr;
  }
  .section {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .profile-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}

/* Three balanced Fan Zone panels on desktop */
.fan-zone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .fan-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .fan-zone-grid {
    grid-template-columns: 1fr;
  }
}

/* The 72 Dashboard + Moments Archive */
.upgrade-section {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 34, 56, 0.35), transparent);
}
.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.upgrade-card,
.moment-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #102139, #0b1728);
  padding: 22px;
  min-width: 0;
}
.upgrade-card .feature-eyebrow,
.moment-card .feature-eyebrow {
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.upgrade-card h3,
.moment-card h3 {
  font: 700 25px/1.1 var(--display);
  margin: 14px 0 8px;
}
.upgrade-card strong {
  font: 800 38px var(--display);
  color: var(--orange);
  display: block;
  margin: 10px 0;
}
.upgrade-card p,
.moment-card p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.dashboard-foot,
.moments-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.dashboard-foot span {
  font: 10px var(--mono);
  color: var(--muted);
}
.moments-tools label {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  flex: 1;
  max-width: 520px;
}
.moments-tools input {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 12px 14px;
  min-width: 0;
  flex: 1;
  font: 12px var(--body);
}
.moments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.moment-score {
  font: 800 48px/0.95 var(--display);
  color: var(--orange);
  margin: 18px 0 8px;
}
.moment-card .moment-meta {
  font: 10px var(--mono);
  color: var(--muted);
}
.moment-card .moment-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.moment-tags span {
  font: 9px var(--mono);
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: #d9e4f3;
}
@media (max-width: 900px) {
  .upgrade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .moments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .upgrade-grid,
  .moments-grid {
    grid-template-columns: 1fr;
  }
  .moments-tools label {
    width: 100%;
    max-width: none;
    align-items: flex-start;
    flex-direction: column;
  }
  .moments-tools input {
    width: 100%;
    min-height: 44px;
  }
  .upgrade-card,
  .moment-card {
    padding: 19px;
  }
}

/* Personal, browser-only fan streak */
.streak-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(110deg, #102139, #0b1728);
  flex-wrap: wrap;
}
.streak-panel .feature-eyebrow {
  font: 10px var(--mono);
  letter-spacing: 0.12em;
  color: var(--cyan);
}
.streak-panel strong {
  display: block;
  font: 800 clamp(38px, 5vw, 62px) / 1 var(--display);
  color: var(--orange);
  margin: 14px 0 8px;
}
.streak-panel p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
.streak-panel button:disabled {
  opacity: 0.8;
  cursor: default;
}

/* Layout alignment pass — keep new sections on the same grid rhythm */
.topbar {
  gap: 24px;
}
.topbar nav {
  gap: clamp(12px, 1.6vw, 25px);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.topbar nav a {
  white-space: nowrap;
}
.upgrade-section .section-heading {
  align-items: flex-end;
  margin-bottom: 30px;
}
.upgrade-grid {
  align-items: stretch;
}
.upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 170px;
}
.upgrade-card strong {
  line-height: 1;
  margin: 18px 0 10px;
}
.upgrade-card h3 {
  margin-top: auto;
  font-size: 20px;
}
.format-snapshot {
  margin-top: 34px;
}
.format-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.format-snapshot-head > span:last-child {
  font: 10px var(--mono);
  color: var(--muted);
}
.format-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.format-snapshot-card {
  padding: 17px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  min-width: 0;
}
.format-snapshot-card > span {
  font: 10px var(--mono);
  color: var(--cyan);
  letter-spacing: 0.07em;
}
.format-snapshot-card strong {
  display: block;
  font: 800 32px/1 var(--display);
  margin: 14px 0 4px;
  color: var(--white);
}
.format-snapshot-card small {
  font: 9px var(--mono);
  color: var(--muted);
}
.format-snapshot-card p {
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}
.moments-grid {
  align-items: stretch;
}
.moment-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 210px;
}
.moment-card h3 {
  margin-bottom: 10px;
}
.moment-card .moment-tags {
  margin-top: auto;
  padding-top: 14px;
}
@media (max-width: 1050px) {
  .topbar {
    height: auto;
    min-height: 78px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .topbar nav {
    gap: 12px 18px;
  }
  .format-snapshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .topbar {
    gap: 10px;
  }
  .topbar nav {
    gap: 10px 14px;
    justify-content: flex-start;
  }
  .format-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .format-snapshot-card {
    padding: 14px;
  }
  .upgrade-section .section-heading {
    align-items: flex-start;
  }
}

/* Format-aware delivery archive snapshot on the homepage */
.archive-snapshot {
  margin-top: 28px;
}
.archive-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.archive-snapshot-card {
  min-width: 0;
  padding: 17px 15px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.archive-snapshot-card > span {
  display: block;
  color: var(--cyan);
  font: 10px var(--mono);
  letter-spacing: 0.06em;
}
.archive-snapshot-card strong {
  display: block;
  margin: 13px 0 5px;
  color: var(--white);
  font: 800 30px/1 var(--display);
}
.archive-snapshot-card small {
  color: var(--muted);
  font: 9px var(--mono);
}
.archive-snapshot-card p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .archive-snapshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .archive-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-snapshot-card {
    padding: 14px;
  }
}

/* Compact, source-led homepage refresh */
.profile-quick-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}
.profile-quick-actions .button {
  padding: 10px 13px;
  gap: 10px;
}
.tilak-news-section {
  background: #081321;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tilak-news-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr);
  gap: 22px;
  align-items: start;
}
.tilak-feature-photo-wrap {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}
.tilak-feature-photo-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
  background: var(--panel2);
}
.tilak-feature-photo-wrap figcaption {
  padding: 12px;
  font: 10px var(--mono);
  line-height: 1.7;
  color: var(--muted);
}
.tilak-feature-photo-wrap figcaption a,
.tilak-official-links a {
  color: var(--cyan);
}
.tilak-news-content {
  min-width: 0;
}
.tilak-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tilak-news-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tilak-news-image {
  display: block;
  aspect-ratio: 16/9;
  background: var(--panel2);
  overflow: hidden;
}
.tilak-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tilak-news-body {
  padding: 14px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}
.tilak-news-body .tilak-news-meta {
  font: 9px var(--mono);
  line-height: 1.6;
  color: var(--cyan);
  overflow-wrap: anywhere;
}
.tilak-news-body h3 {
  font-size: 14px;
  line-height: 1.45;
  margin: 9px 0;
  color: var(--white);
}
.tilak-news-body h3 a:hover {
  color: var(--orange);
}
.tilak-news-body p {
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 12px;
}
.tilak-news-source {
  font: 10px var(--mono);
  color: var(--orange);
  margin-top: auto;
  padding-top: 8px;
}
.tilak-news-meta {
  font: 10px var(--mono);
  line-height: 1.6;
  color: var(--muted);
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}
.tilak-official-links {
  margin-top: 22px;
}
.ticker,
.impact-section,
.fan-streak-panel {
  display: none !important;
}
@media (max-width: 800px) {
  .profile-section {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    align-items: start;
  }
  .profile-photo-wrap {
    width: 112px;
    min-height: 142px;
    max-height: none;
    aspect-ratio: 4/5;
  }
  .profile-copy h2 {
    font-size: clamp(34px, 8vw, 48px);
    margin: 8px 0;
  }
  .profile-intro {
    font-size: 11px;
    line-height: 1.6;
    margin: 8px 0;
  }
  .profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 12px 0;
  }
  .profile-facts div {
    padding: 8px;
  }
  .profile-facts small {
    font-size: 8px;
    margin-bottom: 4px;
  }
  .profile-facts strong {
    font-size: 10px;
  }
  .profile-teams {
    font-size: 10px;
    line-height: 1.6;
    margin: 8px 0;
  }
  .profile-teams b {
    font-size: 9px;
  }
  .profile-quick-actions {
    margin: 10px 0 4px;
    gap: 6px;
  }
  .profile-quick-actions .button {
    font-size: 9px;
    padding: 8px 9px;
  }
  .profile-copy .about-links {
    gap: 7px;
    font-size: 10px;
    flex-wrap: wrap;
  }
  .hero {
    display: none;
  }
  .section {
    padding: 34px 5vw;
  }
  .section-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .section h2 {
    font-size: clamp(29px, 7vw, 39px);
    line-height: 1;
    margin: 8px 0 0;
  }
  .section-heading > p {
    font-size: 11px;
    line-height: 1.55;
    margin: 0;
    max-width: none;
  }
  .stats-grid {
    gap: 7px;
  }
  .stat-card {
    min-height: 100px;
    padding: 12px;
  }
  .stat-card strong {
    font-size: 30px;
    margin: 12px 0 7px;
  }
  .stat-label {
    font-size: 9px;
    letter-spacing: 0.07em;
  }
  .stat-note,
  .format-detail {
    font-size: 9px;
    line-height: 1.45;
  }
  .career-formats {
    margin: 10px 0 16px;
  }
  .data-line {
    font-size: 9px;
    gap: 6px;
  }
  .tilak-news-layout {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
  }
  .tilak-feature-photo-wrap img {
    aspect-ratio: 3/4;
    max-height: 160px;
  }
  .tilak-feature-photo-wrap figcaption {
    padding: 7px;
    font-size: 8px;
  }
  .tilak-news-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .tilak-news-body {
    padding: 10px;
  }
  .tilak-news-body h3 {
    font-size: 12px;
    line-height: 1.4;
    margin: 6px 0;
  }
  .tilak-news-body p {
    font-size: 10px;
    line-height: 1.5;
  }
  .tilak-news-body .tilak-news-meta,
  .tilak-news-source {
    font-size: 8px;
  }
  .tilak-official-links {
    margin-top: 12px;
    font-size: 10px;
    gap: 10px;
  }
  .table-wrap {
    border-radius: 2px;
  }
  th {
    padding: 10px 12px;
    font-size: 9px;
  }
  td {
    padding: 10px 12px;
    font-size: 11px;
  }
  .explorer-toolbar {
    gap: 8px;
  }
  .fan-zone-grid,
  .analytics-grid,
  .milestone-grid {
    gap: 8px;
  }
  .fan-card {
    padding: 13px;
  }
}
@media (max-width: 430px) {
  .topbar {
    min-height: 56px;
    padding: 0 4vw;
  }
  .brand {
    font-size: 11px;
    gap: 8px;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  nav {
    top: 55px;
    padding: 14px 5vw;
    gap: 14px;
  }
  .profile-section {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }
  .profile-photo-wrap {
    width: 88px;
    min-height: 118px;
  }
  .profile-copy h2 {
    font-size: 32px;
  }
  .profile-intro {
    font-size: 10px;
  }
  .profile-facts div {
    padding: 7px 6px;
  }
  .profile-facts strong {
    font-size: 9px;
  }
  .profile-quick-actions .button {
    font-size: 8px;
    padding: 7px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-card {
    padding: 10px;
    min-height: 90px;
  }
  .stat-card strong {
    font-size: 27px;
  }
  .format-detail {
    display: block;
    overflow-wrap: anywhere;
  }
  .tilak-news-layout {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
  }
  .tilak-feature-photo-wrap figcaption {
    font-size: 7px;
    padding: 6px;
  }
  .tilak-news-body h3 {
    font-size: 11px;
  }
  .section {
    padding: 28px 4vw;
  }
  footer {
    gap: 10px;
    font-size: 9px;
  }
}

/* Statsguru analysis */
.statsguru-section {
  background: #091523;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statsguru-sourcebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 18px;
  margin-bottom: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  font: 10px var(--mono);
  color: var(--muted);
}
.statsguru-sourcebar b {
  color: var(--white);
  font-weight: 500;
}
.statsguru-sourcelinks,
.statsguru-footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.statsguru-sourcelinks a,
.statsguru-footer-links a {
  color: var(--cyan);
}
.statsguru-format-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 14px;
}
.statsguru-format-tabs button,
.statsguru-category-grid button {
  font: 700 11px var(--body);
  color: #c9d5e4;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 12px 15px;
  cursor: pointer;
  white-space: nowrap;
}
.statsguru-format-tabs button.active,
.statsguru-category-grid button.active {
  background: var(--orange);
  color: #101522;
  border-color: var(--orange);
}
.statsguru-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.statsguru-category-grid button {
  text-align: left;
  white-space: normal;
  min-height: 48px;
  line-height: 1.4;
}
.statsguru-panel {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.statsguru-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.statsguru-panel-head h3 {
  font: 800 clamp(23px, 3vw, 34px) / 1.1 var(--display);
  margin: 9px 0 0;
}
.statsguru-format-pill {
  border: 1px solid var(--orange);
  color: var(--orange);
  padding: 7px 10px;
  font: 10px var(--mono);
}
.statsguru-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}
.statsguru-metric {
  padding: 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  min-width: 0;
}
.statsguru-metric span {
  display: block;
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 0.08em;
}
.statsguru-metric strong {
  display: block;
  font: 800 clamp(24px, 3vw, 36px) / 1.1 var(--display);
  margin-top: 10px;
  overflow-wrap: anywhere;
}
.statsguru-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin: 15px 0 0;
}
.statsguru-footer-links {
  font: 11px var(--mono);
  margin-top: 17px;
}
@media (max-width: 760px) {
  .statsguru-section {
    padding: 55px 5vw;
  }
  .statsguru-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .statsguru-category-grid button {
    font-size: 10px;
    padding: 10px;
    min-height: 43px;
  }
  .statsguru-panel {
    padding: 12px;
  }
  .statsguru-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .statsguru-metric {
    padding: 11px;
  }
  .statsguru-sourcebar {
    align-items: flex-start;
    padding: 12px;
  }
  .statsguru-sourcelinks {
    gap: 10px;
  }
  .statsguru-panel .table-wrap table {
    min-width: 520px;
  }
  .statsguru-format-tabs button {
    padding: 10px 12px;
  }
}

/* Section tabs: show only the selected page section */
main > section[hidden] {
  display: none !important;
}
#main-nav a.active {
  color: var(--orange);
  font-weight: 800;
}
#main-nav a.active:after {
  content: "";
  display: block;
  height: 2px;
  background: var(--orange);
  margin-top: 6px;
}
.profile-section .profile-teams,
.profile-section .about-links {
  display: none !important;
}
.profile-section {
  min-height: 0;
  align-content: center;
}
@media (max-width: 760px) {
  .profile-section {
    min-height: 0;
    padding: 26px 5vw !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-content: start;
  }
  .profile-photo-wrap {
    width: 82px !important;
    min-height: 110px !important;
    aspect-ratio: 4/5;
  }
  .profile-copy h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
    margin: 8px 0 !important;
  }
  .profile-intro {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  .profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 10px 0 !important;
  }
  .profile-facts > div {
    padding: 8px !important;
  }
  .profile-quick-actions .button {
    padding: 10px 11px !important;
    font-size: 10px !important;
  }
}

/* Compact home snapshot: useful content stays on Home without duplicating full stats */
.home-snapshot-section {
  padding-top: 34px;
  padding-bottom: 38px;
  background: #081321;
  border-top: 1px solid var(--line);
}
.home-snapshot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.home-snapshot-heading h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin: 9px 0 0;
}
.home-snapshot-heading .button {
  margin: 0;
  padding: 10px 13px;
  white-space: nowrap;
}
.home-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 22px;
}
.home-mini-stat {
  min-width: 0;
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.home-mini-stat span {
  display: block;
  font: 9px var(--mono);
  color: var(--muted);
  letter-spacing: 0.08em;
}
.home-mini-stat strong {
  display: block;
  font: 800 clamp(27px, 3vw, 39px) / 1.05 var(--display);
  margin-top: 10px;
  overflow-wrap: anywhere;
}
.home-snapshot-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.home-snapshot-block {
  min-width: 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.home-snapshot-blockhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.home-snapshot-blockhead h3 {
  font: 800 21px/1.1 var(--display);
  margin: 6px 0 0;
}
.home-snapshot-blockhead > a {
  font: 10px var(--mono);
  color: var(--cyan);
  white-space: nowrap;
}
.home-innings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.home-innings-score {
  width: 58px;
  flex: none;
}
.home-innings-score strong {
  display: block;
  font: 800 26px/1 var(--display);
  color: var(--orange);
}
.home-innings-score span {
  display: block;
  font: 8px var(--mono);
  color: var(--muted);
  margin-top: 4px;
}
.home-innings-detail {
  flex: 1;
  min-width: 0;
}
.home-innings-detail strong,
.home-innings-detail span,
.home-innings-detail small {
  display: block;
  overflow-wrap: anywhere;
}
.home-innings-detail strong {
  font-size: 11px;
}
.home-innings-detail span,
.home-innings-detail small {
  font: 9px/1.6 var(--mono);
  color: var(--muted);
  margin-top: 3px;
}
.home-row-source {
  color: var(--orange);
  font-size: 16px;
  padding: 6px;
}
.home-news-item {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.home-news-item > span {
  font: 9px var(--mono);
  color: var(--cyan);
}
.home-news-item h4 {
  font-size: 12px;
  line-height: 1.5;
  margin: 7px 0;
}
.home-news-item h4 a:hover {
  color: var(--orange);
}
.home-news-item p {
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.home-snapshot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 15px;
  margin-top: 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  font: 9px var(--mono);
  color: var(--muted);
}
.home-snapshot-foot b {
  color: var(--white);
  font-weight: 500;
}
.home-snapshot-foot > a {
  color: var(--cyan);
}
@media (max-width: 760px) {
  .home-snapshot-section {
    padding: 27px 5vw;
  }
  .home-snapshot-heading {
    align-items: flex-start;
  }
  .home-snapshot-heading h2 {
    font-size: 31px;
  }
  .home-snapshot-heading .button {
    font-size: 9px;
    padding: 9px 10px;
  }
  .home-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
  }
  .home-mini-stat {
    padding: 12px;
  }
  .home-mini-stat strong {
    font-size: 30px;
    margin-top: 8px;
  }
  .home-snapshot-columns {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .home-snapshot-block {
    padding: 12px;
  }
  .home-snapshot-foot {
    font-size: 8px;
    align-items: flex-start;
  }
}
@media (max-width: 390px) {
  .home-snapshot-heading {
    display: block;
  }
  .home-snapshot-heading .button {
    margin-top: 12px;
  }
}

.home-format-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px;
}
.home-format-heading > span {
  font: 9px var(--mono);
  color: var(--muted);
}
.home-format-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.home-format-card {
  min-width: 0;
  padding: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.home-format-card > span {
  display: block;
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
}
.home-format-card > strong {
  display: block;
  font: 800 28px/1 var(--display);
  margin: 8px 0 5px;
}
.home-format-card > small {
  display: block;
  color: var(--muted);
  font: 9px/1.6 var(--mono);
}
@media (max-width: 760px) {
  .home-format-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .home-format-card {
    padding: 11px;
  }
  .home-format-card > strong {
    font-size: 25px;
  }
  .profile-section {
    padding-bottom: 24px !important;
  }
}

/* Compact navigation, nested stats views, ICC data cards and accessible dark controls */
:root {
  color-scheme: dark;
}
select,
option {
  color-scheme: dark;
}
select {
  background-color: #0d1a2c;
  color: #f4f7fb;
  border: 1px solid #40536c;
}
option {
  background: #0d1a2c;
  color: #f4f7fb;
}
.stats-section {
  padding: 42px 5vw !important;
}
.stats-subnav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 14px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.stats-subnav button {
  flex: 0 0 auto;
  padding: 11px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: #c9d5e4;
  font: 700 11px var(--body);
  cursor: pointer;
}
.stats-subnav button.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #101522;
}
.stats-subview[hidden] {
  display: none !important;
}
.stats-subview.section {
  padding: 30px 0 !important;
  margin: 0;
  background: transparent;
  border: 0;
}
.stats-subview .section-heading {
  margin-bottom: 22px;
}
.stats-subview .section h2 {
  font-size: clamp(30px, 4vw, 46px);
}
.icc-ranking-card {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
  margin: 12px 0 8px;
  max-width: 440px;
}
.icc-ranking-card > div {
  min-width: 0;
  padding: 10px 11px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.icc-ranking-card .eyebrow {
  font-size: 8px;
  letter-spacing: 0.07em;
}
.icc-ranking-card strong {
  display: block;
  font: 800 23px/1.1 var(--display);
  color: var(--orange);
  margin: 6px 0;
}
.icc-ranking-card small {
  display: block;
  color: var(--muted);
  font: 8px/1.5 var(--mono);
}
.official-records-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 13px;
}
.official-records-head h3 {
  font: 800 clamp(24px, 3vw, 34px) / 1.05 var(--display);
  margin: 8px 0 0;
}
.official-records-head h3 em {
  font-style: normal;
  color: var(--orange);
}
.official-records-head > span {
  font: 9px var(--mono);
  color: var(--muted);
  text-align: right;
}
.official-records-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 22px;
}
.official-record-card {
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  min-width: 0;
}
.official-record-card strong {
  display: block;
  color: var(--orange);
  font: 800 27px/1 var(--display);
  margin-bottom: 8px;
}
.official-record-card span {
  display: block;
  font: 10px/1.5 var(--mono);
  color: var(--muted);
}
.official-record-card h4 {
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0;
}
@media (max-width: 800px) {
  .topbar {
    z-index: 30;
  }
  nav.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    align-content: start;
    padding: 12px 4vw 16px;
    background: rgba(7, 16, 31, 0.98);
    box-shadow: 0 18px 35px #0007;
  }
  nav.open a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 11px;
    border-radius: 2px;
  }
  nav.open a.active:after {
    display: none;
  }
  .stats-section {
    padding: 28px 4vw !important;
  }
  .stats-subnav button {
    padding: 10px 13px;
    font-size: 10px;
  }
  .stats-subview.section {
    padding: 23px 0 !important;
  }
  .icc-ranking-card {
    max-width: none;
    grid-template-columns: 1fr 1fr;
  }
  .official-records-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .official-record-card {
    padding: 11px;
  }
  .official-record-card strong {
    font-size: 24px;
  }
  .official-record-card h4 {
    font-size: 11px;
  }
  .official-records-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .official-records-head > span {
    text-align: left;
  }
}
@media (max-width: 430px) {
  nav.open {
    top: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 4vw 14px;
  }
  nav.open a {
    font-size: 10px;
    min-height: 38px;
    padding: 8px;
  }
  .stats-section {
    padding: 24px 4vw !important;
  }
  .stats-subview.section {
    padding: 18px 0 !important;
  }
  .icc-ranking-card strong {
    font-size: 21px;
  }
}

/* Keep the focused Statsguru categories balanced on desktop. */
.statsguru-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .statsguru-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Site-wide custom select controls: dark, branded, and consistent on mobile. */
.custom-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.custom-select .cs-native-select {
  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;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: #f4f7fb;
  background: linear-gradient(145deg, #112238, #0a1626);
  border: 1px solid #40536c;
  border-radius: 3px;
  text-align: left;
  font: 500 12px var(--mono);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}
.cs-trigger:hover,
.custom-select.is-open .cs-trigger {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 106, 53, 0.1);
}
.cs-trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.cs-trigger:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.cs-trigger-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-trigger-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  color: var(--orange);
  background: rgba(255, 106, 53, 0.1);
  border: 1px solid rgba(255, 106, 53, 0.28);
  font: 700 17px/1 var(--body);
  transition: transform 0.16s ease;
}
.custom-select.is-open .cs-trigger-arrow {
  transform: rotate(180deg);
}
.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: transparent;
}
.cs-dialog {
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  overflow: hidden;
  color: #f4f7fb;
  background: #0a1525;
  border: 1px solid rgba(124, 229, 242, 0.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
}
.cs-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  background: linear-gradient(115deg, #12263d, #0b1728);
  border-bottom: 1px solid #293b51;
}
.cs-dialog-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.cs-kicker {
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: 0.15em;
}
.cs-dialog-title {
  font: 800 17px/1.2 var(--display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.cs-close {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: #cbd6e5;
  background: #102138;
  border: 1px solid #344961;
  border-radius: 3px;
  font: 300 24px/1 var(--body);
  cursor: pointer;
}
.cs-options {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: #435a73 #0a1525;
}
.cs-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  color: #d6e0ed;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(138, 160, 187, 0.12);
  border-radius: 2px;
  text-align: left;
  font: 500 12px/1.5 var(--mono);
  cursor: pointer;
}
.cs-option:last-child {
  border-bottom-color: transparent;
}
.cs-option:hover,
.cs-option:focus-visible {
  color: #fff;
  background: #13263d;
  border-color: #354b63;
  outline: none;
}
.cs-option[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(100deg, rgba(255, 106, 53, 0.16), rgba(255, 106, 53, 0.035));
  border-color: rgba(255, 106, 53, 0.42);
}
.cs-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cs-option-mark {
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  color: #07101f;
  background: var(--orange);
  border-radius: 50%;
  font: 800 12px var(--body);
}
.cs-option[aria-selected="false"] .cs-option-mark {
  color: transparent;
  background: #101e31;
  border: 1px solid #465c76;
}
@media (max-width: 640px) {
  .cs-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 7, 15, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: cs-fade-in 0.14s ease-out;
  }
  .cs-dialog {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0;
    max-width: 560px;
    max-height: min(72dvh, 620px);
    border-radius: 12px 12px 6px 6px;
    border-color: #344a64;
    animation: cs-rise-in 0.18s ease-out;
  }
  .cs-dialog-head {
    padding: 17px 17px 15px;
  }
  .cs-dialog-title {
    font-size: 19px;
  }
  .cs-options {
    padding: 7px 9px max(10px, env(safe-area-inset-bottom));
  }
  .cs-option {
    min-height: 56px;
    padding: 14px 12px;
    font: 500 13px/1.45 var(--body);
    border-bottom-color: rgba(138, 160, 187, 0.17);
  }
  .cs-option-mark {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
  }
}
@keyframes cs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes cs-rise-in {
  from {
    transform: translateY(14px);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-overlay,
  .cs-dialog {
    animation: none !important;
  }
  .cs-trigger,
  .cs-trigger-arrow {
    transition: none !important;
  }
}

/* ESPNcricinfo-style player analysis filter, adapted to the fan site's dark UI. */
.player-analysis-filter {
  margin: 0 0 18px;
  padding: 0;
  background: linear-gradient(135deg, #0e1b2d, #091422);
  border: 1px solid var(--line);
}
.player-analysis-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.player-analysis-toggle::-webkit-details-marker {
  display: none;
}
.player-analysis-toggle > span:first-child {
  display: grid;
  gap: 6px;
}
.player-analysis-toggle .eyebrow {
  font-size: 9px;
}
.player-analysis-toggle strong {
  font: 800 clamp(21px, 3vw, 29px) / 1.05 var(--display);
  letter-spacing: 0.01em;
}
.player-analysis-toggle small {
  font: 10px var(--mono);
  color: var(--muted);
}
.player-analysis-toggle-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange);
  color: var(--orange);
  font: 24px/1 var(--body);
  transition: transform 0.18s ease;
}
.player-analysis-filter[open] .player-analysis-toggle {
  border-bottom: 1px solid var(--line);
}
.player-analysis-filter[open] .player-analysis-toggle-icon {
  transform: rotate(45deg);
}
.player-analysis-content {
  padding: 18px;
}
.player-analysis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.player-analysis-head h3 {
  font: 800 clamp(22px, 3vw, 30px) / 1.1 var(--display);
  margin: 8px 0 0;
}
.player-analysis-head h3 em {
  color: var(--orange);
  font-style: normal;
}
.player-analysis-badge {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid rgba(124, 229, 242, 0.25);
  color: var(--cyan);
  font: 9px var(--mono);
}
.player-analysis-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.player-analysis-grid label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: #9db1ca;
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.player-analysis-grid input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px;
  color: #f4f7fb;
  background: #07101f;
  border: 1px solid #40536c;
  border-radius: 3px;
  font: 12px var(--mono);
  color-scheme: dark;
}
.player-analysis-grid input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.player-analysis-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.player-analysis-actions .button {
  min-height: 42px;
  padding: 10px 14px;
  font-size: 10px;
  cursor: pointer;
}
.player-analysis-actions #sg-filter-status {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--cyan);
  font: 9px/1.7 var(--mono);
}
.player-analysis-help {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}
@media (max-width: 850px) {
  .player-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 560px) {
  .player-analysis-filter {
    padding: 0;
    margin-bottom: 14px;
  }
  .player-analysis-toggle {
    min-height: 68px;
    padding: 12px;
  }
  .player-analysis-toggle strong {
    font-size: 22px;
  }
  .player-analysis-toggle small {
    font-size: 9px;
  }
  .player-analysis-content {
    padding: 12px;
  }
  .player-analysis-head {
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
  }
  .player-analysis-head h3 {
    font-size: 24px;
  }
  .player-analysis-badge {
    font-size: 8px;
  }
  .player-analysis-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .player-analysis-grid label {
    font-size: 8px;
    gap: 6px;
  }
  .player-analysis-grid input,
  .player-analysis-grid .cs-trigger {
    min-height: 44px;
    padding: 10px 9px;
    font-size: 10px;
  }
  .player-analysis-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .player-analysis-actions .button {
    width: 100%;
    padding: 10px 8px;
    font-size: 9px;
  }
  .player-analysis-actions #sg-filter-status {
    grid-column: 1/-1;
  }
  .player-analysis-help {
    font-size: 9px;
  }
}
@media (max-width: 360px) {
  .player-analysis-grid {
    grid-template-columns: 1fr;
  }
  .player-analysis-actions {
    grid-template-columns: 1fr;
  }
}

/* Final polish: mobile-first player hero, highlighted Explore controls, and photo gallery. */
.profile-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 6% 15%, rgba(255, 106, 53, 0.09), transparent 38%),
    linear-gradient(120deg, #07101f 0%, #0a192b 100%);
}
.profile-copy h2 {
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.profile-photo-wrap {
  border: 1px solid rgba(124, 229, 242, 0.28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: linear-gradient(145deg, #142942, #0a1525);
}
.profile-photo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.profile-facts > div {
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}
.profile-facts > div:hover {
  border-color: rgba(255, 106, 53, 0.6);
  transform: translateY(-2px);
}
.home-snapshot-section {
  background:
    radial-gradient(ellipse at 100% 0, rgba(124, 229, 242, 0.055), transparent 36%), #081321;
}
.home-snapshot-heading h2 {
  letter-spacing: -0.025em;
}
.home-mini-stat,
.home-format-card {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}
.home-mini-stat:hover,
.home-format-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 53, 0.45);
}
.statsguru-section {
  background:
    radial-gradient(ellipse at 95% 0, rgba(255, 106, 53, 0.075), transparent 34%), #091523;
}
.explore-heading {
  align-items: flex-end;
}
.explore-heading h2 {
  margin-bottom: 10px;
}
.explore-accent-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 106, 53, 0.4);
  background: rgba(255, 106, 53, 0.09);
  color: var(--orange);
  font: 9px var(--mono);
  letter-spacing: 0.11em;
}
.statsguru-sourcebar {
  border-color: rgba(124, 229, 242, 0.22);
  background: linear-gradient(100deg, rgba(124, 229, 242, 0.065), rgba(13, 26, 44, 0.92));
}
.statsguru-format-tabs button,
.statsguru-category-grid button {
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.statsguru-format-tabs button:hover,
.statsguru-category-grid button:hover {
  transform: translateY(-1px);
  border-color: var(--orange);
}
.player-analysis-filter {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 106, 53, 0.35);
  border-radius: 5px;
  overflow: hidden;
}
.player-analysis-toggle {
  background: linear-gradient(100deg, rgba(255, 106, 53, 0.11), rgba(13, 26, 44, 0.3));
}
.player-analysis-toggle strong {
  letter-spacing: -0.02em;
}
.player-analysis-toggle-icon {
  border-radius: 50%;
  font-size: 22px;
}
.player-analysis-filter[open] .player-analysis-toggle {
  background: linear-gradient(100deg, rgba(255, 106, 53, 0.16), rgba(13, 26, 44, 0.6));
}
.player-analysis-content {
  animation: explore-reveal 0.2s ease-out;
}
@keyframes explore-reveal {
  from {
    opacity: 0.65;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.player-analysis-badge {
  border-radius: 3px;
  background: rgba(124, 229, 242, 0.05);
}
.statsguru-panel {
  border-radius: 5px;
}
.statsguru-summary .statsguru-metric {
  border-top: 2px solid rgba(255, 106, 53, 0.55);
}
.cricinfo-gallery {
  margin: 22px 0 34px;
  padding: 20px;
  background: linear-gradient(145deg, #0d1b2d, #091321);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.gallery-heading h3 {
  font: 800 clamp(25px, 3.4vw, 36px) / 1 var(--display);
  margin: 7px 0 0;
}
.gallery-heading h3 em {
  color: var(--orange);
  font-style: normal;
}
.gallery-heading > span {
  max-width: 45%;
  text-align: right;
  color: var(--muted);
  font: 9px/1.6 var(--mono);
}
.cricinfo-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cricinfo-photo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #081321;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.cricinfo-photo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 53, 0.6);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.cricinfo-photo-card > a:first-child {
  display: block;
  overflow: hidden;
  background: #122238;
  aspect-ratio: 4/3;
}
.cricinfo-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.cricinfo-photo-card:hover img {
  transform: scale(1.035);
}
.cricinfo-photo-caption {
  padding: 10px 11px;
  color: #cbd6e5;
  font-size: 11px;
  line-height: 1.5;
}
.gallery-attribution {
  margin: 13px 0 0;
  color: var(--muted);
  font: 9px/1.6 var(--mono);
}
.tilak-news-layout {
  grid-template-columns: minmax(150px, 0.48fr) minmax(0, 1.52fr);
  gap: 18px;
}
.tilak-news-card {
  border-radius: 4px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}
.tilak-news-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 53, 0.45);
}
.tilak-news-body h3 {
  font-size: clamp(12px, 1.1vw, 15px);
}
.tilak-news-body .tilak-news-meta {
  color: #a9c6d9;
}
.tilak-news-meta {
  font-size: 9px;
}
.article-reader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 7, 15, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.article-reader[hidden] {
  display: none !important;
}
.article-reader-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 980px);
  height: min(88dvh, 900px);
  overflow: hidden;
  background: #081321;
  border: 1px solid rgba(124, 229, 242, 0.24);
  box-shadow: 0 25px 90px #0009;
  border-radius: 8px;
}
.article-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(110deg, #14263d, #091321);
  border-bottom: 1px solid var(--line);
}
.article-reader-head > div {
  min-width: 0;
}
.article-reader-head small {
  display: block;
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}
.article-reader-head h3 {
  font: 700 18px/1.3 var(--body);
  margin: 0;
  overflow-wrap: anywhere;
}
.article-reader-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #fff;
  background: #14263d;
  border: 1px solid #42566e;
  border-radius: 4px;
  font-size: 23px;
  cursor: pointer;
}
.article-reader-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
.article-reader-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  color: var(--muted);
  font: 10px/1.5 var(--mono);
  border-top: 1px solid var(--line);
}
.article-reader-foot button {
  padding: 9px 12px;
  color: #101522;
  background: var(--orange);
  border: 0;
  border-radius: 3px;
  font: 700 10px var(--body);
  cursor: pointer;
}
@media (max-width: 760px) {
  .profile-section {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 25px 5vw !important;
  }
  .profile-photo-wrap {
    width: 112px !important;
    height: 145px !important;
    min-height: 0 !important;
    aspect-ratio: auto;
  }
  .profile-copy h2 {
    font-size: clamp(31px, 7.5vw, 43px) !important;
  }
  .profile-intro {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }
  .profile-facts > div {
    padding: 10px !important;
  }
  .profile-facts small {
    font-size: 8px !important;
  }
  .profile-facts strong {
    font-size: 11px !important;
  }
  .profile-quick-actions {
    gap: 7px !important;
  }
  .profile-quick-actions .button {
    min-height: 42px;
    padding: 10px 12px !important;
  }
  .explore-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .explore-heading h2 {
    font-size: clamp(31px, 7.4vw, 43px) !important;
  }
  .cricinfo-gallery {
    padding: 13px;
    margin: 16px 0 24px;
  }
  .cricinfo-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .cricinfo-photo-card > a:first-child {
    aspect-ratio: 4/3;
  }
  .cricinfo-photo-caption {
    padding: 8px;
    font-size: 10px;
  }
  .gallery-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .gallery-heading > span {
    max-width: none;
    text-align: left;
  }
  .tilak-news-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tilak-feature-photo-wrap {
    display: none;
  }
  .tilak-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tilak-news-image {
    aspect-ratio: 16/10;
  }
  .tilak-news-body {
    padding: 10px;
  }
  .tilak-news-body h3 {
    font-size: 11px;
    line-height: 1.45;
  }
  .tilak-news-body p {
    font-size: 10px;
  }
  .article-reader {
    padding: 0;
    align-items: stretch;
  }
  .article-reader-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .article-reader-head {
    padding: 12px;
  }
  .article-reader-head h3 {
    font-size: 15px;
  }
  .article-reader-foot {
    padding: 9px 12px;
  }
}
@media (max-width: 390px) {
  .profile-section {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 22px 4vw !important;
  }
  .profile-photo-wrap {
    width: 96px !important;
    height: 128px !important;
  }
  .profile-copy h2 {
    font-size: 29px !important;
  }
  .profile-facts {
    gap: 5px !important;
  }
  .profile-facts > div {
    padding: 8px !important;
  }
  .cricinfo-photo-grid {
    gap: 6px;
  }
  .tilak-news-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-facts > div,
  .home-mini-stat,
  .home-format-card,
  .statsguru-format-tabs button,
  .statsguru-category-grid button,
  .cricinfo-photo-card,
  .cricinfo-photo-card img,
  .tilak-news-card,
  .player-analysis-content {
    transition: none !important;
    animation: none !important;
  }
}

.cricinfo-photo-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}
.cricinfo-photo-open:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -3px;
}
.article-read-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding: 10px 0 0;
  color: var(--orange);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  font: 700 10px var(--mono);
  text-align: left;
  cursor: pointer;
}
.article-read-button span {
  font-size: 16px;
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 7, 15, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.photo-lightbox[hidden] {
  display: none !important;
}
.photo-lightbox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 920px);
  max-height: 92dvh;
  padding: 14px;
  background: #081321;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.photo-lightbox-panel img {
  display: block;
  max-width: 100%;
  max-height: 72dvh;
  object-fit: contain;
}
.photo-lightbox-panel p {
  margin: 0;
  color: #d8e1ee;
  font-size: 12px;
  text-align: center;
}
.photo-lightbox-panel > a {
  color: var(--orange);
  font: 10px var(--mono);
}
.photo-lightbox-close {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  width: 38px;
  height: 38px;
  color: white;
  background: #07101fdd;
  border: 1px solid #6b7b90;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .photo-lightbox {
    padding: 10px;
  }
  .photo-lightbox-panel {
    padding: 9px;
  }
  .photo-lightbox-panel img {
    max-height: 75dvh;
  }
}

.gallery-live-fallback {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(110deg, rgba(255, 106, 53, 0.1), rgba(13, 26, 44, 0.7));
  border: 1px solid rgba(255, 106, 53, 0.28);
  border-radius: 4px;
}
.gallery-fallback-mark {
  display: grid;
  place-items: center;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  color: var(--orange);
  font: 900 34px var(--display);
  border: 1px solid var(--orange);
  transform: skew(-5deg);
}
.gallery-live-fallback > div:last-child {
  min-width: 0;
}
.gallery-live-fallback strong {
  display: block;
  font: 800 22px/1.15 var(--display);
  color: var(--white);
}
.gallery-live-fallback p {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.gallery-live-fallback button {
  padding: 10px 13px;
  color: #101522;
  background: var(--orange);
  border: 0;
  border-radius: 3px;
  font: 800 10px var(--body);
  cursor: pointer;
}
@media (max-width: 560px) {
  .gallery-live-fallback {
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
  }
  .gallery-fallback-mark {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 25px;
  }
  .gallery-live-fallback strong {
    font-size: 18px;
  }
  .gallery-live-fallback p {
    font-size: 10px;
  }
}

/* Explore: compact ESPNcricinfo-style batting analysis */
.statsguru-section {
  padding-top: 42px !important;
  padding-bottom: 48px !important;
}
.statsguru-sourcebar {
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 9px;
}
.statsguru-format-tabs {
  padding-bottom: 9px;
  gap: 5px;
}
.statsguru-format-tabs button {
  padding: 8px 11px;
  font-size: 10px;
}
.statsguru-category-grid {
  margin-bottom: 10px;
  gap: 6px;
}
.statsguru-category-grid button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 10px;
}
.statsguru-panel {
  padding: 14px;
}
.statsguru-panel-head {
  margin-bottom: 10px;
}
.statsguru-panel-head h3 {
  font-size: clamp(20px, 2.5vw, 27px);
  margin-top: 5px;
}
.statsguru-format-pill {
  padding: 5px 8px;
  font-size: 9px;
}
.statsguru-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 12px;
}
.statsguru-metric {
  padding: 8px 9px;
  border-top-width: 2px !important;
}
.statsguru-metric span {
  font-size: 8px;
  letter-spacing: 0.045em;
}
.statsguru-metric strong {
  font-size: clamp(17px, 2vw, 23px);
  margin-top: 4px;
  line-height: 1.05;
}
.statsguru-panel .table-wrap {
  max-width: 100%;
  overscroll-behavior-x: contain;
}
.statsguru-panel .table-wrap table {
  min-width: 1020px;
}
.statsguru-panel .table-wrap th {
  padding: 9px 10px;
  font-size: 9px;
  white-space: nowrap;
}
.statsguru-panel .table-wrap td {
  padding: 9px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.statsguru-panel .table-wrap tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.018);
}
.statsguru-panel .table-wrap .sg-cell-date {
  color: #d4e3f8;
  font: 10px var(--mono);
  background: rgba(124, 229, 242, 0.065);
}
.statsguru-panel .table-wrap .sg-cell-runs {
  color: #101522;
  background: var(--orange);
  font: 800 13px var(--display);
  text-align: center;
  min-width: 54px;
}
.statsguru-panel .table-wrap .sg-cell-minutes,
.statsguru-panel .table-wrap .sg-cell-balls {
  color: var(--cyan);
  font: 11px var(--mono);
  text-align: center;
  background: rgba(124, 229, 242, 0.045);
}
.statsguru-panel .table-wrap .sg-scorecard-link {
  color: var(--orange);
  font-weight: 800;
}
.statsguru-note {
  font-size: 10px;
  margin-top: 10px;
}
.statsguru-summary .statsguru-metric:nth-child(4) {
  border-top-color: var(--orange) !important;
}
.statsguru-summary .statsguru-metric:nth-child(5) {
  border-top-color: var(--cyan) !important;
}
.statsguru-summary .statsguru-metric:nth-child(6) {
  border-top-color: var(--cyan) !important;
}
@media (max-width: 760px) {
  .statsguru-section {
    padding: 28px 3.5vw !important;
  }
  .statsguru-sourcebar {
    padding: 7px 9px;
    font-size: 8px;
    gap: 6px;
  }
  .statsguru-format-tabs {
    gap: 4px;
    padding-bottom: 7px;
  }
  .statsguru-format-tabs button {
    padding: 8px 9px;
    font-size: 9px;
  }
  .statsguru-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .statsguru-category-grid button {
    font-size: 9px;
    padding: 7px 5px;
    min-height: 34px;
    text-align: center;
  }
  .statsguru-panel {
    padding: 9px;
  }
  .statsguru-panel-head h3 {
    font-size: 22px;
  }
  .statsguru-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .statsguru-metric {
    padding: 7px 6px;
  }
  .statsguru-metric span {
    font-size: 7px;
    letter-spacing: 0;
  }
  .statsguru-metric strong {
    font-size: 19px;
    margin-top: 4px;
  }
  .statsguru-panel .table-wrap table {
    min-width: 990px;
  }
  .statsguru-panel .table-wrap th {
    padding: 8px;
    font-size: 8px;
  }
  .statsguru-panel .table-wrap td {
    padding: 8px;
    font-size: 10px;
  }
}

/* Compact home theme selector */
.home-snapshot-heading {
  gap: 14px;
}
.home-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.theme-switcher-label {
  padding: 0 5px;
  color: var(--muted);
  font: 8px var(--mono);
  letter-spacing: 0.1em;
}
.theme-switcher button {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: 700 9px var(--body);
  cursor: pointer;
}
.theme-switcher button[aria-pressed="true"] {
  color: var(--bg);
  background: var(--orange);
  border-color: var(--orange);
}
.theme-switcher button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.home-all-stats {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .home-snapshot-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .home-heading-actions {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .theme-switcher {
    gap: 2px;
    padding: 3px;
  }
  .theme-switcher-label {
    font-size: 7px;
    padding: 0 3px;
  }
  .theme-switcher button {
    padding: 6px 7px;
    font-size: 9px;
  }
  .home-all-stats {
    padding: 9px 10px;
    font-size: 9px;
    gap: 6px;
  }
}
/* Runs should be an accent, not a solid orange column */
.statsguru-panel .table-wrap th.sg-head-runs {
  color: var(--orange);
  background: rgba(255, 106, 53, 0.12);
  border-bottom: 2px solid var(--orange);
}
.statsguru-panel .table-wrap .sg-cell-runs {
  color: var(--orange);
  background: rgba(255, 106, 53, 0.12);
  font: 800 13px var(--display);
  text-align: center;
  min-width: 54px;
  border-left: 1px solid rgba(255, 106, 53, 0.28);
  border-right: 1px solid rgba(255, 106, 53, 0.28);
}
.statsguru-panel .table-wrap tbody tr:hover .sg-cell-runs {
  background: rgba(255, 106, 53, 0.22);
}
/* Light theme, including site components that previously used fixed dark fills */
:root[data-theme="light"] {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel2: #e8eef5;
  --white: #152235;
  --muted: #627186;
  --line: rgba(18, 35, 55, 0.16);
  --orange: #e85d2a;
  --cyan: #087e91;
  color-scheme: light;
}
:root[data-theme="light"] body {
  background: var(--bg);
  color: var(--white);
}
:root[data-theme="light"] .topbar,
:root[data-theme="light"] nav,
:root[data-theme="light"] .stats-section,
:root[data-theme="light"] .statsguru-section,
:root[data-theme="light"] .innings-section,
:root[data-theme="light"] .about-section,
:root[data-theme="light"] footer {
  background: var(--bg);
  color: var(--white);
}
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 75% 45%, rgba(32, 120, 155, 0.1), transparent 48%),
    linear-gradient(115deg, #f4f7fb, #eaf0f7);
}
:root[data-theme="light"] .home-snapshot-section,
:root[data-theme="light"] .statsguru-panel,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .home-mini-stat,
:root[data-theme="light"] .home-format-card,
:root[data-theme="light"] .home-snapshot-block,
:root[data-theme="light"] .statsguru-sourcebar,
:root[data-theme="light"] .statsguru-format-tabs button,
:root[data-theme="light"] .statsguru-category-grid button {
  background: #fff;
  color: var(--white);
}
:root[data-theme="light"] .profile-intro,
:root[data-theme="light"] .section-heading > p,
:root[data-theme="light"] .home-snapshot-block p,
:root[data-theme="light"] .home-snapshot-foot,
:root[data-theme="light"] .stat-note,
:root[data-theme="light"] td {
  color: #425269;
}
:root[data-theme="light"] .statsguru-panel .table-wrap th,
:root[data-theme="light"] th {
  background: #e8eef5;
  color: #087e91;
}
:root[data-theme="light"] .statsguru-panel .table-wrap td,
:root[data-theme="light"] td {
  border-top-color: rgba(18, 35, 55, 0.13);
  color: #24354a;
}
:root[data-theme="light"] .statsguru-panel .table-wrap .sg-cell-date {
  background: #e7f5f7;
  color: #203c51;
}
:root[data-theme="light"] .statsguru-panel .table-wrap .sg-cell-minutes,
:root[data-theme="light"] .statsguru-panel .table-wrap .sg-cell-balls {
  background: #edf8fa;
  color: #087e91;
}
:root[data-theme="light"] .statsguru-panel .table-wrap th.sg-head-runs,
:root[data-theme="light"] .statsguru-panel .table-wrap .sg-cell-runs {
  background: #fff0e8;
  color: #c94c20;
}
:root[data-theme="light"] .statsguru-panel .table-wrap tbody tr:nth-child(even) {
  background: #f7f9fc;
}
:root[data-theme="light"] .statsguru-panel .table-wrap tbody tr:hover {
  background: #eaf3f8;
}
:root[data-theme="light"] .statsguru-panel .table-wrap tbody tr:hover .sg-cell-runs {
  background: #ffe0d0;
}
:root[data-theme="light"] .home-snapshot-section .button.outline,
:root[data-theme="light"] .button.outline {
  color: var(--white);
  border-color: rgba(18, 35, 55, 0.3);
}
:root[data-theme="light"] .profile-section {
  background: #f4f7fb;
}
:root[data-theme="light"] .statsguru-format-tabs button.active,
:root[data-theme="light"] .statsguru-category-grid button.active {
  background: var(--orange);
  color: #fff;
}
:root[data-theme="light"] .gallery-live-fallback,
:root[data-theme="light"] .cricinfo-gallery,
:root[data-theme="light"] .tilak-news-card {
  background: #fff;
}
:root[data-theme="light"] .article-reader-panel,
:root[data-theme="light"] .photo-lightbox-panel {
  background: #fff;
  color: #152235;
}
:root[data-theme="light"] .article-reader-head {
  background: #edf2f8;
}
:root[data-theme="light"] .article-reader-head h3,
:root[data-theme="light"] .photo-lightbox-panel p {
  color: #152235;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg: #f4f7fb;
    --panel: #fff;
    --panel2: #e8eef5;
    --white: #152235;
    --muted: #627186;
    --line: rgba(18, 35, 55, 0.16);
    --orange: #e85d2a;
    --cyan: #087e91;
    color-scheme: light;
  }
  :root[data-theme="system"] body {
    background: var(--bg);
    color: var(--white);
  }
  :root[data-theme="system"] .topbar,
  :root[data-theme="system"] nav,
  :root[data-theme="system"] .stats-section,
  :root[data-theme="system"] .statsguru-section,
  :root[data-theme="system"] .innings-section,
  :root[data-theme="system"] footer {
    background: var(--bg);
    color: var(--white);
  }
  :root[data-theme="system"] .hero {
    background: linear-gradient(115deg, #f4f7fb, #eaf0f7);
  }
  :root[data-theme="system"] .stat-card,
  :root[data-theme="system"] .home-mini-stat,
  :root[data-theme="system"] .home-format-card,
  :root[data-theme="system"] .statsguru-panel,
  :root[data-theme="system"] .statsguru-sourcebar,
  :root[data-theme="system"] .statsguru-format-tabs button,
  :root[data-theme="system"] .statsguru-category-grid button {
    background: #fff;
    color: var(--white);
  }
  :root[data-theme="system"] th {
    background: #e8eef5;
    color: #087e91;
  }
  :root[data-theme="system"] .statsguru-panel .table-wrap td {
    color: #24354a;
  }
  :root[data-theme="system"] .statsguru-panel .table-wrap .sg-cell-date {
    background: #e7f5f7;
    color: #203c51;
  }
  :root[data-theme="system"] .statsguru-panel .table-wrap .sg-cell-runs,
  :root[data-theme="system"] .statsguru-panel .table-wrap th.sg-head-runs {
    background: #fff0e8;
    color: #c94c20;
  }
}

/* Centralised appearance settings and readable theme contrast */
.settings-section {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
.settings-card {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.settings-card-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.settings-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--orange);
  font-size: 23px;
  background: var(--panel2);
}
.settings-card h3 {
  margin: 0;
  color: var(--white);
  font: 800 23px/1.2 var(--display);
}
.settings-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.settings-card-copy p {
  margin: 7px 0 0;
  max-width: 560px;
}
.settings-theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.settings-theme-options button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 15px;
  color: var(--white);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}
.settings-theme-options button > span {
  font-size: 19px;
  color: var(--orange);
}
.settings-theme-options button strong {
  font: 800 14px var(--body);
  color: var(--white);
}
.settings-theme-options button small {
  font-size: 10px;
  color: var(--muted);
}
.settings-theme-options button[aria-pressed="true"] {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
  background: color-mix(in srgb, var(--orange) 10%, var(--panel2));
}
.settings-theme-options button[aria-pressed="true"] strong {
  color: var(--orange);
}
.settings-theme-options button:hover {
  transform: translateY(-1px);
  border-color: var(--orange);
}
.settings-theme-options button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.settings-card .settings-status {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 10px/1.6 var(--mono);
}
/* Resolve system theme in JS so every component receives the same contrast rules. */
:root[data-theme-resolved="light"] {
  --bg: #f4f7fb;
  --panel: #fff;
  --panel2: #eaf0f7;
  --white: #152235;
  --muted: #5d6d82;
  --line: rgba(18, 35, 55, 0.16);
  --orange: #c94c20;
  --cyan: #087e91;
  color-scheme: light;
}
:root[data-theme-resolved="light"] body {
  background: var(--bg);
  color: var(--white);
}
:root[data-theme-resolved="light"] .topbar {
  background: rgba(244, 247, 251, 0.96);
  color: var(--white);
}
:root[data-theme-resolved="light"] .topbar nav {
  background: var(--panel);
  color: var(--white);
}
:root[data-theme-resolved="light"] .profile-section,
:root[data-theme-resolved="light"] .home-snapshot-section,
:root[data-theme-resolved="light"] .stats-section,
:root[data-theme-resolved="light"] .statsguru-section,
:root[data-theme-resolved="light"] .records-section,
:root[data-theme-resolved="light"] .fan-zone-section,
:root[data-theme-resolved="light"] .innings-section,
:root[data-theme-resolved="light"] .tilak-news-section,
:root[data-theme-resolved="light"] .settings-section,
:root[data-theme-resolved="light"] .about-section {
  background: var(--bg);
  color: var(--white);
}
:root[data-theme-resolved="light"] .hero {
  background:
    radial-gradient(ellipse at 75% 45%, rgba(32, 120, 155, 0.1), transparent 48%),
    linear-gradient(115deg, #f4f7fb, #eaf0f7);
}
:root[data-theme-resolved="light"] .stat-card,
:root[data-theme-resolved="light"] .home-mini-stat,
:root[data-theme-resolved="light"] .home-format-card,
:root[data-theme-resolved="light"] .home-snapshot-block,
:root[data-theme-resolved="light"] .statsguru-panel,
:root[data-theme-resolved="light"] .statsguru-sourcebar,
:root[data-theme-resolved="light"] .settings-card,
:root[data-theme-resolved="light"] .fan-card,
:root[data-theme-resolved="light"] .milestone-card,
:root[data-theme-resolved="light"] .analytics-metric,
:root[data-theme-resolved="light"] .search-box,
:root[data-theme-resolved="light"] .search-result,
:root[data-theme-resolved="light"] .poster-controls,
:root[data-theme-resolved="light"] .cricinfo-gallery,
:root[data-theme-resolved="light"] .cricinfo-photo-card,
:root[data-theme-resolved="light"] .tilak-news-card,
:root[data-theme-resolved="light"] .gallery-live-fallback {
  background: #fff;
  color: var(--white);
  border-color: var(--line);
}
:root[data-theme-resolved="light"] .statsguru-format-tabs button,
:root[data-theme-resolved="light"] .statsguru-category-grid button,
:root[data-theme-resolved="light"] .player-analysis-filter,
:root[data-theme-resolved="light"] .player-analysis-toggle,
:root[data-theme-resolved="light"] .player-analysis-content,
:root[data-theme-resolved="light"] .poll-option,
:root[data-theme-resolved="light"] .fan-link,
:root[data-theme-resolved="light"] .ticker,
:root[data-theme-resolved="light"] .data-line {
  background: var(--panel2);
  color: var(--white);
  border-color: var(--line);
}
:root[data-theme-resolved="light"] h1,
:root[data-theme-resolved="light"] h2,
:root[data-theme-resolved="light"] h3,
:root[data-theme-resolved="light"] h4,
:root[data-theme-resolved="light"] p,
:root[data-theme-resolved="light"] label,
:root[data-theme-resolved="light"] summary,
:root[data-theme-resolved="light"] .profile-copy,
:root[data-theme-resolved="light"] .home-snapshot-blockhead,
:root[data-theme-resolved="light"] .home-format-heading,
:root[data-theme-resolved="light"] .analytics-head,
:root[data-theme-resolved="light"] .official-records-head {
  color: var(--white);
}
:root[data-theme-resolved="light"] .eyebrow,
:root[data-theme-resolved="light"] .stat-label,
:root[data-theme-resolved="light"] .stat-note,
:root[data-theme-resolved="light"] .activity-empty,
:root[data-theme-resolved="light"] .home-snapshot-foot,
:root[data-theme-resolved="light"] .home-format-heading > span,
:root[data-theme-resolved="light"] .profile-facts small,
:root[data-theme-resolved="light"] .profile-teams,
:root[data-theme-resolved="light"] .feature-note,
:root[data-theme-resolved="light"] .gallery-attribution,
:root[data-theme-resolved="light"] .gallery-heading > span,
:root[data-theme-resolved="light"] .tilak-news-meta,
:root[data-theme-resolved="light"] .player-analysis-help,
:root[data-theme-resolved="light"] .statsguru-note {
  color: var(--muted);
}
:root[data-theme-resolved="light"] input,
:root[data-theme-resolved="light"] select,
:root[data-theme-resolved="light"] textarea {
  background: #fff !important;
  color: #152235 !important;
  border-color: rgba(18, 35, 55, 0.24) !important;
}
:root[data-theme-resolved="light"] input::placeholder,
:root[data-theme-resolved="light"] textarea::placeholder {
  color: #64748b !important;
}
:root[data-theme-resolved="light"] th {
  background: #e8eef5;
  color: #34465c;
  border-color: var(--line);
}
:root[data-theme-resolved="light"] td {
  color: #26374b;
  border-color: var(--line);
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap .sg-cell-date {
  background: #e7f5f7;
  color: #203c51;
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap .sg-cell-minutes,
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap .sg-cell-balls {
  background: #edf8fa;
  color: #087e91;
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap th.sg-head-runs,
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap .sg-cell-runs {
  background: #fff0e8;
  color: #b84219;
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap tbody tr:nth-child(even) {
  background: #f7f9fc;
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap tbody tr:hover {
  background: #eaf3f8;
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap tbody tr:hover .sg-cell-runs {
  background: #ffe0d0;
}
:root[data-theme-resolved="light"] .button,
:root[data-theme-resolved="light"] button {
  color: var(--white);
}
:root[data-theme-resolved="light"] .button.primary,
:root[data-theme-resolved="light"] .player-analysis-actions .button.primary,
:root[data-theme-resolved="light"] .settings-theme-options button[aria-pressed="true"] {
  color: #fff;
}
:root[data-theme-resolved="light"] .theme-switcher button[aria-pressed="true"] {
  color: #fff;
  background: var(--orange);
}
:root[data-theme-resolved="light"] .profile-intro,
:root[data-theme-resolved="light"] .section-heading > p,
:root[data-theme-resolved="light"] .home-snapshot-block p,
:root[data-theme-resolved="light"] .about-copy p {
  color: #425269;
}
:root[data-theme-resolved="light"] .article-reader-panel,
:root[data-theme-resolved="light"] .photo-lightbox-panel {
  background: #fff;
  color: #152235;
}
:root[data-theme-resolved="light"] .article-reader-head {
  background: #edf2f8;
  color: #152235;
}
:root[data-theme-resolved="light"] .article-reader-head h3,
:root[data-theme-resolved="light"] .photo-lightbox-panel p {
  color: #152235;
}
:root[data-theme-resolved="light"] .article-reader-close,
:root[data-theme-resolved="light"] .photo-lightbox-close {
  background: #e7edf5;
  color: #152235;
  border-color: #94a3b8;
}
:root[data-theme-resolved="light"] .article-reader-foot {
  background: #f4f7fb;
  color: #425269;
}
:root[data-theme-resolved="light"] footer {
  background: var(--bg);
  color: var(--white);
}
:root[data-theme-resolved="light"] .settings-theme-options button {
  background: #f2f6fb;
  color: #152235;
}
:root[data-theme-resolved="light"] .settings-theme-options button strong {
  color: #152235;
}
:root[data-theme-resolved="light"] .settings-theme-options button small {
  color: #5d6d82;
}
:root[data-theme-resolved="light"] .settings-theme-options button[aria-pressed="true"] {
  background: #fff0e8;
  border-color: #c94c20;
}
:root[data-theme-resolved="light"] .settings-theme-options button[aria-pressed="true"] strong {
  color: #b84219;
}
@media (max-width: 760px) {
  .settings-section {
    padding: 28px 4vw !important;
  }
  .settings-theme-options {
    gap: 7px;
  }
  .settings-theme-options button {
    padding: 12px 10px;
  }
  .settings-theme-options button strong {
    font-size: 12px;
  }
  .settings-theme-options button small {
    font-size: 9px;
  }
  .settings-card h3 {
    font-size: 21px;
  }
}
@media (max-width: 390px) {
  .settings-theme-options {
    gap: 5px;
  }
  .settings-theme-options button {
    padding: 10px 7px;
  }
  .settings-theme-options button > span {
    font-size: 17px;
  }
  .settings-theme-options button small {
    font-size: 8px;
  }
}

/* Bowling career: compact home preview and full Stats subview */
.home-bowling-card {
  margin: 12px 0 24px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 5px;
}
.home-bowling-heading,
.bowling-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-bowling-heading h3,
.bowling-subheading h3 {
  margin: 5px 0 0;
  color: var(--white);
  font: 800 clamp(22px, 3vw, 29px) / 1 var(--display);
}
.home-bowling-heading h3 em,
.bowling-subheading h3 em {
  color: var(--cyan);
  font-style: normal;
}
.home-bowling-heading .button {
  padding: 9px 11px;
  font-size: 9px;
  white-space: nowrap;
}
.home-bowling-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.home-bowling-metric {
  min-width: 0;
  padding: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: 3px;
}
.home-bowling-metric span {
  display: block;
  color: var(--muted);
  font: 8px var(--mono);
  letter-spacing: 0.05em;
}
.home-bowling-metric strong {
  display: block;
  margin-top: 5px;
  color: var(--white);
  font: 800 clamp(18px, 2.5vw, 25px) / 1 var(--display);
  overflow-wrap: anywhere;
}
.home-bowling-updated {
  margin: 11px 0 0;
  color: var(--muted);
  font: 9px/1.5 var(--mono);
}
.bowling-stats-view > .section-heading {
  margin-bottom: 16px;
}
.bowling-sourcebar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font: 9px/1.6 var(--mono);
}
.bowling-sourcebar b {
  color: var(--cyan);
}
.bowling-format-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.bowling-format-tabs button {
  padding: 9px 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 700 10px var(--body);
  cursor: pointer;
}
.bowling-format-tabs button.active {
  color: #07101f;
  background: var(--cyan);
  border-color: var(--cyan);
}
.bowling-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 22px;
}
.bowling-metric {
  min-width: 0;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: 4px;
}
.bowling-metric span {
  display: block;
  color: var(--muted);
  font: 8px var(--mono);
  letter-spacing: 0.04em;
}
.bowling-metric strong {
  display: block;
  margin-top: 7px;
  color: var(--white);
  font: 800 clamp(18px, 2vw, 25px) / 1.05 var(--display);
  overflow-wrap: anywhere;
}
.bowling-breakdown-wrap,
.bowling-innings-wrap {
  margin: 18px 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.bowling-subheading {
  margin-bottom: 12px;
}
.bowling-subheading h3 {
  font-size: 24px;
}
.bowling-subheading > span {
  color: var(--muted);
  font: 9px var(--mono);
}
.bowling-stats-view .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.bowling-stats-view table {
  min-width: 950px;
}
.bowling-stats-view th,
.bowling-stats-view td {
  white-space: nowrap;
}
.bowling-stats-view .bowling-wickets-cell {
  color: var(--cyan);
  font-weight: 800;
  text-align: center;
  background: rgba(124, 229, 242, 0.08);
}
.bowling-stats-view .bowling-best-cell {
  color: var(--cyan);
  font-weight: 800;
}
.bowling-stats-view .bowling-card-link {
  color: var(--orange);
  font-weight: 800;
}
.bowling-data-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
:root[data-theme-resolved="light"] .home-bowling-card,
:root[data-theme-resolved="light"] .bowling-breakdown-wrap,
:root[data-theme-resolved="light"] .bowling-innings-wrap,
:root[data-theme-resolved="light"] .bowling-metric {
  background: #fff;
  color: #152235;
  border-color: rgba(18, 35, 55, 0.16);
}
:root[data-theme-resolved="light"] .home-bowling-metric {
  background: #f2f7fa;
  color: #152235;
  border-color: rgba(18, 35, 55, 0.16);
}
:root[data-theme-resolved="light"] .home-bowling-heading h3,
:root[data-theme-resolved="light"] .bowling-subheading h3,
:root[data-theme-resolved="light"] .bowling-metric strong {
  color: #152235;
}
:root[data-theme-resolved="light"] .home-bowling-metric span,
:root[data-theme-resolved="light"] .bowling-metric span {
  color: #5d6d82;
}
:root[data-theme-resolved="light"] .bowling-format-tabs button {
  background: #fff;
  color: #34465c;
  border-color: rgba(18, 35, 55, 0.2);
}
:root[data-theme-resolved="light"] .bowling-format-tabs button.active {
  background: #087e91;
  color: #fff;
  border-color: #087e91;
}
:root[data-theme-resolved="light"] .bowling-stats-view .bowling-wickets-cell {
  background: #e7f5f7;
  color: #087e91;
}
:root[data-theme-resolved="light"] .bowling-stats-view .bowling-best-cell {
  color: #087e91;
}
@media (max-width: 760px) {
  .home-bowling-card {
    padding: 12px;
    margin: 10px 0 18px;
  }
  .home-bowling-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .home-bowling-metric {
    padding: 8px 6px;
  }
  .home-bowling-metric span {
    font-size: 7px;
  }
  .home-bowling-metric strong {
    font-size: 18px;
  }
  .bowling-stats-view {
    padding: 25px 3.5vw !important;
  }
  .bowling-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .bowling-metric {
    padding: 9px 7px;
  }
  .bowling-metric strong {
    font-size: 20px;
  }
  .bowling-breakdown-wrap,
  .bowling-innings-wrap {
    padding: 9px;
    margin: 12px 0;
  }
  .bowling-subheading h3 {
    font-size: 21px;
  }
  .bowling-sourcebar {
    font-size: 8px;
    padding: 8px;
  }
  .bowling-format-tabs button {
    padding: 8px 9px;
    font-size: 9px;
  }
}
@media (max-width: 420px) {
  .home-bowling-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-bowling-heading .button {
    align-self: flex-start;
  }
  .home-bowling-stats {
    gap: 4px;
  }
  .home-bowling-metric {
    padding: 7px 5px;
  }
  .home-bowling-metric strong {
    font-size: 16px;
  }
  .home-bowling-metric span {
    font-size: 6px;
  }
  .bowling-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile custom-select readability fix (2026-10). */
.cs-dialog,
.cs-dialog * {
  box-sizing: border-box;
}
.cs-dialog-head {
  align-items: flex-start;
}
.cs-dialog-head > div {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
}
.cs-dialog-title {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.28;
  letter-spacing: 0.01em;
}
.cs-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.5;
  letter-spacing: normal;
}
.cs-option-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.5;
}
.cs-option-mark {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cs-dialog {
    width: 100%;
  }
  .cs-dialog-head {
    gap: 12px;
  }
  .cs-dialog-title {
    font-size: clamp(17px, 5vw, 20px);
  }
  .cs-option {
    min-height: 54px;
    padding: 13px 12px;
  }
  .cs-option-label {
    font-size: 13px;
  }
}

/* Homepage bowling snapshot: match the batting format cards and stay readable on phones. */
.home-bowling-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.home-bowling-format-card {
  min-width: 0;
  padding: 13px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: 4px;
}
.home-bowling-format-name {
  display: block;
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 0.07em;
  overflow-wrap: anywhere;
}
.home-bowling-format-wickets {
  display: block;
  margin: 9px 0;
  color: var(--white);
  font: 800 clamp(26px, 3vw, 36px) / 1 var(--display);
}
.home-bowling-format-wickets small {
  font: 9px var(--mono);
  color: var(--cyan);
  letter-spacing: 0.04em;
}
.home-bowling-format-detail {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 9px/1.6 var(--mono);
  overflow-wrap: anywhere;
}
:root[data-theme-resolved="light"] .home-bowling-format-card {
  background: #f2f7fa;
  color: #152235;
  border-color: rgba(18, 35, 55, 0.16);
}
:root[data-theme-resolved="light"] .home-bowling-format-wickets {
  color: #152235;
}
@media (max-width: 760px) {
  .home-bowling-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .home-bowling-format-card {
    padding: 10px;
  }
  .home-bowling-format-wickets {
    font-size: 28px;
  }
  .home-bowling-format-detail {
    font-size: 8px;
  }
}
@media (max-width: 360px) {
  .home-bowling-stats {
    grid-template-columns: 1fr 1fr;
  }
  .home-bowling-format-name {
    font-size: 8px;
  }
}

/* Explore: complete Statsguru-style category selector */
.statsguru-category-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 5px 2px 14px;
  margin: 18px 0 20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.statsguru-category-grid button {
  flex: 0 0 auto;
  max-width: 250px;
  white-space: nowrap;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  padding: 12px 15px;
  font: 600 11px var(--body);
  cursor: pointer;
  border-radius: 5px;
}
.statsguru-category-grid button.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #101522;
}
.statsguru-category-grid button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.sg-data-unavailable {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.sg-data-unavailable a {
  display: inline-block;
  color: var(--cyan);
  margin-left: 5px;
}
@media (max-width: 600px) {
  .statsguru-category-grid {
    margin-left: -2vw;
    margin-right: -2vw;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .statsguru-category-grid button {
    padding: 11px 12px;
    font-size: 10px;
  }
  .statsguru-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stats summary: keep the cards uniform; retain the original orange Runs highlight. */
.statsguru-summary .statsguru-metric {
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--line);
  background: var(--panel);
}
.statsguru-summary .statsguru-metric span {
  color: var(--muted);
}
.statsguru-summary .statsguru-metric strong {
  color: var(--white);
}
.statsguru-summary .statsguru-metric:nth-child(4) {
  border-top-color: #ff8a5b;
  background: color-mix(in srgb, #ff8a5b 7%, var(--panel));
}
.statsguru-summary .statsguru-metric:nth-child(4) strong {
  color: #ff9a70;
}

/* Keep the Explore table clean and neutral, with Runs highlighted in orange. */
.statsguru-panel .table-wrap th,
.statsguru-panel .table-wrap td {
  border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent);
}
.statsguru-panel .table-wrap th:not(.sg-head-runs) {
  box-shadow: none;
}
.statsguru-panel .table-wrap td:not(.sg-cell-runs) {
  box-shadow: none;
}
.statsguru-panel .table-wrap th.sg-head-runs,
.statsguru-panel .table-wrap .sg-cell-runs {
  --column-accent: #ff8a5b;
}
.statsguru-panel .table-wrap th.sg-head-runs {
  box-shadow: inset 0 -2px 0 #ff8a5b;
}
.statsguru-panel .table-wrap .sg-cell-runs {
  background: color-mix(in srgb, #ff8a5b 10%, var(--panel));
  color: #ff9a70;
  font-weight: 700;
}
.statsguru-panel .table-wrap tbody tr:hover td:not(.sg-cell-runs) {
  background: var(--panel);
}
:root[data-theme-resolved="light"] .statsguru-summary .statsguru-metric {
  background: #fff;
}
:root[data-theme-resolved="light"] .statsguru-summary .statsguru-metric strong {
  color: #152235;
}
:root[data-theme-resolved="light"] .statsguru-summary .statsguru-metric:nth-child(4) {
  background: #fff0e8;
}
:root[data-theme-resolved="light"] .statsguru-summary .statsguru-metric:nth-child(4) strong {
  color: #b84219;
}
:root[data-theme-resolved="light"] .statsguru-panel .table-wrap .sg-cell-runs {
  background: #fff0e8;
  color: #b84219;
}
@media (max-width: 600px) {
  .statsguru-summary .statsguru-metric {
    padding: 10px 8px;
  }
  .statsguru-summary .statsguru-metric span {
    font-size: 8px;
  }
  .statsguru-summary .statsguru-metric strong {
    font-size: clamp(18px, 5vw, 24px);
  }
}

/* Consistent restrained colour accents for tables and cards across every stats section. */
:root {
  --stats-accent: #7ce5f2;
  --stats-accent-soft: rgba(124, 229, 242, 0.075);
}
.stats-section .stat-card,
.stats-section .home-format-card,
.stats-section .statsguru-metric,
.stats-section .bowling-metric,
.stats-section .bowling-breakdown-wrap,
.stats-section .bowling-innings-wrap {
  border-color: var(--line);
}
.stats-section .stat-card:not(.stat-feature),
.stats-section .statsguru-metric,
.stats-section .bowling-metric {
  border-top: 2px solid var(--stats-accent);
}
.stats-section .stat-card:not(.stat-feature) .stat-label,
.stats-section .statsguru-metric span,
.stats-section .bowling-metric span {
  color: var(--muted);
}
.stats-section .format-card .format-detail {
  color: var(--muted);
}
.stats-section .career-formats .format-card {
  background: var(--panel);
  border-top: 2px solid var(--stats-accent);
}
.stats-section .career-formats .format-card strong {
  color: var(--white);
}
.stats-section .statsguru-panel .table-wrap th,
.stats-section .bowling-stats-view .table-wrap th {
  background: var(--panel2);
  color: #b9cce6;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -2px 0 rgba(124, 229, 242, 0.55);
}
.stats-section .statsguru-panel .table-wrap td,
.stats-section .bowling-stats-view .table-wrap td {
  border-bottom: 1px solid var(--line);
}
.stats-section .statsguru-panel .table-wrap tbody tr:nth-child(even),
.stats-section .bowling-stats-view .table-wrap tbody tr:nth-child(even) {
  background: rgba(124, 229, 242, 0.025);
}
.stats-section .statsguru-panel .table-wrap tbody tr:hover td:not(.sg-cell-runs),
.stats-section .bowling-stats-view .table-wrap tbody tr:hover td {
  background: rgba(124, 229, 242, 0.065);
}
.stats-section .bowling-stats-view .bowling-wickets-cell,
.stats-section .bowling-stats-view .bowling-best-cell {
  color: var(--stats-accent);
  background: var(--stats-accent-soft);
}
.stats-section .statsguru-panel .table-wrap th.sg-head-runs {
  background: var(--panel2);
  color: #ff9a70;
  box-shadow: inset 0 -2px 0 #ff8a5b;
}
.stats-section .statsguru-panel .table-wrap .sg-cell-runs {
  background: rgba(255, 138, 91, 0.1);
  color: #ff9a70;
  font-weight: 800;
}
:root[data-theme-resolved="light"] .stats-section .career-formats .format-card,
:root[data-theme-resolved="light"] .stats-section .statsguru-metric,
:root[data-theme-resolved="light"] .stats-section .bowling-metric,
:root[data-theme-resolved="light"] .stats-section .bowling-breakdown-wrap,
:root[data-theme-resolved="light"] .stats-section .bowling-innings-wrap {
  background: #fff;
}
:root[data-theme-resolved="light"] .stats-section .career-formats .format-card strong,
:root[data-theme-resolved="light"] .stats-section .statsguru-metric strong,
:root[data-theme-resolved="light"] .stats-section .bowling-metric strong {
  color: #152235;
}
:root[data-theme-resolved="light"] .stats-section .statsguru-panel .table-wrap th,
:root[data-theme-resolved="light"] .stats-section .bowling-stats-view .table-wrap th {
  background: #edf3f9;
  color: #34465c;
  box-shadow: inset 0 -2px 0 rgba(8, 126, 145, 0.4);
}
:root[data-theme-resolved="light"]
  .stats-section
  .statsguru-panel
  .table-wrap
  tbody
  tr:nth-child(even),
:root[data-theme-resolved="light"]
  .stats-section
  .bowling-stats-view
  .table-wrap
  tbody
  tr:nth-child(even) {
  background: #f7fafc;
}
:root[data-theme-resolved="light"]
  .stats-section
  .statsguru-panel
  .table-wrap
  tbody
  tr:hover
  td:not(.sg-cell-runs),
:root[data-theme-resolved="light"]
  .stats-section
  .bowling-stats-view
  .table-wrap
  tbody
  tr:hover
  td {
  background: #eaf5f8;
}
@media (max-width: 600px) {
  .stats-section .statsguru-panel .table-wrap th,
  .stats-section .bowling-stats-view .table-wrap th {
    padding: 8px 9px;
    font-size: 8px;
  }
}

/* Runs must stay highlighted after the global Stats table theme rules. */
.stats-section .statsguru-panel .table-wrap th.sg-head-runs {
  background: color-mix(in srgb, #ff8a5b 18%, var(--panel2)) !important;
  color: #ffad8b !important;
  box-shadow: inset 0 -3px 0 #ff8a5b !important;
  border-bottom-color: #ff8a5b !important;
}
.stats-section .statsguru-panel .table-wrap td.sg-cell-runs {
  background: rgba(255, 138, 91, 0.12) !important;
  color: #ffad8b !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
.stats-section .statsguru-panel .table-wrap tbody tr:hover td.sg-cell-runs {
  background: rgba(255, 138, 91, 0.22) !important;
}
:root[data-theme-resolved="light"] .stats-section .statsguru-panel .table-wrap th.sg-head-runs {
  background: #ffeadf !important;
  color: #9c3516 !important;
  box-shadow: inset 0 -3px 0 #d95d30 !important;
  border-bottom-color: #d95d30 !important;
}
:root[data-theme-resolved="light"] .stats-section .statsguru-panel .table-wrap td.sg-cell-runs {
  background: #fff0e8 !important;
  color: #a43d1b !important;
}

/* Main Batting career summary: Runs card matches the neutral stat cards. */
.stats-section #stats-overview .stats-grid:not(.career-formats) .stat-feature,
.stats-section #stats-overview .stats-grid:not(.career-formats) .stat-feature:hover {
  background: var(--panel) !important;
  color: var(--white);
  border-color: var(--line) !important;
  border-top: 2px solid var(--stats-accent, #7ce5f2) !important;
}
.stats-section #stats-overview .stats-grid:not(.career-formats) .stat-feature .stat-label,
.stats-section #stats-overview .stats-grid:not(.career-formats) .stat-feature .stat-note {
  color: var(--muted) !important;
}
.stats-section #stats-overview .stats-grid:not(.career-formats) .stat-feature strong {
  color: var(--white) !important;
}
:root[data-theme-resolved="light"]
  .stats-section
  #stats-overview
  .stats-grid:not(.career-formats)
  .stat-feature,
:root[data-theme-resolved="light"]
  .stats-section
  #stats-overview
  .stats-grid:not(.career-formats)
  .stat-feature:hover {
  background: #fff !important;
  color: #152235;
  border-color: rgba(18, 35, 55, 0.16) !important;
  border-top-color: #7ce5f2 !important;
}
:root[data-theme-resolved="light"]
  .stats-section
  #stats-overview
  .stats-grid:not(.career-formats)
  .stat-feature
  strong {
  color: #152235 !important;
}
:root[data-theme-resolved="light"]
  .stats-section
  #stats-overview
  .stats-grid:not(.career-formats)
  .stat-feature
  .stat-label,
:root[data-theme-resolved="light"]
  .stats-section
  #stats-overview
  .stats-grid:not(.career-formats)
  .stat-feature
  .stat-note {
  color: #5d6d82 !important;
}

/* Explore category menu: wrap onto new rows instead of requiring horizontal scrolling. */
.statsguru-category-grid {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
  gap: 8px;
  padding: 5px 2px 10px;
}
.statsguru-category-grid button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .statsguru-category-grid {
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    gap: 6px;
  }
  .statsguru-category-grid button {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    padding: 9px 10px;
    font-size: 10px;
  }
}

/* Make every Statsguru table header cell clearly highlighted, including on mobile. */
.stats-section .statsguru-panel .table-wrap th {
  background: color-mix(in srgb, var(--stats-accent) 16%, var(--panel2));
  color: #d8f7fb;
  box-shadow: inset 0 -3px 0 var(--stats-accent);
  border-bottom-color: var(--stats-accent);
  font-weight: 800;
}
:root[data-theme-resolved="light"] .stats-section .statsguru-panel .table-wrap th {
  background: #dff5f8;
  color: #16394b;
  box-shadow: inset 0 -3px 0 #168da0;
  border-bottom-color: #168da0;
}

/* Restore the Runs-column accent across Explore tables (the neutral override was hiding it). */
.stats-section .statsguru-panel .table-wrap th.sg-head-runs,
.stats-section .statsguru-panel .table-wrap th:has(+ td.sg-cell-runs) {
  background: color-mix(in srgb, #ff8a5b 18%, var(--panel2)) !important;
  color: #ffad8b !important;
  box-shadow: inset 0 -3px 0 #ff8a5b !important;
}
.stats-section .statsguru-panel .table-wrap td.sg-cell-runs {
  background: rgba(255, 138, 91, 0.12) !important;
  color: #ffad8b !important;
  font-weight: 800 !important;
}
.stats-section .statsguru-panel .table-wrap tbody tr:hover td.sg-cell-runs {
  background: rgba(255, 138, 91, 0.2) !important;
}
:root[data-theme-resolved="light"] .stats-section .statsguru-panel .table-wrap th.sg-head-runs {
  background: #ffeadf !important;
  color: #9c3516 !important;
  box-shadow: inset 0 -3px 0 #d95d30 !important;
}
:root[data-theme-resolved="light"] .stats-section .statsguru-panel .table-wrap td.sg-cell-runs {
  background: #fff0e8 !important;
  color: #a43d1b !important;
}

/* Statsguru: show the complete analysis chooser when the filter is expanded. */
.sg-analysis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  min-width: 0;
}
.sg-analysis-options legend {
  padding: 0 6px;
  color: var(--cyan);
  font: 800 10px var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.sg-analysis-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
}
.sg-analysis-options input {
  accent-color: var(--orange);
}
.sg-view-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}
.match-history-summary {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.player-match-milestones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}
.player-match-milestone {
  min-width: 0;
  padding: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--stats-accent, #7ce5f2);
}
.player-match-milestone > b {
  display: block;
  margin-bottom: 9px;
  color: var(--cyan);
  font: 800 11px var(--mono);
}
.player-match-milestone > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.player-match-milestone small {
  color: var(--orange);
  font: 800 9px var(--mono);
}
.player-match-milestone span {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.player-match-milestone em {
  grid-column: 2;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}
.match-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 10px;
}
.match-history-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}
.match-history-head select {
  max-width: 150px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
}
.recent-innings-table-wrap {
  margin-top: 18px;
}
:root[data-theme-resolved="light"] .sg-analysis-options,
:root[data-theme-resolved="light"] .match-history-summary,
:root[data-theme-resolved="light"] .player-match-milestone {
  background: #fff;
}
:root[data-theme-resolved="light"] .player-match-milestone > b {
  color: #087e91;
}
@media (max-width: 650px) {
  .sg-analysis-options {
    gap: 9px 12px;
    padding: 10px;
  }
  .sg-view-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sg-analysis-options label {
    font-size: 10px;
  }
  .player-match-milestones {
    grid-template-columns: 1fr;
  }
  .player-match-milestone {
    padding: 10px;
  }
  .match-history-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .match-history-head label {
    width: 100%;
    justify-content: space-between;
  }
  .match-history-head select {
    flex: 1;
  }
}

/* Compact phone profile: keep the player portrait prominent without letting copy dominate. */
@media (max-width: 650px) {
  .profile-section {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 18px 4vw 22px !important;
  }
  .profile-photo-wrap {
    width: 104px !important;
    height: 146px !important;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(124, 229, 242, 0.38);
    background:
      radial-gradient(ellipse at 50% 25%, rgba(36, 111, 153, 0.35), transparent 70%), var(--panel);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  .profile-photo-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
  }
  .profile-copy {
    min-width: 0;
  }
  .profile-copy > .eyebrow {
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: 0.08em;
    margin: 1px 0 6px;
  }
  .profile-copy h2 {
    margin: 0 0 7px;
    font-size: clamp(23px, 6.2vw, 29px) !important;
    line-height: 1.03;
    letter-spacing: -0.035em;
  }
  .profile-intro {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.5;
  }
  .profile-facts {
    gap: 5px !important;
    margin-top: 8px;
  }
  .profile-facts > div {
    min-width: 0;
    padding: 7px 8px !important;
  }
  .profile-facts small {
    display: block;
    margin-bottom: 4px;
    font-size: 8px;
    letter-spacing: 0.07em;
  }
  .profile-facts strong {
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .icc-ranking-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }
  .icc-ranking-card > div {
    min-width: 0;
    padding: 9px 8px;
  }
  .icc-ranking-card .eyebrow,
  .icc-ranking-card span {
    font-size: 8px;
    line-height: 1.35;
  }
  .icc-ranking-card strong {
    display: block;
    margin: 5px 0 3px;
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.05;
  }
  .icc-ranking-card small {
    font-size: 8px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .profile-teams {
    grid-column: 1 / -1;
    margin: 9px 0 0;
    font-size: 9px;
    line-height: 1.5;
  }
  .profile-quick-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
  }
  .profile-quick-actions .button {
    min-height: 36px;
    padding: 8px 10px !important;
    font-size: 10px;
    line-height: 1.25;
  }
  .home-snapshot-section {
    padding: 22px 4vw !important;
  }
  .home-snapshot-heading {
    gap: 8px;
    margin-bottom: 13px;
  }
  .home-snapshot-heading .eyebrow {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .home-snapshot-heading h2 {
    margin: 5px 0 0;
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .home-all-stats {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 9px;
  }
  .home-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .home-mini-stat {
    min-width: 0;
    padding: 10px;
  }
  .home-mini-stat span {
    font-size: 8px;
    letter-spacing: 0.07em;
  }
  .home-mini-stat strong {
    margin-top: 5px;
    font-size: clamp(23px, 6.5vw, 30px);
    line-height: 1.05;
  }
}
@media (max-width: 390px) {
  .profile-section {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }
  .profile-photo-wrap {
    width: 92px !important;
    height: 132px !important;
  }
  .profile-copy h2 {
    font-size: 22px !important;
  }
  .profile-intro {
    font-size: 10px;
  }
  .profile-facts > div {
    padding: 6px !important;
  }
  .icc-ranking-card > div {
    padding: 8px 6px;
  }
  .icc-ranking-card strong {
    font-size: 17px !important;
  }
  .profile-quick-actions .button {
    font-size: 9px;
    padding: 8px !important;
  }
  .home-snapshot-heading h2 {
    font-size: 25px !important;
  }
}

/* Strong compact mode for narrow phone viewports: prioritize the cricket content. */
@media (max-width: 650px) {
  main #profile.profile-section {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 13px 3.5vw 17px !important;
  }
  #profile .profile-photo-wrap {
    width: 86px !important;
    height: 122px !important;
    align-self: start;
  }
  #profile .profile-copy > .eyebrow {
    font-size: 8px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
  }
  #profile .profile-copy h2 {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
  }
  #profile .profile-intro {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 0 7px !important;
  }
  #profile .profile-facts {
    gap: 4px !important;
    margin-top: 6px !important;
  }
  #profile .profile-facts > div {
    padding: 6px 7px !important;
  }
  #profile .profile-facts small {
    font-size: 7px !important;
    margin-bottom: 3px !important;
  }
  #profile .profile-facts strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  #profile .icc-ranking-card {
    gap: 5px !important;
    margin-top: 6px !important;
  }
  #profile .icc-ranking-card > div {
    padding: 7px !important;
  }
  #profile .icc-ranking-card .eyebrow,
  #profile .icc-ranking-card span {
    font-size: 7px !important;
  }
  #profile .icc-ranking-card strong {
    font-size: 17px !important;
    margin: 4px 0 2px !important;
  }
  #profile .icc-ranking-card small {
    font-size: 7px !important;
    line-height: 1.3 !important;
  }
  #profile .profile-teams {
    display: none !important;
  }
  #profile .profile-quick-actions {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  #profile .profile-quick-actions .button {
    min-height: 31px !important;
    padding: 7px 8px !important;
    font-size: 9px !important;
  }
  #home-snapshot.home-snapshot-section {
    padding: 17px 3.5vw !important;
  }
  #home-snapshot .home-snapshot-heading {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }
  #home-snapshot .home-snapshot-heading .eyebrow {
    font-size: 8px !important;
  }
  #home-snapshot .home-snapshot-heading h2 {
    font-size: 25px !important;
    margin-top: 4px !important;
    line-height: 1 !important;
  }
  #home-snapshot .home-all-stats {
    min-height: 30px !important;
    padding: 7px 9px !important;
    font-size: 8px !important;
  }
  #home-snapshot .home-quick-stats {
    gap: 6px !important;
  }
  #home-snapshot .home-mini-stat {
    padding: 8px !important;
  }
  #home-snapshot .home-mini-stat span {
    font-size: 7px !important;
  }
  #home-snapshot .home-mini-stat strong {
    font-size: 25px !important;
  }
}
@media (max-width: 390px) {
  main #profile.profile-section {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  #profile .profile-photo-wrap {
    width: 78px !important;
    height: 112px !important;
  }
  #profile .profile-copy h2 {
    font-size: 20px !important;
  }
  #profile .profile-intro {
    font-size: 9px !important;
  }
  #profile .icc-ranking-card strong {
    font-size: 15px !important;
  }
  #profile .profile-quick-actions .button {
    font-size: 8px !important;
    padding: 6px !important;
  }
}

/* Restore a large, prominent Tilak portrait on mobile while keeping text compact. */
@media (max-width: 650px) {
  main #profile.profile-section {
    grid-template-columns: minmax(118px, 34%) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px 3.5vw 19px !important;
    align-items: start !important;
  }
  #profile .profile-photo-wrap {
    width: 100% !important;
    height: clamp(178px, 52vw, 228px) !important;
    min-height: 178px !important;
    max-height: 228px !important;
    align-self: start !important;
    overflow: hidden !important;
  }
  #profile .profile-photo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
  }
}
@media (max-width: 390px) {
  main #profile.profile-section {
    grid-template-columns: minmax(108px, 34%) minmax(0, 1fr) !important;
    gap: 9px !important;
  }
  #profile .profile-photo-wrap {
    height: clamp(166px, 50vw, 200px) !important;
    min-height: 166px !important;
  }
}

/* Squad-confirmed upcoming fixtures in the Matches section. */
.upcoming-matches-panel {
  margin: 0 0 28px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line, rgba(126, 166, 205, 0.24));
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18, 43, 69, 0.96), rgba(9, 22, 39, 0.94));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.upcoming-matches-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.upcoming-matches-heading h3 {
  margin: 5px 0 7px;
  font-size: clamp(21px, 3vw, 30px);
  letter-spacing: -0.035em;
}
.upcoming-matches-heading p,
.upcoming-matches-foot {
  margin: 0;
  color: var(--muted, #aab9ca);
  font-size: 12px;
  line-height: 1.55;
}
.upcoming-matches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.upcoming-match-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(145, 177, 210, 0.2);
  border-radius: 13px;
  background: rgba(5, 16, 29, 0.56);
}
.upcoming-match-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.upcoming-match-date {
  color: #f5f8fc;
  font-size: 12px;
  font-weight: 800;
}
.upcoming-squad-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(69, 211, 150, 0.3);
  border-radius: 999px;
  color: #8af0c0;
  background: rgba(31, 146, 100, 0.12);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.upcoming-match-teams {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 850;
  line-height: 1.3;
}
.upcoming-match-teams .versus {
  color: #f5a623;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.upcoming-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted, #aab9ca);
  font-size: 11px;
}
.upcoming-match-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.upcoming-matches-foot {
  margin-top: 13px;
  font-size: 10px;
}
@media (max-width: 650px) {
  .upcoming-matches-panel {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 20px;
  }
  .upcoming-matches-heading {
    flex-direction: column;
    gap: 10px;
  }
  .upcoming-matches-heading p {
    font-size: 11px;
  }
  .upcoming-matches-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .upcoming-match-card {
    padding: 12px;
  }
  .upcoming-match-teams {
    font-size: 16px;
  }
}

/* Keep debut/last-match cards grouped directly beneath the upcoming fixtures. */
.upcoming-matches-panel .match-history-summary-nested {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid rgba(139, 174, 207, 0.24);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.upcoming-matches-panel .match-history-summary-nested > .eyebrow {
  margin-bottom: 12px;
}
.upcoming-matches-panel .match-history-summary-nested .player-match-milestones {
  margin-top: 0;
}
.upcoming-matches-panel .match-history-summary-nested .home-bowling-updated {
  margin-bottom: 0;
}
@media (max-width: 650px) {
  .upcoming-matches-panel .match-history-summary-nested {
    margin-top: 16px;
    padding-top: 14px;
  }
}

/* Debut/last-match cards sit below, not inside, the upcoming fixtures panel. */
.innings-section > .match-history-summary {
  margin-top: 18px;
}
.innings-section > .upcoming-matches-panel .match-history-summary-nested {
  display: none;
}

/* Fan Zone expansion — personal tools, one consistent dark theme */
.fan-zone-section {
  background: linear-gradient(145deg, #091726, #0d1a2c);
}
.fan-zone-section .section-heading {
  margin-bottom: 28px;
}
.fan-zone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.fan-card {
  min-width: 0;
  background: linear-gradient(150deg, #122238, #0b1728);
  color: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--orange);
}
.fan-card:nth-child(2) {
  border-top-color: var(--cyan);
}
.fan-card:nth-child(3n) {
  border-top-color: var(--orange);
}
.fan-card h3 {
  color: var(--white);
}
.fan-card h3 em {
  color: var(--orange);
  font-style: normal;
}
.fan-card .feature-eyebrow {
  color: var(--cyan);
}
.fan-card .feature-note,
.fan-card-intro {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.fan-card .poll-option {
  background: #0b1728;
  border-color: #2a3d55;
  color: #eaf0f8;
}
.fan-card .poll-option:has(input:checked) {
  background: #182d43;
  border-color: var(--orange);
}
.fan-card .poll-option input {
  accent-color: var(--orange);
}
.fan-card .poll-result > div:first-child {
  color: #dbe6f3;
}
.fan-card .poll-result b {
  color: var(--orange);
}
.fan-card .poll-track {
  background: #ffffff15;
}
.fan-card .poll-track i {
  background: linear-gradient(90deg, var(--orange), var(--cyan));
}
.fan-tool-form {
  display: grid;
  gap: 9px;
  margin: 18px 0;
}
.fan-tool-form label {
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: 0.06em;
}
.fan-tool-form input,
.fan-tool-form select,
.fan-tool-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  color: var(--white);
  background: #07101f;
  border: 1px solid #30445d;
  border-radius: 0;
  font: 12px var(--body);
}
.fan-tool-form textarea {
  resize: vertical;
}
.fan-tool-form .button {
  justify-content: center;
  margin-top: 5px;
}
.fan-badge-preview {
  display: grid;
  gap: 9px;
  padding: 20px;
  margin: 15px 0 10px;
  border: 1px solid #ff6a3570;
  background: linear-gradient(120deg, #172c43, #0a1525);
}
.fan-badge-preview span,
.fan-badge-preview small {
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: 0.12em;
}
.fan-badge-preview strong {
  font: 800 clamp(24px, 3vw, 34px) / 1 var(--display);
  overflow-wrap: anywhere;
  color: var(--orange);
}
.fan-secondary-button {
  margin-top: 8px !important;
  padding: 11px 13px !important;
  cursor: pointer;
}
.fan-ritual-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.fan-ritual-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #07101f65;
  color: #dce6f3;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}
.fan-ritual-list input {
  accent-color: var(--orange);
  margin-top: 2px;
}
.fan-ritual-progress {
  display: grid;
  gap: 8px;
  margin: 15px 0;
}
.fan-ritual-progress span {
  color: var(--muted);
  font: 10px var(--mono);
}
.fan-memory-saved {
  padding: 13px;
  border: 1px solid var(--line);
  background: #07101f70;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.fan-memory-saved strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan);
}
.fan-chant-line {
  padding: 18px;
  border-left: 3px solid var(--orange);
  background: #07101f;
  color: var(--white);
  font: 700 22px/1.3 var(--display);
}
.fan-action-status {
  min-height: 18px;
  color: var(--cyan);
  font-size: 10px;
  line-height: 1.6;
}
.fan-zone-privacy {
  margin: 18px 0 0;
  color: var(--muted);
  font: 10px/1.8 var(--mono);
}
@media (max-width: 900px) {
  .fan-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .fan-zone-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .fan-card {
    padding: 20px;
  }
  .fan-card h3 {
    font-size: 29px;
  }
  .fan-tool-form input,
  .fan-tool-form select,
  .fan-tool-form textarea {
    font-size: 16px;
  }
  .fan-chant-line {
    font-size: 24px;
  }
}

/* Official BCCI video hub */
.bcci-video-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
  align-items: end;
}
.bcci-video-controls label,
.bcci-player-options label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.bcci-video-controls select,
.bcci-player-options select {
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--white);
}
.bcci-video-status {
  min-height: 22px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
}
.bcci-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bcci-video-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.bcci-video-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #07101f;
  cursor: pointer;
  color: #fff;
}
.bcci-video-art:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.bcci-video-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.bcci-video-art:hover img {
  transform: scale(1.035);
}
.bcci-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border: 1px solid #ffffffaa;
  border-radius: 50%;
  background: #07101fbb;
  color: #fff;
  font-size: 18px;
}
.bcci-video-duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #000b;
  color: white;
  font: 700 11px var(--mono);
}
.bcci-video-no-thumb {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font: 800 20px var(--display);
}
.bcci-video-card-copy {
  padding: 14px;
}
.bcci-video-tag {
  color: var(--orange);
  font: 700 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bcci-video-card h3 {
  margin: 8px 0 14px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--white);
}
.bcci-video-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
}
.bcci-video-attribution {
  margin-top: 16px;
  color: var(--muted);
  font: 700 10px var(--mono);
  letter-spacing: 0.06em;
}
.bcci-video-modal[hidden] {
  display: none !important;
}
.bcci-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
}
.bcci-video-backdrop {
  position: absolute;
  inset: 0;
  background: #000d;
  backdrop-filter: blur(8px);
}
.bcci-video-panel {
  position: relative;
  width: min(1000px, 100%);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--white);
}
.bcci-video-player-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 13px;
}
.bcci-video-player-head button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
#bcci-shaka-player {
  display: block;
  width: 100%;
  max-height: 72vh;
  aspect-ratio: 16/9;
  background: #000;
}
.bcci-player-options {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
#bcci-player-error {
  color: var(--muted);
  font-size: 12px;
}
body.bcci-player-open {
  overflow: hidden;
}
@media (max-width: 900px) {
  .bcci-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .bcci-video-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bcci-video-card {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
  }
  .bcci-video-art {
    height: 100%;
    min-height: 125px;
    aspect-ratio: auto;
  }
  .bcci-video-play {
    min-width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .bcci-video-card-copy {
    padding: 11px;
  }
  .bcci-video-card h3 {
    font-size: 13px;
    margin: 6px 0 10px;
  }
  .bcci-video-card-meta {
    flex-direction: column;
  }
  .bcci-video-controls label {
    flex: 1;
    min-width: calc(50% - 8px);
  }
  .bcci-video-controls select {
    min-width: 0;
    width: 100%;
  }
  .bcci-video-modal {
    padding: 8px;
  }
  .bcci-video-panel {
    padding: 10px;
  }
}

/* Full-page style BCCI/Shaka experience with a Tilak-only Up Next queue */
.bcci-video-panel {
  width: min(1240px, 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 0;
  border: 1px solid #1c2d56;
  border-radius: 16px;
  background: #06143e;
  box-shadow: 0 28px 100px #000b;
}
.bcci-video-player-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 12px 16px;
  margin: 0;
  background: #214e9c;
  color: #fff;
}
.bcci-player-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.bcci-player-brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ff9d35;
  color: #06143e;
  font-weight: 900;
}
.bcci-video-player-head button {
  flex: 0 0 38px;
  background: #102c62;
}
.bcci-player-page-content {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.8fr);
  align-items: stretch;
}
.bcci-player-main {
  min-width: 0;
  background: #071846;
}
.bcci-player-screen {
  position: relative;
  background: #000;
}
#bcci-shaka-player {
  width: 100%;
  max-height: none;
  aspect-ratio: 16/9;
  object-fit: contain;
}
.bcci-player-screen-overlay {
  position: absolute;
  left: 12px;
  top: 12px;
  pointer-events: none;
  padding: 5px 8px;
  border-radius: 5px;
  background: #0008;
  color: #fff;
  font: 700 9px var(--mono);
  letter-spacing: 0.08em;
}
.bcci-player-title-block {
  padding: 20px 22px 18px;
  background: #07194f;
}
.bcci-player-title-block h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.2;
}
.bcci-player-title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: #a9bee9;
  font-size: 13px;
}
.bcci-share-video {
  border: 0;
  border-radius: 24px;
  padding: 9px 16px;
  background: #243c7a;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.bcci-player-options {
  padding: 0 22px 18px;
  margin: 0;
  background: #07194f;
  align-items: center;
}
.bcci-player-options label {
  color: #c0cceb;
}
.bcci-player-options select {
  background: #0a2459;
  color: #fff;
  border-color: #2b477e;
}
#bcci-player-error {
  color: #c0cceb;
}
.bcci-up-next-panel {
  min-width: 0;
  padding: 20px 16px;
  background: #061239;
  border-left: 1px solid #1c2d56;
}
.bcci-up-next-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}
.bcci-up-next-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 21px;
}
.bcci-up-next-heading span {
  color: #7da9ff;
  font: 700 8px var(--mono);
  letter-spacing: 0.05em;
}
.bcci-up-next-list {
  display: flex;
  flex-direction: column;
}
.bcci-up-next-item {
  display: grid;
  grid-template-columns: minmax(95px, 38%) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 13px 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #20305a;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.bcci-up-next-item:first-child {
  padding-top: 0;
}
.bcci-up-next-item:hover .bcci-up-next-copy strong {
  color: #8fd8ff;
}
.bcci-up-next-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  background: #10234c;
}
.bcci-up-next-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.bcci-up-next-thumb > span:not(.bcci-up-next-duration) {
  display: grid;
  place-items: center;
  height: 100%;
  color: #ff9d35;
  font-weight: 900;
}
.bcci-up-next-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  background: #000c;
  color: #fff;
  font: 700 9px var(--mono);
}
.bcci-up-next-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.bcci-up-next-copy strong {
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
}
.bcci-up-next-copy small {
  color: #9eafd3;
  font-size: 10px;
}
.bcci-up-next-empty {
  color: #a9bee9;
  font-size: 13px;
}
@media (max-width: 760px) {
  .bcci-video-modal {
    padding: 0;
    place-items: stretch;
  }
  .bcci-video-panel {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .bcci-video-player-head {
    padding: 10px 12px;
  }
  .bcci-player-page-content {
    grid-template-columns: 1fr;
  }
  .bcci-player-title-block {
    padding: 18px 16px;
  }
  .bcci-player-options {
    padding: 0 16px 18px;
  }
  .bcci-up-next-panel {
    border-left: 0;
    border-top: 1px solid #1c2d56;
    padding: 18px 16px 30px;
  }
  .bcci-up-next-item {
    grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
    padding: 14px 0;
  }
  .bcci-up-next-copy strong {
    font-size: 14px;
  }
}

/* Fan gallery: two columns on phones and four on desktop. */
.cricinfo-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
  gap: 12px;
}
.admin-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #030812;
}
@media (max-width: 700px) {
  .cricinfo-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .cricinfo-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.bcci-profile-photo-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.bcci-profile-photo-open {
  display: block;
  position: relative;
  background: #07101f;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.bcci-profile-photo-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.bcci-profile-photo-open > span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 5px;
  background: #07101fdd;
  color: #fff;
  font: 700 9px var(--mono);
  letter-spacing: 0.08em;
}
.bcci-profile-photo-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
}
.bcci-profile-photo-caption strong {
  color: var(--white);
  font-size: 14px;
}
.bcci-profile-photo-caption a,
.bcci-photo-empty a {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
}
.bcci-photo-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.bcci-photo-mark {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ff6a3520;
  color: var(--orange);
  font: 900 28px var(--display);
}
.bcci-photo-empty strong {
  display: block;
  margin-bottom: 6px;
}
.bcci-photo-empty p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .cricinfo-photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bcci-profile-photo-card {
    max-width: 100%;
  }
  .bcci-profile-photo-open {
    max-height: 520px;
  }
}
@media (max-width: 900px) {
}
@media (max-width: 600px) {
}
@media (max-width: 600px) {
}
@keyframes mc-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 86, 86, 0.45);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 86, 86, 0);
    opacity: 0.72;
  }
}
@keyframes mc-score-sweep {
  from {
    width: 22%;
  }
  to {
    width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 600px) {
}
@media (max-width: 520px) {
}
@media (min-width: 900px) {
}
@media (max-width: 760px) {
}
@media (max-width: 420px) {
}
@media (max-height: 540px) and (min-width: 761px) {
}

/* Compact innings scorecards: one clean scroll{
  align-items: start;
  gap: 12px;
}
@media (max-width: 760px) {
}
@media (min-width: 761px) {
}
.home-debut-history {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  background: var(--panel, rgba(13, 26, 44, 0.45));
}
.home-debut-history .match-history-summary {
  margin-top: 12px;
}
.home-debut-history .player-match-milestones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}
@media (max-width: 700px) {
  .home-debut-history {
    padding: 14px;
    margin: 18px 0;
  }
}

/* Compact playback quality control over the Shaka video surface. */
.bcci-player-screen {
  position: relative;
  isolation: isolate;
}
.bcci-player-options {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(5, 12, 25, 0.82);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bcci-player-options label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  color: #f4f7fb;
  font-size: 11px;
  white-space: nowrap;
}
.bcci-player-options select {
  min-width: 126px;
  width: auto;
  padding: 8px 30px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  background: #122544;
  color: #fff;
  font: 600 12px var(--body);
}
#bcci-player-error {
  display: none;
}
@media (max-width: 640px) {
  .bcci-player-options {
    left: 8px;
    bottom: 48px;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    gap: 6px;
  }
  .bcci-player-options label {
    gap: 6px;
    font-size: 10px;
  }
  .bcci-player-options select {
    min-width: 112px;
    font-size: 11px;
  }
}

/* Player settings: compact gear button; quality menu opens on demand. */
.bcci-player-options {
  position: absolute;
  z-index: 8;
  right: 14px;
  bottom: 52px;
  left: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bcci-player-settings-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 12, 25, 0.78);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.bcci-player-settings-button:hover,
.bcci-player-settings-button:focus-visible,
.bcci-player-settings-button[aria-expanded="true"] {
  border-color: #ff9b35;
  background: rgba(19, 37, 62, 0.96);
  outline: none;
}
.bcci-player-settings-button[aria-expanded="true"] {
  transform: rotate(25deg);
}
.bcci-player-settings-button svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bcci-player-settings-menu {
  position: absolute;
  right: 0;
  bottom: 50px;
  width: min(250px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(7, 17, 33, 0.97);
  color: #f4f7fb;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.bcci-player-settings-menu[hidden] {
  display: none !important;
}
.bcci-player-settings-menu label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #cbd7e8;
  font-size: 12px;
  font-weight: 700;
}
.bcci-player-settings-menu select {
  width: 100%;
  min-height: 42px;
  padding: 9px 32px 9px 10px;
  border: 1px solid #3b526d;
  border-radius: 8px;
  background: #122544;
  color: #fff;
  font: 600 12px var(--body);
  color-scheme: dark;
}
.bcci-player-settings-menu #bcci-player-error {
  display: block;
  margin-top: 8px;
  color: #91a8c5;
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .bcci-player-options {
    right: 9px;
    bottom: 46px;
  }
  .bcci-player-settings-button {
    width: 38px;
    height: 38px;
    padding: 9px;
  }
  .bcci-player-settings-button svg {
    width: 20px;
    height: 20px;
  }
  .bcci-player-settings-menu {
    bottom: 46px;
    padding: 12px;
  }
}

/* Keep video settings in the top player bar, away from the playing picture. */
.bcci-player-head-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.bcci-player-head-actions [data-bcci-close] {
  flex-shrink: 0;
}
.bcci-quality-head-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(6, 18, 36, 0.25);
  color: #fff;
  cursor: pointer;
  font: 600 12px/1 var(--body);
}
.bcci-quality-head-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bcci-quality-head-button:hover,
.bcci-quality-head-button[aria-expanded="true"] {
  border-color: #ff9b35;
  background: rgba(255, 155, 53, 0.12);
}
.bcci-quality-current {
  color: #ffb15d;
  font-size: 11px;
  white-space: nowrap;
}
.bcci-player-options {
  position: absolute;
  z-index: 12;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.bcci-player-settings-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  width: min(250px, calc(100vw - 32px));
}
.bcci-video-download-button {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 155, 53, 0.45);
  border-radius: 8px;
  background: rgba(255, 155, 53, 0.12);
  color: #ffbd76;
  text-align: left;
  font: 700 12px/1.3 var(--body);
  cursor: pointer;
}
.bcci-video-download-button:hover {
  background: rgba(255, 155, 53, 0.2);
}
.bcci-video-download-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 640px) {
  .bcci-player-head-actions {
    gap: 6px;
  }
  .bcci-quality-head-button {
    min-height: 34px;
    padding: 6px 8px;
    gap: 6px;
    font-size: 11px;
  }
  .bcci-quality-head-button svg {
    width: 17px;
    height: 17px;
  }
  .bcci-quality-current {
    font-size: 10px;
  }
  .bcci-player-options {
    top: 8px;
    right: 8px;
  }
}

/* Settings popover is anchored to the header, never over the playing picture. */
.bcci-player-head-actions {
  position: relative;
}
.bcci-player-head-actions .bcci-player-settings-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 48px;
  bottom: auto;
  width: min(260px, calc(100vw - 34px));
}
.bcci-player-options {
  display: none !important;
}
@media (max-width: 640px) {
  .bcci-player-head-actions .bcci-player-settings-menu {
    top: calc(100% + 8px);
    right: 42px;
  }
}

/* Center the quality control in the video header; keep close at the far right. */
.bcci-video-player-head {
  position: relative;
}
.bcci-player-head-actions {
  position: static;
}
.bcci-player-head-actions .bcci-quality-head-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
}
.bcci-player-head-actions .bcci-quality-head-button[aria-expanded="true"] {
  transform: translate(-50%, -50%);
}
.bcci-player-head-actions [data-bcci-close] {
  position: relative;
  z-index: 3;
}
.bcci-player-head-actions .bcci-player-settings-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  width: min(260px, calc(100vw - 34px));
}
@media (max-width: 640px) {
  .bcci-player-head-actions .bcci-quality-head-button {
    min-height: 32px;
    padding: 5px 8px;
    gap: 5px;
    font-size: 10px;
  }
  .bcci-player-head-actions .bcci-quality-head-button svg {
    width: 16px;
    height: 16px;
  }
  .bcci-player-head-actions .bcci-player-settings-menu {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
  }
}

/* Video hub quality popover: tidy, readable and anchored below the centered header control. */
.bcci-player-head-actions .bcci-player-settings-menu {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(117, 158, 208, 0.34);
  border-radius: 14px;
  background: #0b1729;
  color: #f4f7fb;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52);
  text-align: left;
}
.bcci-player-settings-menu[hidden] {
  display: none !important;
}
.bcci-player-settings-menu label {
  display: grid;
  gap: 8px;
  color: #e6edf7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.bcci-player-settings-menu label::before {
  content: "PLAYBACK";
  color: #91a8c5;
  font: 700 10px/1.2 var(--mono, monospace);
  letter-spacing: 0.12em;
}
.bcci-player-head-actions .bcci-player-settings-menu select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid #334b69;
  border-radius: 9px;
  background-color: #12243d;
  color: #f4f7fb;
  font: 600 13px/1.2 var(--body, sans-serif);
  color-scheme: dark;
  cursor: pointer;
}
.bcci-player-head-actions .bcci-video-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 155, 53, 0.52);
  border-radius: 9px;
  background: #ff9b35;
  color: #101827;
  font: 800 12px/1.2 var(--body, sans-serif);
  text-align: center;
}
.bcci-player-head-actions .bcci-video-download-button::before {
  content: "↓";
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}
.bcci-player-head-actions .bcci-video-download-button:hover {
  background: #ffb15d;
}
.bcci-player-head-actions .bcci-video-download-button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.bcci-player-head-actions .bcci-player-settings-menu #bcci-player-error {
  display: block;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(145, 168, 197, 0.18);
  color: #91a8c5;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bcci-player-head-actions .bcci-quality-head-button {
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #10213a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.bcci-player-head-actions .bcci-quality-head-button svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 640px) {
  .bcci-player-head-actions .bcci-player-settings-menu {
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    width: min(290px, calc(100vw - 28px));
    padding: 14px;
    gap: 11px;
  }
  .bcci-player-head-actions .bcci-quality-head-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* Video Hub quality menu: clean compact dropdown anchored to the top bar */
.bcci-player-head-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bcci-player-head-actions .bcci-quality-head-button {
  position: static !important;
  transform: none !important;
  min-height: 38px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: #17396f;
  color: #fff;
  box-shadow: none;
  white-space: nowrap;
}
.bcci-player-head-actions .bcci-quality-head-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.bcci-player-head-actions .bcci-player-settings-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: auto !important;
  right: 48px !important;
  bottom: auto !important;
  z-index: 10050;
  width: 260px;
  max-width: calc(100vw - 28px);
  padding: 16px;
  border: 1px solid #29405d;
  border-radius: 14px;
  background: #081426;
  color: #edf4ff;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
}
.bcci-player-head-actions .bcci-player-settings-menu[hidden] {
  display: none !important;
}
.bcci-player-head-actions .bcci-player-settings-menu label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #eaf1ff;
  font-size: 13px;
  font-weight: 700;
}
.bcci-player-head-actions .bcci-player-settings-menu select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #344a68;
  border-radius: 9px;
  background: #101f34;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.bcci-player-head-actions .bcci-player-settings-menu #bcci-player-error {
  display: block;
  margin-top: 12px;
  color: #9db1cc;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 600px) {
  .bcci-player-head-actions {
    gap: 7px;
  }
  .bcci-player-head-actions .bcci-quality-head-button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .bcci-player-head-actions .bcci-player-settings-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 250px;
  }
}

/* Video quality control: compact, readable, and anchored to the player header. */
.bcci-player-head-actions .bcci-quality-head-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 155, 53, 0.48);
  border-radius: 999px;
  background: rgba(7, 16, 31, 0.34);
  color: #f5f8ff;
  font: 600 13px/1.2 inherit;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}
.bcci-player-head-actions .bcci-quality-head-button:hover,
.bcci-player-head-actions .bcci-quality-head-button:focus-visible,
.bcci-player-head-actions .bcci-quality-head-button[aria-expanded="true"] {
  background: #ff9b35;
  color: #081321;
  border-color: #ff9b35;
  outline: none;
  transform: none;
}
.bcci-quality-head-button .bcci-quality-current {
  color: #ffad4f;
  font-weight: 800;
}
.bcci-player-head-actions .bcci-quality-head-button:hover .bcci-quality-current,
.bcci-player-head-actions .bcci-quality-head-button[aria-expanded="true"] .bcci-quality-current {
  color: #081321;
}
.bcci-player-head-actions .bcci-player-settings-menu {
  z-index: 50;
  top: calc(100% + 10px);
  right: 48px;
  left: auto;
  width: 260px;
  padding: 16px;
  border: 1px solid #344965;
  border-radius: 14px;
  background: #0b1729;
  color: #f5f8ff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}
.bcci-player-head-actions .bcci-player-settings-menu label {
  display: grid;
  gap: 10px;
  color: #d9e5f7;
  font-size: 13px;
  font-weight: 700;
}
.bcci-player-head-actions .bcci-player-settings-menu select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #405674;
  border-radius: 9px;
  padding: 9px 12px;
  background: #101f34;
  color: #fff;
  font: inherit;
}
@media (max-width: 600px) {
  .bcci-player-head-actions .bcci-quality-head-button {
    min-height: 34px;
    padding: 7px 10px;
    gap: 6px;
    font-size: 12px;
  }
  .bcci-player-head-actions .bcci-player-settings-menu {
    top: calc(100% + 8px);
    right: 42px;
    width: min(250px, calc(100vw - 32px));
    padding: 14px;
  }
}

/* Fix custom option picker scrolling on desktop and touch devices. */
.cs-dialog {
  min-height: 0;
  max-height: min(68vh, 420px);
}
.cs-dialog-head {
  flex: 0 0 auto;
}
.cs-options {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}
.cs-option {
  flex: 0 0 auto;
}
.cs-overlay.is-mobile .cs-dialog {
  max-height: min(72dvh, 620px);
}
.cs-overlay.is-mobile .cs-options {
  min-height: 0;
  max-height: calc(min(72dvh, 620px) - 76px);
}

/* Video Hub: keep the quality control on the left and show only its label. */
.bcci-player-head-actions {
  margin-left: auto;
}
.bcci-player-head-actions .bcci-player-settings-menu {
  left: 0 !important;
  right: auto !important;
}
.bcci-player-head-actions .bcci-quality-head-button {
  gap: 0 !important;
  min-width: 76px;
}
@media (max-width: 600px) {
  .bcci-player-head-actions .bcci-player-settings-menu {
    left: 0 !important;
    right: auto !important;
    width: min(250px, calc(100vw - 28px));
  }
}

/* Emergency hardening: keep custom option dialogs above every section and fully scrollable. */
.cs-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block;
  pointer-events: auto !important;
}
.cs-dialog {
  z-index: 2147483001 !important;
  min-height: 0 !important;
  max-height: min(68vh, 420px) !important;
  overflow: hidden !important;
}
.cs-dialog .cs-options {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(min(68vh, 420px) - 76px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
.cs-overlay.is-mobile .cs-dialog {
  max-height: min(72dvh, 620px) !important;
}
.cs-overlay.is-mobile .cs-options {
  max-height: calc(min(72dvh, 620px) - 76px) !important;
}

/* Readability pass: consistent contrast, line lengths, and uploaded media cards. */
:root {
  --text-primary: #f3f6fc;
  --text-secondary: #b4c2d5;
  --text-muted: #91a2ba;
  --text-accent: #ffad55;
}
body {
  color: var(--text-primary);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
p,
li,
.section-copy,
.section-heading > p,
.profile-intro {
  color: var(--text-secondary);
  line-height: 1.8;
}
small,
.stat-note,
.match-meta,
.tilak-news-meta,
.bcci-video-card-meta {
  color: var(--text-muted);
}
h1,
h2,
h3,
h4,
.section-title,
.section-heading h2 {
  color: var(--text-primary);
  line-height: 1.08;
  text-wrap: balance;
}
h2 em,
h3 em,
.section-title em {
  color: var(--text-accent);
}
button,
input,
select,
textarea {
  font: inherit;
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cyan, #7ce5f2);
  outline-offset: 3px;
}
.tilak-news-card,
.stat-card,
.record-card,
.milestone-card,
.bcci-video-card,
.match-card,
.snapshot-card {
  min-width: 0;
}
.tilak-news-card p,
.record-card p,
.milestone-card p {
  color: var(--text-secondary);
  line-height: 1.75;
}
.tilak-news-card h3,
.bcci-video-card h3 {
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.admin-gallery-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line, #2b4059);
  background: linear-gradient(145deg, #122238, #0a1626);
}
.admin-gallery-card video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #030812;
}
.admin-gallery-card .bcci-profile-photo-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
}
.admin-gallery-card .bcci-profile-photo-caption strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.admin-gallery-card .bcci-profile-photo-caption span {
  color: var(--cyan, #7ce5f2);
  font: 10px var(--mono, monospace);
  letter-spacing: 0.08em;
}
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  p,
  li,
  .section-copy,
  .section-heading > p {
    line-height: 1.72;
  }
  .admin-gallery-card .bcci-profile-photo-caption {
    padding: 10px;
  }
}

/* Records and milestones: clearer hierarchy and responsive cards. */
.records-section .official-records-head,
.records-section .analytics-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 16px;
}
.records-section .official-records-head h3,
.records-section .analytics-head h3 {
  margin: 8px 0 0;
  color: var(--text-primary, #f3f6fc);
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.08;
}
#icc-records-updated,
#analytics-count {
  max-width: 100%;
  color: var(--text-muted, #91a2ba);
  font: 11px/1.6 var(--mono, monospace);
  overflow-wrap: anywhere;
}
.official-records-grid,
.milestone-grid,
.analytics-grid {
  align-items: stretch;
  gap: 12px;
}
.official-records-grid > *,
.milestone-grid > *,
.analytics-grid > * {
  min-width: 0;
}
.official-records-grid article,
.milestone-grid article,
.analytics-grid article {
  border-color: rgba(145, 162, 186, 0.22);
  background: linear-gradient(145deg, rgba(18, 34, 56, 0.98), rgba(8, 20, 35, 0.98));
}
.records-section .feature-note {
  max-width: 820px;
  color: var(--text-muted, #91a2ba);
  line-height: 1.75;
}
.home-news-item {
  cursor: pointer;
}
.home-news-item h4 a {
  color: var(--text-primary, #f3f6fc);
  text-decoration-color: rgba(255, 173, 85, 0.5);
  text-underline-offset: 4px;
}
.home-news-item h4 a:hover {
  color: var(--text-accent, #ffad55);
}

/* Player quality control: compact gear menu over the video, like the BCCI player. */
.bcci-player-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}
.bcci-player-quality-control {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.bcci-player-quality-control .bcci-quality-head-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #ffffff26;
  border-radius: 24px;
  background: #080d18ef;
  color: #fff;
  box-shadow: 0 3px 14px #0007;
  font: 700 12px var(--body);
  cursor: pointer;
}
.bcci-player-quality-control .bcci-quality-head-button:hover,
.bcci-player-quality-control .bcci-quality-head-button[aria-expanded="true"] {
  background: #214e9c;
}
.bcci-player-settings-menu[hidden] {
  display: none !important;
}
.bcci-player-settings-menu {
  position: absolute;
  right: 0;
  bottom: 48px;
  z-index: 8;
  width: min(280px, calc(100vw - 32px));
  max-height: min(52dvh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  background: #080d18f5;
  color: #fff;
  box-shadow: 0 12px 40px #000b;
  -webkit-overflow-scrolling: touch;
}
.bcci-player-settings-menu label {
  display: grid;
  gap: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.bcci-player-settings-menu select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #344565;
  border-radius: 8px;
  background: #101c34;
  color: #fff;
  font: 13px var(--body);
}
.bcci-player-settings-menu #bcci-player-error {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bcci-player-screen-overlay {
  z-index: 1;
}
@media (max-width: 760px) {
  .bcci-video-modal {
    overflow: hidden;
  }
  .bcci-video-panel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .bcci-player-page-content,
  .bcci-player-main,
  .bcci-up-next-panel {
    min-width: 0;
  }
  .bcci-player-quality-control {
    right: 9px;
    bottom: 58px;
  }
  .bcci-player-quality-control .bcci-quality-head-button {
    min-height: 38px;
    padding: 0 10px;
  }
  .bcci-player-settings-menu {
    width: min(260px, calc(100vw - 22px));
    max-height: 45dvh;
    padding: 12px;
  }
  .bcci-up-next-panel {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* Replace the jersey-number brand tile with Tilak's auto-refreshed profile PNG. */
.brand-mark-photo {
  overflow: hidden;
  position: relative;
  padding: 0;
  transform: none;
  border-radius: 8px;
  background: #0b1928;
}
.brand-mark-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Glass navigation: translucent surface with crisp contrast over scrolling content. */
.topbar {
  background: rgba(10, 23, 41, 0.76);
  border-bottom: 1px solid rgba(180, 210, 245, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: saturate(155%) blur(22px);
  backdrop-filter: saturate(155%) blur(22px);
}
@supports (background: color-mix(in srgb, black, transparent)) {
  .topbar {
    background: color-mix(in srgb, var(--panel2) 76%, transparent);
  }
}
@media (max-width: 900px) {
  .topbar nav,
  nav.open {
    background: rgba(7, 16, 31, 0.78);
    border: 1px solid rgba(184, 212, 247, 0.18);
    border-top: 1px solid rgba(184, 212, 247, 0.22);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    backdrop-filter: saturate(160%) blur(24px);
  }
  nav.open a {
    background: rgba(18, 34, 56, 0.58);
    border-color: rgba(184, 212, 247, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .topbar nav,
  nav.open {
    background: var(--panel2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Custom picker emergency fix: keep the dialog visible above blurred backdrop. */
body > .cs-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
}
body > .cs-overlay .cs-dialog {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  color: #f4f7fb !important;
  background: #0a1525 !important;
  border: 1px solid rgba(124, 229, 242, 0.42) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72) !important;
  pointer-events: auto !important;
}
body > .cs-overlay .cs-dialog-head {
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body > .cs-overlay .cs-options {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body > .cs-overlay .cs-option {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #e6eef8 !important;
}
body > .cs-overlay .cs-dialog-title,
body > .cs-overlay .cs-kicker {
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 899px) {
  body > .cs-overlay.is-mobile {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  body > .cs-overlay.is-mobile .cs-dialog {
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    height: min(72dvh, 620px) !important;
    max-height: min(72dvh, 620px) !important;
    margin: 0 auto !important;
    border-radius: 20px 20px 14px 14px !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, #10243a, #081321) !important;
  }
  body > .cs-overlay.is-mobile .cs-options {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* FINAL PROFILE LAYOUT OVERRIDE — override legacy narrow-phone !important rules. */
@media (max-width: 800px) {
  html body main #profile.profile-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 18px !important;
    padding: 18px 16px 24px !important;
  }
  html body main #profile .profile-photo-wrap {
    width: min(100%, 360px) !important;
    max-width: none !important;
    height: clamp(280px, 54vw, 360px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    align-self: auto !important;
    border-radius: 20px !important;
  }
  html body main #profile .profile-photo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 34% 15% !important;
    transform: scale(1.08) !important;
    transform-origin: 38% 20% !important;
  }
  html body main #profile .profile-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  html body main #profile .profile-copy > .eyebrow {
    margin-bottom: 8px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
  }
  html body main #profile .profile-copy h2 {
    margin: 0 0 8px !important;
    font-size: clamp(32px, 6vw, 46px) !important;
    line-height: 1.02 !important;
  }
  html body main #profile .profile-intro {
    margin: 0 0 13px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  html body main #profile .profile-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }
  html body main #profile .profile-facts > div {
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-radius: 13px !important;
  }
  html body main #profile .profile-facts small {
    margin-bottom: 5px !important;
    font-size: 9px !important;
  }
  html body main #profile .profile-facts strong {
    font-size: 14px !important;
  }
  html body main #profile .icc-ranking-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }
  html body main #profile .icc-ranking-card > div {
    min-width: 0 !important;
    padding: 11px 12px !important;
  }
  html body main #profile .icc-ranking-card .eyebrow,
  html body main #profile .icc-ranking-card span {
    font-size: 8px !important;
  }
  html body main #profile .icc-ranking-card strong {
    margin: 5px 0 3px !important;
    font-size: clamp(19px, 4vw, 25px) !important;
  }
  html body main #profile .icc-ranking-card small {
    font-size: 10px !important;
  }
  html body main #profile .profile-teams-panel {
    margin-top: 0 !important;
    padding: 13px !important;
  }
  html body main #profile .profile-teams-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  html body main #profile .profile-teams-heading h3 {
    margin: 0 !important;
  }
  html body main #profile .profile-team-chips {
    gap: 7px !important;
  }
  html body main #profile .profile-team-chip {
    min-height: 33px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
  html body main #profile .profile-teams-note {
    margin: 9px 0 0 !important;
    font-size: 10px !important;
  }
  html body main #profile .profile-quick-actions {
    margin-top: 12px !important;
    gap: 8px !important;
  }
  html body main #profile .profile-quick-actions .button {
    min-height: 42px !important;
    padding: 10px 15px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 380px) {
  html body main #profile.profile-section {
    padding-inline: 12px !important;
    gap: 15px !important;
  }
  html body main #profile .profile-photo-wrap {
    height: 285px !important;
  }
  html body main #profile .profile-team-chip {
    font-size: 9px !important;
    padding: 7px 8px !important;
  }
}

/* COMPACT PROFILE HERO v4 — smaller portrait, tighter team panel, subtle India-blue background. */
#profile.profile-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20, 104, 180, 0.17), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 128, 80, 0.045), transparent 35%),
    linear-gradient(145deg, #0c1c2c 0%, #081422 65%, #091625 100%) !important;
}
#profile.profile-section:before {
  border-color: rgba(116, 190, 235, 0.075) !important;
}
@media (max-width: 800px) {
  html body main #profile.profile-section {
    gap: 13px !important;
    padding: 13px 13px 18px !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(21, 105, 183, 0.16), transparent 45%),
      linear-gradient(150deg, #0b1b2b, #091523 72%, #0a1725) !important;
  }
  html body main #profile .profile-photo-wrap {
    width: min(100%, 300px) !important;
    height: clamp(215px, 65vw, 275px) !important;
    margin: 0 auto !important;
    border-radius: 17px !important;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.22),
      0 0 0 5px rgba(103, 175, 223, 0.025) !important;
  }
  html body main #profile .profile-photo-wrap img {
    object-position: 34% 15% !important;
    transform: scale(1.04) !important;
  }
  html body main #profile .profile-copy > .eyebrow {
    margin-bottom: 6px !important;
  }
  html body main #profile .profile-copy h2 {
    font-size: clamp(29px, 7vw, 38px) !important;
    margin-bottom: 6px !important;
  }
  html body main #profile .profile-intro {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }
  html body main #profile .profile-facts {
    gap: 7px !important;
    margin-bottom: 8px !important;
  }
  html body main #profile .profile-facts > div {
    padding: 9px 11px !important;
  }
  html body main #profile .profile-facts small {
    font-size: 8px !important;
    margin-bottom: 4px !important;
  }
  html body main #profile .profile-facts strong {
    font-size: 13px !important;
  }
  html body main #profile .icc-ranking-card {
    gap: 7px !important;
    margin-bottom: 8px !important;
  }
  html body main #profile .icc-ranking-card > div {
    padding: 9px 11px !important;
  }
  html body main #profile .icc-ranking-card strong {
    font-size: 20px !important;
  }
  html body main #profile .icc-ranking-card small {
    font-size: 9px !important;
  }
  html body main #profile .profile-teams-panel {
    padding: 11px !important;
    border-radius: 15px !important;
    background:
      radial-gradient(ellipse at 100% 0%, rgba(255, 128, 80, 0.06), transparent 45%),
      linear-gradient(145deg, rgba(15, 31, 49, 0.94), rgba(8, 19, 32, 0.97)) !important;
  }
  html body main #profile .profile-teams-heading {
    margin-bottom: 8px !important;
    gap: 5px !important;
  }
  html body main #profile .profile-teams-heading h3 {
    font-size: 15px !important;
  }
  html body main #profile .profile-teams-heading .eyebrow {
    font-size: 9px !important;
  }
  html body main #profile .profile-team-chips {
    gap: 6px !important;
  }
  html body main #profile .profile-team-chip {
    min-height: 29px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
  }
  html body main #profile .profile-teams-note {
    margin-top: 7px !important;
    font-size: 9px !important;
  }
  html body main #profile .profile-quick-actions {
    margin-top: 9px !important;
  }
  html body main #profile .profile-quick-actions .button {
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: 12px !important;
  }
}
@media (min-width: 801px) {
  html body main #profile.profile-section {
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(22px, 3vw, 42px) !important;
    padding: clamp(26px, 3.4vw, 46px) clamp(24px, 4vw, 60px) !important;
  }
  html body main #profile .profile-photo-wrap {
    max-width: 410px !important;
  }
  html body main #profile .profile-teams-heading {
    display: block !important;
  }
  html body main #profile .profile-teams-heading h3 {
    margin-top: 5px !important;
  }
}

/* Compact BCCI identity badge; informational fan-profile marker, not an endorsement. */
.profile-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.profile-eyebrow-row > .eyebrow {
  margin: 0 !important;
}
.bcci-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 9px 5px 6px;
  border: 1px solid rgba(111, 164, 219, 0.3);
  border-radius: 999px;
  background: rgba(10, 23, 40, 0.7);
  color: #dbe9fa;
  font: 800 9px/1 var(--mono);
  letter-spacing: 0.1em;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.bcci-profile-badge:hover {
  border-color: rgba(124, 229, 242, 0.6);
  background: rgba(22, 51, 78, 0.85);
}
.bcci-profile-badge img {
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
}
@media (max-width: 800px) {
  .profile-eyebrow-row {
    margin-bottom: 6px;
    gap: 8px;
  }
  .bcci-profile-badge {
    padding: 4px 7px 4px 5px;
    font-size: 8px;
  }
  .bcci-profile-badge img {
    width: 20px;
    height: 20px;
  }
}

/* Format selectors: keep every option visible on phones without horizontal scrolling. */
.statsguru-format-tabs,
.bowling-format-tabs {
  display: flex;
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: visible;
  max-width: 100%;
  white-space: normal;
  align-items: stretch;
}
.statsguru-format-tabs button,
.bowling-format-tabs button {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
@media (max-width: 600px) {
  .statsguru-format-tabs,
  .bowling-format-tabs {
    gap: 7px;
    padding: 8px 0 12px;
  }
  .statsguru-format-tabs button,
  .bowling-format-tabs button {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.25;
    min-height: 42px;
  }
  .statsguru-format-tabs button[data-sg-format="T20"],
  .bowling-format-tabs button[data-bowling-format="T20"] {
    flex: 1 1 145px;
  }
}