/* ==========================================================================
   Cric11 Pulse — cricket platform UI (mobile-first) + PWA chrome
   ========================================================================== */

/* mobile bottom navigation (app-like) */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; background: rgba(255,255,255,.98); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(3,33,67,.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1; display: grid; justify-items: center; gap: 2px; padding: 6px 2px;
  color: var(--muted); text-decoration: none; font-size: 10.5px; letter-spacing: .02em;
}
.bottom-nav a svg { width: 20px; height: 20px; }
.bottom-nav a.on { color: var(--color-brand-navy); font-weight: 700; }
.bottom-nav a.score-fab { color: var(--color-primary-40); font-weight: 700; }
body.has-bottom-nav { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 961px) { .bottom-nav { display: none; } body.has-bottom-nav { padding-bottom: 0; } }

/* PWA install bar */
.install-bar {
  display: none; position: fixed; left: 12px; right: 12px; bottom: 70px; z-index: 96;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-12);
  box-shadow: var(--shadow-lg); padding: 12px 14px; align-items: center; gap: 12px;
}
.install-bar.show { display: flex; }
.install-bar img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 3px; }
.install-bar p { margin: 0; font-size: var(--fs-14); flex: 1; }
.install-bar .btn { padding: 8px 14px; font-size: var(--fs-14); }
.install-bar .x { background: none; border: 0; color: var(--muted); font-size: 18px; }
@media (min-width: 961px) { .install-bar { bottom: 16px; left: auto; right: 16px; max-width: 380px; } }
@media (max-width: 960px) { .install-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* page heads */
.crumb { font-size: var(--fs-12); color: var(--gs-60); margin: 14px 0 4px; }
.crumb a { color: var(--color-secondary-60); text-decoration: none; }
.page-head { padding: 22px 0 10px; }
.page-head h1 { font-size: clamp(1.5rem, 4.6vw, 2.3rem); margin: 0; }
.page-head .sub { color: var(--gs-60); font-size: var(--fs-14); }
.seg-bar { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; }
.seg { border: 1px solid var(--gs-20); background: #fff; border-radius: var(--r-50); padding: 8px 16px; font-size: var(--fs-14); font-weight: 600; color: var(--gs-60); white-space: nowrap; }
.seg.on { background: var(--color-brand-navy); border-color: var(--color-brand-navy); color: #fff; }

/* match cards */
.match-list { display: grid; gap: 12px; padding: 6px 0 26px; }
.m-card { display: block; background: #fff; border: 1px solid var(--gs-10); border-radius: var(--r-12); box-shadow: var(--sh-3); padding: 14px 16px; text-decoration: none; color: inherit; transition: transform var(--dur-enter), box-shadow var(--dur-enter); }
.m-card:hover { transform: translateY(-2px); box-shadow: var(--sh-4); }
.m-card .top { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-12); color: var(--gs-60); margin-bottom: 8px; }
.m-live { color: var(--color-primary-40); font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.m-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-40); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.m-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.m-row .t { flex: 1; font-weight: 700; font-size: var(--fs-16); }
.m-row .s { font-family: var(--font-secondary); font-weight: 700; color: var(--gs-90); }
.m-row .s small { color: var(--gs-60); font-weight: 500; }
.t-dot { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }
.m-card .res { margin-top: 8px; font-size: var(--fs-14); color: var(--color-secondary-60); font-weight: 600; }
.m-card .note { font-size: var(--fs-12); color: var(--gs-60); }

/* score strip (match page) */
.score-strip { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-14); padding: 18px; box-shadow: var(--shadow-md); }
.score-strip .ss-top { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-12); color: var(--muted); }
.score-strip .ss-score { font-family: var(--font-secondary); font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 800; color: var(--text-strong); }
.score-strip .ss-overs { color: var(--muted); font-size: var(--fs-14); }
.score-strip .ss-res { margin-top: 8px; font-size: var(--fs-14); color: var(--color-secondary-60); font-weight: 700; }

/* scorecard tables */
.card-box { background: #fff; border: 1px solid var(--gs-10); border-radius: var(--r-12); box-shadow: var(--sh-3); margin: 14px 0; overflow: hidden; }
.card-box h3 { margin: 0; padding: 12px 16px; font-size: var(--fs-16); border-bottom: 1px solid var(--gs-10); background: var(--gs-5); display: flex; justify-content: space-between; gap: 8px; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); min-width: 460px; }
.sc-table th, .sc-table td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--gs-5); white-space: nowrap; }
.sc-table th:first-child, .sc-table td:first-child { text-align: left; white-space: normal; min-width: 150px; }
.sc-table thead th { color: var(--gs-60); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .06em; background: #fff; }
.sc-table td .how { display: block; color: var(--gs-60); font-size: var(--fs-12); white-space: normal; }
.sc-table tr.total td { font-weight: 800; background: var(--gs-5); }
.sc-table .out { color: var(--gs-90); font-weight: 600; }

/* charts */
.charts-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0; }
@media (min-width: 860px) { .charts-row { grid-template-columns: repeat(3, 1fr); } }
.chart-card { background: #fff; border: 1px solid var(--gs-10); border-radius: var(--r-12); box-shadow: var(--sh-3); padding: 14px; }
.chart-card h4 { margin: 0 0 8px; font-size: var(--fs-14); color: var(--gs-60); }
.chart-card svg { width: 100%; height: auto; }

/* commentary */
.com-feed { max-height: 340px; overflow: auto; padding: 6px 16px 14px; }
.com-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--gs-10); font-size: var(--fs-14); }
.com-item .ov { flex: none; width: 44px; font-family: var(--font-secondary); font-weight: 700; color: var(--color-brand-navy); background: var(--gs-5); border-radius: 6px; text-align: center; align-self: flex-start; padding: 2px 0; font-size: var(--fs-12); }
.com-item.wicket .ov { background: var(--color-primary-40); color: #fff; }
.com-item.four .ov, .com-item.six .ov { background: var(--color-secondary-50); color: #fff; }

/* scoring console */
.console { display: grid; gap: 14px; padding-bottom: 30px; }
.con-score { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-14); padding: 16px; box-shadow: var(--shadow-sm); }
.con-score .big { font-family: var(--font-secondary); font-size: 2rem; font-weight: 800; color: var(--text-strong); }
.con-score .who { color: var(--muted); font-size: var(--fs-14); }
.con-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 640px) { .con-grid { grid-template-columns: repeat(7, 1fr); } }
.con-btn { border: 1px solid var(--gs-20); background: #fff; border-radius: var(--r-12); padding: 14px 0; font-size: var(--fs-18); font-weight: 800; color: var(--gs-90); box-shadow: var(--sh-1); transition: all var(--dur-exit); }
.con-btn:active { transform: scale(.96); }
.con-btn.four { background: var(--color-secondary-50); color: #fff; border-color: var(--color-secondary-50); }
.con-btn.six { background: var(--color-brand-navy); color: #fff; border-color: var(--color-brand-navy); }
.con-btn.wk { background: var(--color-primary-40); color: #fff; border-color: var(--color-primary-40); }
.con-btn.ex { font-size: var(--fs-14); }
.con-selects { display: grid; gap: 10px; }
@media (min-width: 720px) { .con-selects { grid-template-columns: 1fr 1fr; } }
.con-over { display: flex; gap: 6px; flex-wrap: wrap; }
.con-over span { min-width: 34px; text-align: center; border-radius: 8px; background: var(--gs-5); border: 1px solid var(--gs-10); font-size: var(--fs-14); font-weight: 700; padding: 5px 6px; }
.con-over span.w { background: var(--color-primary-40); color: #fff; border-color: var(--color-primary-40); }
.con-over span.b4 { background: var(--color-secondary-50); color: #fff; }
.con-over span.b6 { background: var(--color-brand-navy); color: #fff; }

/* points table & leaderboards */
.pts-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); min-width: 520px; }
.pts-table th, .pts-table td { padding: 10px 10px; text-align: center; border-bottom: 1px solid var(--gs-10); }
.pts-table th:first-child, .pts-table td:first-child { text-align: left; }
.pts-table thead th { background: var(--surface-2); color: var(--text-strong); font-size: var(--fs-12); letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.pts-table tr:first-child td { background: var(--accent-soft); font-weight: 700; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--gs-5); font-size: var(--fs-14); }
.lb-row .rank { width: 26px; font-family: var(--font-secondary); font-weight: 800; color: var(--gs-35); }
.lb-row:first-child .rank { color: var(--color-yellow-50); }
.lb-row .nm { flex: 1; font-weight: 600; }
.lb-row .nm a { text-decoration: none; color: inherit; }
.lb-row .vl { font-family: var(--font-secondary); font-weight: 800; }
.bar-mini { height: 5px; border-radius: 3px; background: var(--gs-10); margin-top: 4px; }
.bar-mini i { display: block; height: 100%; border-radius: 3px; background: var(--color-secondary-50); }

/* badges & profiles */
.badge-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--gs-20); background: #fff; border-radius: var(--r-50); padding: 7px 14px; font-size: var(--fs-14); font-weight: 600; margin: 0 6px 8px 0; }
.badge-chip .ic { font-size: 16px; }
.profile-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.avatar-lg { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; color: #fff; font-family: var(--font-secondary); font-size: 1.7rem; font-weight: 800; }
.stat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pill { background: #fff; border: 1px solid var(--gs-10); border-radius: var(--r-12); box-shadow: var(--sh-1); padding: 10px 16px; min-width: 84px; text-align: center; }
.pill b { display: block; font-family: var(--font-secondary); font-size: var(--fs-20); }
.pill span { font-size: var(--fs-12); color: var(--gs-60); text-transform: uppercase; letter-spacing: .06em; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }

/* community */
.lf-card { background: #fff; border: 1px solid var(--gs-10); border-left: 4px solid var(--color-secondary-50); border-radius: var(--r-12); box-shadow: var(--sh-3); padding: 14px 16px; margin-bottom: 12px; }
.lf-card .kind { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--color-secondary-50); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.lf-card.team { border-left-color: var(--color-brand-navy); } .lf-card.team .kind { background: var(--color-brand-navy); }
.lf-card.match { border-left-color: var(--color-yellow-50); } .lf-card.match .kind { background: var(--color-yellow-50); color: #4a3200; }
.lf-card h3 { font-size: var(--fs-16); margin: 0 0 4px; }
.lf-card p { color: var(--gs-60); font-size: var(--fs-14); margin: 0 0 6px; }
.lf-card .meta { font-size: var(--fs-12); color: var(--gs-35); }

/* sponsors strip */
.sponsor-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.sponsor-strip span { border: 1px dashed var(--gs-20); border-radius: var(--r-50); padding: 8px 16px; font-size: var(--fs-14); color: var(--gs-60); background: #fff; }

/* forms (auth, create) */
.auth-wrap { max-width: 440px; margin: 0 auto; padding: 40px 0 80px; }
.form-card { background: #fff; border: 1px solid var(--gs-10); border-radius: var(--r-14); box-shadow: var(--sh-3); padding: 26px; }
.form-err { background: #fdecea; border: 1px solid var(--color-primary-40); color: var(--color-primary-70); border-radius: var(--r-8); padding: 10px 14px; font-size: var(--fs-14); margin-bottom: 14px; display: none; }
.form-err.show { display: block; }
.demo-note { font-size: var(--fs-12); color: var(--gs-60); background: var(--gs-5); border-radius: var(--r-8); padding: 10px 12px; margin-top: 14px; }
.demo-note code { background: #fff; border: 1px solid var(--gs-10); border-radius: 4px; padding: 1px 5px; }

/* form controls across cricket pages */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: var(--fs-13, 13px); font-weight: 600; color: var(--gs-60); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-16); color: var(--gs-90);
  background: #fff; border: 1px solid var(--gs-20); border-radius: var(--r-10, 10px);
  padding: 12px 14px; box-shadow: var(--sh-1); appearance: none;
  background-image: none; transition: border-color var(--dur-exit), box-shadow var(--dur-exit);
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666667' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-secondary-50); box-shadow: 0 0 0 3px var(--focus-ring); }
.form-note { font-size: var(--fs-13, 13px); color: var(--gs-60); margin-top: 8px; }
.score-strip .ss-overs { display: inline; white-space: nowrap; font-size: var(--fs-14); }
.score-strip .ss-score { white-space: nowrap; }
@media (max-width: 420px) { .score-strip .ss-score { font-size: 1.35rem !important; } }

/* home hero quick chips */
.hero-live-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-live-chips a {
  display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none;
  font-size: var(--fs-14); font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #ffffff3d; background: #ffffff14; backdrop-filter: blur(4px);
}
.hero-live-chips a:hover { background: #ffffff26; }