/* ============ CSS Variables — Dark / Light themes ============ */
:root, [data-theme="dark"] {
  --bg: #0a0e16; --card: #10151f; --card2: #161d2a; --border: #232c3d;
  --text: #f2f5fa; --muted: #93a1b8; --primary: #f5b60d; --primary-ink: #14100a;
  --green: #2ecc71; --red: #ff5252; --amber: #f5b60d; --navbg: #070a10;
}
[data-theme="light"] {
  --bg: #f6f4ee; --card: #ffffff; --card2: #f1ede1; --border: #ded7c2;
  --text: #1c1710; --muted: #6b6350; --primary: #b07f00; --primary-ink: #ffffff;
  --green: #1d9e57; --red: #d63a3a; --amber: #b07f00; --navbg: #171207;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.pos { color: var(--green); } .neg { color: var(--red); }

/* Navbar — gold tournament style */
.navbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 10px 20px; background: var(--navbg); border-bottom: 2px solid var(--primary);
  position: sticky; top: 0; z-index: 20; }
.brand { font-size: 1.05rem; font-weight: 800; color: #f2f5fa; letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: 8px; }
.brand span { color: var(--primary); text-transform: uppercase; }
.brand-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; }
.nav-toggle { display: none; background: none; border: none; color: #f2f5fa; font-size: 1.4rem; cursor: pointer; }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.nav-links a { color: #c8d2e2; padding: 7px 10px; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  border-bottom: 2px solid transparent; border-radius: 0; }
.nav-links a:hover { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; background: none; }
.nav-links .hl { color: var(--primary); }
.nav-links .logout { color: var(--red); }
.nav-links .btn-nav { background: var(--primary); color: var(--primary-ink); border-radius: 8px;
  padding: 8px 14px; font-weight: 800; }
.nav-links .btn-nav:hover { border-bottom-color: transparent; color: var(--primary-ink); filter: brightness(1.08); }
.theme-btn { background: var(--card2); border: 1px solid var(--border); color: var(--text);
  border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; }
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .nav-links.open { display: flex; }
}

.container { max-width: 1160px; margin: 0 auto; padding: 22px 16px 64px; }
h1 { margin: 8px 0 14px; font-size: 1.55rem; }
h2 { margin: 26px 0 12px; font-size: 1.18rem; }
h3 { margin: 4px 0 10px; font-size: 1rem; }
.muted { color: var(--muted); } .small { font-size: .83rem; }
.footer { text-align: center; color: var(--muted); padding: 16px; border-top: 1px solid var(--border); }
.hero { text-align: center; padding: 22px 0 8px; }
.hero h1 { font-size: 2rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* Flash + toasts */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash-success { background: rgba(46,204,113,.12); border-color: var(--green); color: var(--green); }
.flash-error   { background: rgba(255,82,82,.12); border-color: var(--red); color: var(--red); }
.flash-info    { background: rgba(46,124,246,.12); border-color: var(--primary); color: var(--primary); }
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { padding: 10px 16px; border-radius: 8px; background: var(--card2); border: 1px solid var(--border);
  color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,.3); animation: slidein .2s ease; }
.toast.error { border-color: var(--red); color: var(--red); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.stat-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 1.45rem; font-weight: 700; margin-top: 4px; }
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.match-card { display: flex; flex-direction: column; gap: 6px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px; color: var(--text); }
.match-card:hover { border-color: var(--primary); text-decoration: none; }
.match-card.live { border-color: var(--red); }
.row-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 8px; color: var(--text); }
.row-card:hover { border-color: var(--primary); text-decoration: none; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 16px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; margin: 10px 0; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
.table th { background: var(--card2); color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(46,124,246,.05); }
.table tr.highlight td { background: rgba(46,204,113,.10); }
.table.compact th, .table.compact td { padding: 5px 8px; font-size: .84rem; }

/* Badges & chips */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.badge-live { background: var(--red); color: #fff; }
.badge-scheduled { background: var(--primary); color: var(--primary-ink); }
.badge-completed { background: var(--card2); color: var(--muted); border: 1px solid var(--border); }
.badge-abandoned { background: #616161; color: #eee; }
.badge-cap { background: var(--amber); color: #000; }
.badge-vc { background: #90a4ae; color: #000; }
.team-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .72rem; font-weight: 700;
  background: var(--c, var(--primary)); color: #fff; }

/* Forms */
input, select, textarea { background: var(--card2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font-size: .9rem; font-family: inherit; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
label { display: inline-flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
label.chk { flex-direction: row; align-items: center; gap: 6px; }
label.chk input { width: auto; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card2); color: var(--text); cursor: pointer; font-size: .9rem; font-family: inherit; }
.btn:hover { border-color: var(--primary); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 700; }
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-sm { padding: 4px 10px; font-size: .78rem; }
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.inline-form label { min-width: 120px; flex: 0 1 auto; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filters input { width: auto; }
.team-toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0; }

/* Auth */
.auth-card { max-width: 420px; margin: 40px auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 30px; }
.auth-card h1 { text-align: center; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }

/* Match center / scoring */
.score-line { display: block; font-size: .92rem; }
.score-big { font-size: 1.05rem; margin: 4px 0; }
.score-big .huge { font-size: 1.9rem; font-weight: 800; margin: 0 8px; }
.result-banner { background: rgba(46,204,113,.12); border: 1px solid var(--green); color: var(--green);
  padding: 10px 14px; border-radius: 8px; margin: 10px 0; }
.this-over { margin-top: 8px; color: var(--muted); }
.ball-result { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  border-radius: 50%; background: var(--card2); border: 1px solid var(--border); font-size: .75rem;
  font-weight: 700; padding: 0 4px; margin: 0 2px; color: var(--text); }
.ball-result.b { background: var(--primary); border-color: var(--primary); color: #fff; }
.ball-result.w { background: var(--red); border-color: var(--red); color: #fff; }
.commentary { display: flex; flex-direction: column; gap: 6px; }
.ball-row { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: .88rem; }
.ball-num { color: var(--muted); min-width: 34px; font-variant-numeric: tabular-nums; }

/* Retired-hurt / injury badge (scorecard) + non-ball notices (commentary) */
.rh-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .6rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; vertical-align: middle;
  background: rgba(198,40,40,.16); color: #e05a5a; border: 1px solid rgba(198,40,40,.42); }
.rh-text { color: #e05a5a; font-weight: 700; }
/* Bowler replaced mid-over — muted note, deliberately NOT dismissal-styled */
.bwl-sub { display: inline-block; margin-left: 6px; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; color: var(--muted); white-space: nowrap; cursor: help; }
.comm-event { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; background: rgba(198,40,40,.1); border: 1px solid rgba(198,40,40,.32); color: var(--text); }
.comm-event .ce-ico { font-size: 1.1rem; line-height: 1; }
.comm-event.drs { background: rgba(245,182,13,.1); border-color: rgba(245,182,13,.38); }

/* Scoring pad */
.pad-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
@media (max-width: 700px) { .pad-grid { grid-template-columns: repeat(4, 1fr); } }
.pad { padding: 18px 0; font-size: 1.15rem; font-weight: 700; border-radius: 10px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--border); color: var(--text); }
.pad:hover { border-color: var(--primary); }
.pad-b { background: var(--primary); border-color: var(--primary); color: #fff; }
.pad-e { color: var(--amber); }
.pad-w { background: var(--red); border-color: var(--red); color: #fff; }

/* Modal */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
  align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px;
  width: min(430px, 92vw); display: flex; flex-direction: column; gap: 12px; }

/* Admin user rows */
.user-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0; }

/* Article */
.article-body { line-height: 1.7; margin-top: 14px; font-size: 1rem; }

/* ============ v2: hero, tiles, charts, avatars, live panel ============ */

/* Hero with optional banner image + gradient */
.hero-banner { position: relative; border-radius: 16px; overflow: hidden; padding: 0; margin-bottom: 18px;
  background: linear-gradient(120deg, #123a7a 0%, #2e7cf6 45%, #7c3aed 100%);
  background-size: cover; background-position: center; }
.hero-inner { background: linear-gradient(120deg, rgba(10,16,28,.72), rgba(10,16,28,.45));
  padding: 34px 24px; text-align: center; color: #fff; }
.hero-inner h1 { color: #fff; font-size: 2.1rem; margin: 6px 0; }
.hero-inner .muted { color: #cfd9ea; }
.hero-sub { color: #ffd76e; font-weight: 600; letter-spacing: .04em; }
.hero-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.12); padding: 6px; }
.hero-emoji { font-size: 2.6rem; }

/* Icon stat tiles with colored accents */
.tiles .tile { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--primary); }
.tile-ico { font-size: 1.6rem; }
.t-blue { border-left-color: #3b82e0; } .t-purple { border-left-color: #9c4dcc; }
.t-amber { border-left-color: #e8a11c; } .t-red { border-left-color: #d64545; }

/* Horizontal bar charts (labels in text ink, thin marks, rounded data ends) */
.chart { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: 56px 1fr 64px; gap: 10px; align-items: center; }
.hbar-label { display: flex; align-items: center; gap: 6px; }
.hbar-label.wide { min-width: 0; }
.hbar .hbar-label.wide { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hbar:has(.hbar-label.wide) { grid-template-columns: minmax(120px, 38%) 1fr 48px; }
.hbar-track { background: var(--card2); border-radius: 4px; height: 14px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; transition: width .4s ease; }
.hbar-fill.primary { background: var(--primary); }
.hbar-fill.green { background: var(--green); }
.hbar-value { font-size: .82rem; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* Team logo images & player avatars */
.logo-img { border-radius: 6px; object-fit: contain; vertical-align: middle; background: var(--card2); }
.avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; display: inline-flex;
  align-items: center; justify-content: center; }
.avatar-txt { background: var(--card2); border: 1px solid var(--border); color: var(--muted); font-weight: 700; }
.match-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Live panel: run-rate chips, new-ball flash */
.live-panel { border-color: var(--red); }
.rr-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rr-chip { background: var(--card2); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px; font-size: .85rem; color: var(--muted); }
.rr-chip b { color: var(--text); margin-left: 4px; }
.rr-chip.req { border-color: var(--amber); color: var(--amber); }
.rr-chip.req b { color: var(--amber); }
.flash-new { animation: newball 1.2s ease; }
@keyframes newball { from { background: rgba(46,124,246,.25); } to { background: transparent; } }

/* ===== Digital ID Card ===== */
.idcard-wrap { display:inline-flex; flex-direction:column; gap:10px; align-items:center; max-width:100%; }
.idcard { width:340px; max-width:100%; background:linear-gradient(160deg,#0d1220,#0a0e16); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.idcard-top { background:linear-gradient(90deg,var(--accent,#f5b60d),#f5b60d); padding:10px 14px; }
.idcard-org { display:flex; align-items:center; gap:10px; color:#14100a; font-weight:800; font-size:.95rem; }
.idcard-org img { width:34px; height:34px; object-fit:contain; }
.idcard-mark { font-size:1.6rem; }
.idcard-org small { display:block; font-size:.58rem; letter-spacing:.08em; font-weight:700; opacity:.75; }
.idcard-body { display:flex; gap:14px; padding:16px 14px 10px; }
.idcard-photo { width:88px; height:106px; object-fit:cover; border-radius:10px; border:2px solid var(--accent,#f5b60d); flex:0 0 auto; }
.idcard-photo-txt { display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; font-weight:800; }
.idcard-name { font-weight:800; font-size:1.12rem; color:#fff; }
.idcard-role { color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.08em; margin:2px 0 8px; }
.idcard-line { color:#c9d4e5; font-size:.8rem; margin:3px 0; word-break:break-all; }
.idcard-bottom { background:#fff; margin:10px 12px 12px; border-radius:8px; padding:8px 10px 4px; }
.idcard-barcode { width:100%; height:38px; display:block; }
.idcard-code { text-align:center; font-family:monospace; font-weight:700; color:#111; font-size:.8rem; letter-spacing:.2em; }
.idcard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:18px; }

/* ===== Global image safety (no oversized logos anywhere) ===== */
main img { max-width: 100%; }
.brand-logo { width: 36px; height: 36px; object-fit: contain; }

/* ===== Upload hints ===== */
.upload-hint { display:block; font-size:.72rem; color:var(--muted,#8a94a6); margin-top:3px; font-weight:400; }

/* ===== Ground map (scorer) ===== */
.gm-zone { cursor:pointer; transition: fill .12s; }
.gm-zone:hover { fill: rgba(245,182,13,.4); }

/* ===== Ball strip (scrollable over-by-over) ===== */
.ball-strip-wrap { display:flex; align-items:center; gap:8px; margin:10px 0; }
.ball-strip-team { flex:0 0 auto; }
.ball-strip { display:flex; gap:0; overflow-x:auto; padding:6px 2px; scrollbar-width:thin;
  border:1px solid var(--border); border-radius:10px; background:var(--card); flex:1; min-width:0; }
.strip-over { display:inline-flex; align-items:center; gap:5px; padding:0 10px; border-right:2px solid var(--border); white-space:nowrap; }
.strip-over:last-child { border-right:0; }
.strip-runs { font-size:.7rem; font-weight:800; color:var(--primary); margin-right:2px; white-space:nowrap; }
.strip-ball { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 4px; border-radius:50%; background:var(--card2); border:1px solid var(--border);
  font-size:.7rem; font-weight:700; }
.strip-ball.b { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.strip-ball.w { background:#d64545; color:#fff; border-color:#d64545; }

/* ===== Commentary over blocks ===== */
.over-block { border:1px solid var(--border); border-radius:12px; margin:14px 0; overflow:hidden; }
.over-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--card2);
  padding:8px 14px; border-bottom:1px solid var(--border); }
.over-no { font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; }
.over-sum { font-weight:700; }
.over-score { margin-left:auto; font-weight:800; }
.over-meta { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:6px 14px; font-size:.8rem; color:var(--muted,#8a94a6); border-bottom:1px dashed var(--border); }
.over-block .ball-row { margin:0; border-radius:0; border-bottom:1px solid var(--border); }
.over-block .ball-row:last-child { border-bottom:0; }

/* ===== Manhattan chart ===== */
.manhattan { display:flex; align-items:flex-end; gap:6px; overflow-x:auto; padding:10px 4px 4px; min-height:150px; }
.man-group { display:flex; align-items:flex-end; gap:2px; position:relative; padding-bottom:16px; }
.man-bar { width:14px; border-radius:3px 3px 0 0; position:relative; min-height:2px; }
.man-w { position:absolute; top:-12px; left:0; right:0; text-align:center; color:#d64545; font-size:8px; }
.man-x { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:.65rem; color:var(--muted,#8a94a6); }

/* ===== Details table ===== */
.details-table th { width:220px; text-align:left; color:var(--primary); vertical-align:top; }

/* ===== Stat sections ===== */
.graph-panel svg { display:block; }

/* ===== Site footer (gold, like homepage) ===== */
.site-footer { background:#070a10; border-top:2px solid var(--primary); margin-top:40px; }
.sf-cols { max-width:1100px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px; padding:30px 20px 16px; }
.sf-cols h4 { color:var(--primary); margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; }
.sf-cols a { display:block; color:#c9d4e5; text-decoration:none; padding:3px 0; font-size:.88rem; }
.sf-cols a:hover { color:var(--primary); }
.sf-cols p { color:#8a94a6; font-size:.85rem; margin:0; }
.sf-bottom { text-align:center; color:#5c6575; font-size:.78rem; padding:12px; border-top:1px solid #131a26; }

/* ===== Mobile optimisation ===== */
@media (max-width: 760px) {
  .container { padding: 12px 10px; }
  h1, .match-title { font-size: 1.25rem; flex-wrap: wrap; }
  .two-col { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .table { display:block; overflow-x:auto; white-space:nowrap; }
  .inline-form, .team-toolbar { flex-direction: column; align-items: stretch; }
  .inline-form label, .team-toolbar label { width: 100%; }
  .pad-grid { grid-template-columns: repeat(4, 1fr); }
  .filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .filters .btn { white-space:nowrap; }
  .idcard { width: 100%; }
  /* keep "Over N · runs · wkt   TEAM x/y" on one line on phones */
  .over-head { gap:8px; font-size:.8rem; flex-wrap:nowrap; white-space:nowrap; }
  .over-head > span { min-width:0; }
  .over-sum { overflow:hidden; text-overflow:ellipsis; }
  .over-score { margin-left:auto; width:auto; flex:0 0 auto; }
  .score-big { font-size:1rem; flex-wrap:wrap; }
  .huge { font-size:1.6rem; }
  .man-bar { width:10px; }
  .sf-cols { padding:22px 14px 10px; gap:18px; }
  .navbar { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .pad-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== v5: richer body background (no more plain) ===== */
body {
  background:
    radial-gradient(ellipse 900px 480px at 85% -8%, rgba(245,182,13,.09), transparent 60%),
    radial-gradient(ellipse 700px 420px at -10% 30%, rgba(46,124,246,.07), transparent 60%),
    radial-gradient(ellipse 800px 500px at 55% 115%, rgba(156,77,204,.06), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 44px, rgba(255,255,255,.012) 44px 46px),
    var(--bg);
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 900px 480px at 85% -8%, rgba(176,127,0,.08), transparent 60%),
    radial-gradient(ellipse 700px 420px at -10% 30%, rgba(46,124,246,.06), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 44px, rgba(0,0,0,.014) 44px 46px),
    var(--bg);
}

/* ===== v5: two-line brand (same style as homepage) ===== */
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { font-size:1.7rem; }
.brand-logo { width:40px; height:40px; object-fit:contain; }
.brand-txt { display:flex; flex-direction:column; line-height:1.05; }
.brand-t1 { font-weight:900; letter-spacing:.04em; color:var(--primary); font-size:1.05rem; text-transform:uppercase; }
.brand-t2 { font-size:.6rem; letter-spacing:.28em; color:#c9d4e5; text-transform:uppercase; }
html[data-theme="light"] .brand-t2 { color:#fff9; }

/* ===== v5: back button ===== */
.page-back { display:inline-flex; align-items:center; gap:4px; margin:2px 0 10px; padding:5px 14px;
  border:1px solid var(--border); border-radius:999px; background:var(--card);
  color:var(--primary); font-weight:700; font-size:.8rem; text-decoration:none; }
.page-back:hover { border-color:var(--primary); background:var(--card2); }

/* ===== v5: match page 50/50 — commentary left, stats right ===== */
.match-duo { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.duo-left, .duo-right { min-width:0; }
.duo-left .commentary { max-height:1400px; overflow-y:auto; padding-right:6px; scrollbar-width:thin; }
@media (max-width: 980px) { .match-duo { grid-template-columns:1fr; } }

/* ===== v5: certificate ===== */
.cert-wrap { display:flex; flex-direction:column; gap:14px; align-items:center; }
.cert { width:100%; max-width:920px; background:linear-gradient(135deg,#fdf6e3,#f6ead0);
  border:8px solid #b8860b; border-radius:6px; padding:8px; box-shadow:0 16px 44px rgba(0,0,0,.5); color:#3b3b3b; }
.cert-inner { border:2px solid #d4af37; border-radius:3px; padding:26px 34px; }
.cert-head { display:flex; align-items:center; gap:16px; }
.cert-logo { width:74px; height:74px; object-fit:contain; }
.cert-org { font-family:Georgia,serif; font-weight:800; font-size:1.6rem; color:#7a5c00; letter-spacing:.03em; }
.cert-season { font-family:Georgia,serif; font-style:italic; color:#9c7c1c; }
.cert-medal { margin-left:auto; font-size:2.8rem; }
.cert-title { margin:16px auto 6px; text-align:center; background:#b8860b; color:#fff; font-weight:800;
  letter-spacing:.12em; padding:9px 26px; border-radius:999px; width:fit-content; font-size:1rem; }
.cert-award { text-align:center; font-family:Georgia,serif; font-weight:800; font-size:1.7rem; color:#a03030;
  text-transform:uppercase; letter-spacing:.06em; margin:8px 0 14px; }
.cert-body { display:flex; gap:26px; align-items:center; }
.cert-photo { width:150px; height:185px; object-fit:cover; border-radius:12px; border:4px solid #b8860b; flex:0 0 auto; }
.cert-photo-txt { display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:Georgia,serif; font-size:4.5rem; font-weight:800; }
.cert-text { text-align:center; flex:1; font-family:Georgia,serif; }
.cert-presented { font-style:italic; color:#6b5310; margin:0; }
.cert-name { font-size:2.2rem; font-weight:800; color:#1c1c1c; margin:6px 0 2px;
  border-bottom:3px solid #d4af37; display:inline-block; padding:0 26px 4px; }
.cert-team { font-weight:700; color:#7a5c00; font-size:1.1rem; margin:8px 0; }
.cert-reason { color:#3b3b3b; font-size:1.02rem; }
.cert-signs { display:flex; justify-content:space-between; align-items:flex-end; margin-top:26px; gap:16px; }
.cert-sign, .cert-date { text-align:center; flex:1; }
.cert-sign img { height:56px; object-fit:contain; }
.sign-space { height:56px; }
.sign-line { border-top:2px solid #7a5c00; margin:4px 18px 6px; }
.sign-name { font-family:Georgia,serif; font-weight:800; color:#1c1c1c; }
.sign-role { font-size:.68rem; font-weight:800; letter-spacing:.18em; color:#9c7c1c; }
@media (max-width: 700px) { .cert-body { flex-direction:column; } .cert-inner { padding:16px; } }

/* ===== v5: premium admin & bolder site ===== */
h1 { background:linear-gradient(90deg, var(--text,#eef2f9), var(--primary)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; font-weight:900; letter-spacing:.01em; }
h2 { font-weight:800; border-left:4px solid var(--primary); padding-left:10px; }
.match-card { position:relative; overflow:hidden; transition:transform .16s, box-shadow .16s, border-color .16s;
  background:linear-gradient(160deg, var(--card), var(--card2)); }
.match-card::before { content:''; position:absolute; inset:0 auto auto 0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--primary), transparent 70%); opacity:0; transition:opacity .16s; }
.match-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35); border-color:var(--primary); }
.match-card:hover::before { opacity:1; }
.stat-card { background:linear-gradient(160deg, var(--card), var(--card2)); border-top:3px solid var(--primary);
  transition:transform .16s; }
.stat-card:hover { transform:translateY(-2px); }
.stat-card:nth-child(2) { border-top-color:#2e7cf6; }
.stat-card:nth-child(3) { border-top-color:#9c4dcc; }
.stat-card:nth-child(4) { border-top-color:#d64545; }
.stat-card:nth-child(5) { border-top-color:#1f9d55; }
.stat-card:nth-child(6) { border-top-color:#e8a11c; }
.panel { background:linear-gradient(165deg, var(--card), var(--card2)); }
.table thead th { background:linear-gradient(180deg, var(--card2), var(--card)); color:var(--primary);
  text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; }
.btn-primary { background:linear-gradient(135deg, #ffd257, var(--primary)); box-shadow:0 3px 12px rgba(245,182,13,.25); }
.btn-primary:hover { box-shadow:0 5px 18px rgba(245,182,13,.4); }
.result-banner { background:linear-gradient(90deg, rgba(245,182,13,.16), transparent);
  border-left:4px solid var(--primary); font-weight:700; }
/* Scorer console — resume / pick-a-match cards */
.sec-title { font-size:1rem; margin:22px 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.sc-teams { font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sc-resume { color:var(--primary); font-size:1.05rem; }
.sc-resume-btn { align-self:flex-start; margin-top:6px; }
/* Player recent-form chip strip + team head-to-head */
.form-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.form-lbl { font-size:.68rem; font-weight:800; letter-spacing:.1em; color:var(--muted); margin-right:2px; }
.form-chip { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px;
  padding:0 8px; border-radius:8px; font-weight:800; font-size:.82rem; color:#fff; }
.form-chip.f-hi { background:#1f9d55; }
.form-chip.f-mid { background:#2e7cf6; }
.form-chip.f-lo { background:#5b6472; }
.form-chip.f-duck { background:#d64545; }
.h2h-win { color:#1f9d55; font-weight:800; }
.h2h-loss { color:#d64545; font-weight:800; }

/* Clickable team head-to-head rows */
.h2h-row { cursor:pointer; }
.h2h-row:hover { background:rgba(255,255,255,.04); }
.h2h-caret { color:var(--muted); transition:transform .15s ease; width:20px; }
.h2h-row.h2h-open .h2h-caret { transform:rotate(90deg); color:var(--primary); }
.h2h-detail > td { background:rgba(0,0,0,.12); padding:10px 12px; }
.h2h-detail .row-card { margin:6px 0; }

/* Player profile action buttons (compare + share) */
.player-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 4px; }

/* Compare players page — classes namespaced .cmp-card/.cmp-pick to avoid the match.php
   "Scoring Breakdown" .cmp-head/.cmp-row/.cmp-v component defined lower in this file. */
.cmp-pick { align-items:flex-end; gap:12px; flex-wrap:wrap; }
.cmp-pick label { display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:.85rem;
  color:var(--muted); flex:1 1 200px; min-width:0; }
.cmp-pick input { width:100%; }
.cmp-vs { font-weight:900; color:var(--primary); align-self:center; padding-bottom:8px; }
.cmp-heads { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.cmp-card { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:16px; border-radius:12px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
.cmp-card b { font-size:1.05rem; }
.cmp-card.cmp-lead { border-color:var(--primary); box-shadow:0 0 0 2px rgba(161,29,46,.25), var(--shadow); }
.cmp-wins { font-size:.78rem; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; }
/* Only 3 short columns — keep it a real full-width fixed table so it never triggers the global
   mobile ".table{display:block}" shrink-to-content rule (which left a big empty gap on phones). */
.cmp-table { display:table; width:100%; table-layout:fixed; white-space:normal; }
.cmp-table td { text-align:center; vertical-align:middle; }
.cmp-table .cmp-mid { color:var(--muted); font-weight:600; width:40%; }
.cmp-table .cmp-a, .cmp-table .cmp-b { width:30%; }
.cmp-table .cmp-win { color:#1f9d55; }
.cmp-table thead .cmp-mid { color:var(--muted); }

/* Records board — min(320px,100%) so a single column never exceeds a narrow phone (no right-side blank space) */
.rec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); gap:16px; }
.rec-grid .panel { overflow-x:auto; }          /* wide 4-col tables scroll inside the card, page never scrolls */
.rec-grid .panel h2 { margin-top:0; font-size:1.05rem; }
.rec-list { list-style:none; margin:0; padding:0; }
.rec-list li { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border); }
.rec-list li:last-child { border-bottom:0; }
.rec-pos { width:34px; text-align:center; font-size:1.05rem; }
.rec-rank { color:var(--muted); font-weight:800; }
.rec-who { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.rec-who b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-val { font-weight:800; color:var(--primary); white-space:nowrap; }
.rec-val small { color:var(--muted); font-weight:600; }
@media (max-width:520px){ .cmp-heads { gap:8px; } .cmp-card { padding:12px 8px; } .cmp-vs { display:none; } }

/* ===== v5.1: vibrant classic certificate (matches reference design) ===== */
.certx { position:relative; width:100%; max-width:980px; aspect-ratio:38/25; overflow:hidden;
  border-radius:8px; background:#f7f1e4; color:#3a3a3a; box-shadow:0 18px 50px rgba(0,0,0,.55);
  font-family:Arial, sans-serif; text-align:center; }
.cx-splash-l { position:absolute; inset:0; background:radial-gradient(ellipse 46% 72% at 4% 62%, rgba(96,48,168,.9), rgba(96,48,168,.42) 55%, transparent 75%); }
.cx-splash-r { position:absolute; inset:0; background:radial-gradient(ellipse 42% 68% at 97% 55%, rgba(245,150,30,.92), rgba(245,160,40,.4) 55%, transparent 75%); }
.cx-corner { position:absolute; width:24%; height:22%; background:#131735; }
.cx-corner.tl { top:0; left:0; clip-path:polygon(0 0, 100% 0, 0 100%); border-bottom:3px solid #d4af37; }
.cx-corner.br { bottom:0; right:0; clip-path:polygon(100% 100%, 0 100%, 100% 0); }
.cx-frame { position:absolute; inset:10px; border:4px solid #c9930e; border-radius:5px; pointer-events:none; }
.cx-frame::after { content:''; position:absolute; inset:8px; border:1.5px solid #e8c15a; border-radius:3px; }
.cx-batsman { position:absolute; left:2%; top:26%; width:21%; }
.cx-trophy { position:absolute; right:1%; top:36%; width:20%; }
.cx-medal { position:absolute; top:0; right:6%; width:96px; z-index:3; }
.cx-medal-ribbon { width:56px; height:150px; margin:0 auto; background:#131735;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.cx-medal-disc { position:absolute; top:36px; left:50%; transform:translateX(-50%);
  width:88px; height:88px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 38% 32%, #ffe9a8, #e3b33c 55%, #a8770a); box-shadow:0 4px 12px rgba(0,0,0,.4);
  color:#131735; line-height:1.1; }
.cx-medal-disc::before { content:''; position:absolute; inset:9px; border:2px solid #7a5c00; border-radius:50%; }
.cx-medal-disc .crown { font-size:1rem; }
.cx-medal-disc .txt { font-weight:900; font-size:1rem; letter-spacing:.02em; }
.cx-medal-disc .stars { font-size:.55rem; letter-spacing:.2em; }
.cx-head { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; margin-top:3.5%; z-index:2; }
.cx-logo { width:84px; height:84px; object-fit:contain; }
.cx-logo-fallback { font-size:56px; display:flex; align-items:center; justify-content:center; }
.cx-org1 { font-weight:900; font-size:clamp(1.4rem, 3.4vw, 2.5rem); color:#141b3d; letter-spacing:.02em; line-height:1; }
.cx-org2 { font-weight:900; font-size:clamp(1.2rem, 3vw, 2.15rem); color:#c9930e; letter-spacing:.04em; line-height:1.1; }
.cx-sub { font-weight:700; font-size:clamp(.6rem, 1.1vw, .85rem); letter-spacing:.22em; color:#3a3a3a; margin-top:5px; }
.cx-cert { position:relative; z-index:2; font-family:Georgia, serif; font-weight:800; letter-spacing:.28em;
  font-size:clamp(1.6rem, 4.6vw, 3.4rem); margin-top:1%;
  background:linear-gradient(90deg, #1c2a6b, #5a2ea0, #1c2a6b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cx-of { position:relative; z-index:2; font-family:Georgia, serif; font-weight:700; letter-spacing:.34em;
  font-size:clamp(.7rem, 1.4vw, 1rem); color:#3a3a3a; }
.cx-ribbon { position:relative; z-index:2; width:fit-content; margin:1.4% auto 0; padding:.55em 2.6em;
  background:#5a1f96; color:#fff; font-weight:900; letter-spacing:.12em; font-size:clamp(.85rem, 1.9vw, 1.35rem);
  clip-path:polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%); }
.cx-ribbon .star { color:#e8c15a; }
.cx-presented { position:relative; z-index:2; margin-top:1.6%; font-weight:800; letter-spacing:.18em;
  font-size:clamp(.6rem, 1.15vw, .85rem); color:#3a3a3a; }
.cx-name { position:relative; z-index:2; font-family:"Segoe Script", "Brush Script MT", cursive;
  font-weight:700; color:#141b3d; font-size:clamp(1.8rem, 5.2vw, 3.9rem); line-height:1.15; }
.cx-flourish { position:relative; z-index:2; color:#c9930e; font-size:clamp(.6rem, 1.1vw, .85rem); letter-spacing:.1em; }
.cx-team { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:.8%; color:#5a1f96; font-weight:900; font-size:clamp(1rem, 2.1vw, 1.5rem); }
.cx-team img { width:38px; height:38px; object-fit:contain; }
.cx-reason { position:relative; z-index:2; margin-top:.7%; font-size:clamp(.72rem, 1.5vw, 1.05rem); line-height:1.5; }
.cx-reason b { color:#c9930e; }
.cx-bottom { position:absolute; z-index:2; bottom:5.5%; left:8%; right:8%;
  display:flex; align-items:flex-end; justify-content:space-between; gap:2%; }
.cx-sign { flex:1; max-width:32%; }
.cx-sign img { height:52px; object-fit:contain; }
.cx-sign-space { height:52px; }
.cx-sign-line { border-top:2px solid #141b3d; margin:2px 8% 6px; }
.cx-sign-name { font-weight:900; color:#141b3d; font-size:clamp(.7rem, 1.4vw, 1rem); }
.cx-sign-role { font-weight:700; color:#5a5a5a; font-size:clamp(.5rem, .9vw, .68rem); letter-spacing:.05em; }
.cx-laurel { flex:0 0 auto; }
.cx-date { font-weight:900; color:#141b3d; font-size:clamp(.75rem, 1.5vw, 1.05rem); margin-top:-6px; }
.cx-date-lbl { font-weight:700; color:#5a5a5a; font-size:clamp(.5rem, .9vw, .68rem); letter-spacing:.2em; }
.cx-qr { position:absolute; z-index:3; left:3%; bottom:4%; display:flex; align-items:center; gap:12px;
  background:rgba(19,23,53,.92); border-radius:10px; padding:10px 16px 10px 10px; text-align:left; }
.cx-qr svg { width:64px; height:64px; background:#fff; padding:3px; border-radius:4px; }
.cx-qr .q1 { color:#e8c15a; font-weight:900; font-size:.62rem; letter-spacing:.08em; }
.cx-qr .q2 { color:#fff; font-weight:800; font-size:.85rem; }
.cx-qr .q3 { color:#aab2c8; font-size:.62rem; }
@media (max-width: 720px) {
  .cx-qr { transform:scale(.72); transform-origin:bottom left; }
  .cx-medal { transform:scale(.72); transform-origin:top right; right:3%; }
}

/* cert: keep secretary signature clear of the QR block */
.cx-bottom { left:17%; right:7%; bottom:6.5%; }
.cx-qr { max-width:14.5%; padding:8px 10px; gap:8px; }
.cx-qr svg { width:52px; height:52px; }
.cx-qr .q2 { font-size:.7rem; word-break:break-all; }
.cx-qr { max-width:17%; }
.cx-qr .q1 { font-size:.56rem; }
.cx-qr .q2 { font-size:.66rem; }
.certx.has-bg { background-size:cover; background-position:center; }
/* custom cert background: always show the WHOLE image (stretch to the 3:2 canvas, no crop) */
.certx.has-bg { background-size:100% 100% !important; background-position:center; background-repeat:no-repeat; }
.cert-toggles { display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; margin:4px 0 10px;
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.cert-toggles .chk { font-size:.8rem; }
/* ================= v6 — navy/purple pro theme (mockup restyle) ================= */
html[data-theme="dark"], :root {
  --bg:#05070f; --card:#0b101f; --card2:#101731; --border:#1d2643;
  --violet:#8b5cf6; --violet2:#6d28d9; --blue:#3b82f6; --green:#22c55e; --red:#ef4444;
}
body {
  background:
    radial-gradient(ellipse 900px 500px at 90% -10%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(ellipse 800px 460px at -10% 25%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(ellipse 900px 520px at 50% 118%, rgba(245,182,13,.07), transparent 60%),
    var(--bg);
}

/* ---- page headers with icon chip + subtitle ---- */
.page-head { display:flex; align-items:center; gap:16px; margin:6px 0 4px; }
.page-ico { flex:0 0 auto; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; border-radius:14px; background:linear-gradient(145deg, rgba(139,92,246,.25), rgba(139,92,246,.08));
  border:1px solid rgba(139,92,246,.5); box-shadow:0 0 22px rgba(139,92,246,.25); }
.page-head h1 { margin:0; }
.page-sub { color:var(--muted,#8a94a6); margin:2px 0 18px 68px; font-size:.95rem; }

/* ---- tab bar ---- */
.tabbar { display:flex; gap:4px; border-bottom:2px solid var(--border); margin:14px 0 0; overflow-x:auto; }
.tabbar a { padding:12px 18px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem;
  color:var(--muted,#8a94a6); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.tabbar a:hover { color:#fff; }
.tabbar a.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ---- status pills ---- */
.pill { display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:10px;
  font-weight:800; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.pill::before { font-size:.8em; }
.pill-scheduled { background:linear-gradient(135deg,#ffd257,var(--primary)); color:#14100a; }
.pill-scheduled::before { content:'\1F550'; }
.pill-live { background:linear-gradient(135deg,#f0554d,#d02b23); color:#fff; box-shadow:0 0 14px rgba(214,55,45,.5); }
.pill-live::before { content:'\25CF'; animation:pulse-dot 1.2s infinite; }
.pill-completed { background:linear-gradient(135deg,#2ea653,#1d7a3a); color:#fff; }
.pill-completed::before { content:'\2713'; }
.pill-abandoned { background:#3a4257; color:#cbd5e1; }
@keyframes pulse-dot { 50% { opacity:.35; } }

/* ---- team vs chips ---- */
.vs-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:10px;
  background:var(--card2); border:1.5px solid var(--c,#2e7cf6); font-weight:900; letter-spacing:.03em; }
.vs-chip img { width:26px; height:26px; object-fit:contain; }
.vs-sep { color:var(--muted,#8a94a6); font-weight:700; font-size:.78rem; margin:0 8px; }
.match-row-link { color:inherit; text-decoration:none; }
.result-box { display:inline-block; background:var(--card2); border:1px solid var(--border); border-radius:10px;
  padding:8px 14px; font-size:.82rem; }
.result-box b { display:block; }
.table-foot { display:flex; justify-content:space-between; align-items:center; color:var(--muted,#8a94a6);
  font-size:.85rem; padding:12px 4px; }

/* ---- W/L form circles ---- */
.form-dots { display:inline-flex; gap:6px; }
.form-dot { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.72rem; color:#fff; }
.form-dot.w { background:#22a04f; } .form-dot.l { background:#e04545; } .form-dot.n { background:#5a6478; }

/* ---- points table look ---- */
.pts-table thead th { background:linear-gradient(90deg, rgba(109,40,217,.55), rgba(139,92,246,.3)); color:#e6d9ff; }
.pts-rank { font-weight:900; font-size:1.05rem; }
.pts-val { font-weight:900; font-size:1.05rem; }
.pts-1 { color:var(--primary); } .pts-2, .pts-3 { color:#a78bfa; } .pts-mid { color:#60a5fa; }
.pts-low { color:#e8a11c; } .pts-zero { color:#ef4444; }
.pts-legend { display:flex; flex-wrap:wrap; gap:18px; padding:12px 6px; color:var(--muted,#8a94a6); font-size:.82rem; }
.pts-legend b.w { color:#22a04f; } .pts-legend b.l { color:#e04545; } .pts-legend b.p { color:#a78bfa; }
.pts-legend b.n { color:#60a5fa; } .pts-legend b.g { color:var(--primary); }

/* ---- stat tiles (dashboard) ---- */
.tile-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin:14px 0; }
.stat-tile { position:relative; background:linear-gradient(160deg,var(--card),var(--card2)); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px 20px; overflow:hidden; }
.stat-tile .t-label { font-size:.68rem; font-weight:800; letter-spacing:.12em; color:var(--muted,#8a94a6); text-transform:uppercase; }
.stat-tile .t-value { font-size:1.9rem; font-weight:900; margin:4px 0 2px; }
.stat-tile .t-sub { font-size:.75rem; color:var(--muted,#8a94a6); }
.stat-tile .t-ico { position:absolute; top:14px; right:14px; font-size:1.5rem; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.35); }
.stat-tile::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--tc,#8b5cf6), transparent); }

/* ---- leaderboard cards ---- */
.lb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin:8px 0 18px; }
.lb-card { background:linear-gradient(160deg,var(--card),var(--card2)); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.lb-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.lb-head b { color:var(--tc,#a78bfa); font-size:.95rem; }
.lb-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px dashed var(--border); font-size:.87rem; }
.lb-row .rk { width:18px; color:var(--muted,#8a94a6); font-weight:700; }
.lb-row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.lb-row .tm { flex:0 0 auto; }
.lb-row .vl { flex:0 0 auto; font-weight:900; color:var(--tc,#a78bfa); }

/* ---- match hero ---- */
.mx-hero { background:linear-gradient(160deg,#0a0f22,#0d1330 60%,#131a3d); border:1px solid var(--border);
  border-radius:16px; padding:26px 20px 18px; text-align:center; margin:12px 0; }
.mx-hero-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.mx-team { display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:900;
  letter-spacing:.05em; font-size:clamp(.95rem,2.2vw,1.5rem); text-transform:uppercase; }
.mx-team img, .mx-team .team-chip { width:clamp(58px,9vw,96px); height:clamp(58px,9vw,96px); object-fit:contain; }
.mx-team .team-chip { display:flex; align-items:center; justify-content:center; font-size:1.4rem; border-radius:18px; }
.mx-mid { min-width:220px; }
.mx-score { font-size:clamp(2.2rem,6vw,3.6rem); font-weight:900; line-height:1; }
.mx-overs { color:var(--primary); font-weight:800; font-size:1.05rem; }
.mx-status { margin-bottom:10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.mx-views { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:560px){ .mx-views { margin-left:0; width:100%; } .mx-views .btn { flex:1; text-align:center; } }
.mx-result { color:#4ade80; font-weight:700; margin-top:10px; }
.mx-share { margin-top:10px; text-align:center; }
.mx-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:16px; border-top:1px solid var(--border); padding-top:12px; }
.mx-strip span { padding:2px 16px; border-right:1px solid var(--border); font-size:.85rem; color:#c9d4e5; }
.mx-strip span:last-child { border-right:0; }
.mx-strip b { color:#fff; }
/* the score board (hero) shows on the Live tab only — on every viewport */
#matchHeader[data-active]:not([data-active="live"]) .mx-hero { display:none; }
/* by default the wrapper is transparent so date/venue and season/over/toss stay on their own lines (mobile) */
.mx-strip-wrap { display:contents; }
/* desktop: pull both strips onto a single centered line */
@media (min-width:761px){
  .mx-strip-wrap { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    margin-top:16px; border-top:1px solid var(--border); padding-top:12px; }
  .mx-strip-wrap .mx-strip { margin-top:0; border-top:0; padding-top:0; }
  .mx-strip-wrap .mx-strip-meta { border-left:1px solid var(--border); }
}

/* section tabs on match page (in-flow — no floating over content while scrolling) */
.sec-tabs { display:flex; gap:2px; background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:5px; margin:10px 0; overflow-x:auto; }
.sec-tabs a { padding:9px 16px; border-radius:9px; font-weight:800; font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted,#8a94a6); text-decoration:none; white-space:nowrap; }
.sec-tabs a:hover { color:#fff; background:var(--card2); }
.sec-tabs a.on { background:linear-gradient(135deg,#ffd257,var(--primary)); color:#14100a; }

/* fall of wickets chips + partnership card */
.fow-chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.fow-chip { display:inline-flex; align-items:baseline; gap:7px; background:var(--card2);
  border:1px solid var(--border); border-radius:999px; padding:6px 13px; white-space:nowrap; }
.fow-chip b { font-size:.92rem; }
.fow-chip span { font-size:.72rem; color:var(--muted,#8a94a6); }
.pt-bar { height:6px; border-radius:4px; background:var(--border); overflow:hidden; margin-top:6px; }
.pt-bar i { display:block; height:100%; background:linear-gradient(90deg,#22c55e,#4ade80); }

/* over-block restyle (mockup) */
.over-head { background:linear-gradient(90deg, rgba(139,92,246,.18), var(--card2)); }
.over-no { color:var(--primary); }
.over-score { color:#a78bfa; }
/* ================= v7 — admin shell (sidebar + topbar + dashboard) ================= */
.adm-body { margin:0; }
.adm-shell { display:grid; grid-template-columns:252px 1fr; min-height:100vh; }
.adm-side { position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;
  background:#070a18; border-right:1px solid var(--border); padding:16px 12px; scrollbar-width:thin; }
.adm-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 16px; text-decoration:none;
  border-bottom:1px solid var(--border); margin-bottom:12px; }
.adm-brand img { width:44px; height:44px; object-fit:contain; }
.adm-brand-mark { font-size:1.9rem; }
.adm-brand b { display:block; color:var(--primary); font-size:.95rem; line-height:1.15; letter-spacing:.02em; }
.adm-brand small { display:block; color:#8a94a6; font-size:.55rem; letter-spacing:.24em; margin-top:2px; }
.adm-nav { display:flex; flex-direction:column; gap:3px; }
.adm-nav a { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:11px;
  color:#aab2c8; text-decoration:none; font-weight:600; font-size:.86rem; transition:background .12s, color .12s; }
.adm-nav a .i { width:20px; text-align:center; }
.adm-nav a:hover { background:var(--card2); color:#fff; }
.adm-nav a.on { background:linear-gradient(135deg,#6d28d9,#8b5cf6); color:#fff;
  box-shadow:0 4px 16px rgba(139,92,246,.35); }
.adm-visit { margin-top:auto; text-align:center; padding:11px; border:1px solid var(--border);
  border-radius:11px; color:#c9d4e5; text-decoration:none; font-weight:700; font-size:.84rem; }
.adm-visit:hover { border-color:var(--primary); color:var(--primary); }

.adm-right { min-width:0; display:flex; flex-direction:column; }
.adm-top { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:14px;
  padding:12px 22px; background:rgba(7,10,24,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.adm-burger { display:none; background:none; border:1px solid var(--border); color:#fff;
  border-radius:9px; font-size:1.1rem; padding:5px 11px; cursor:pointer; }
.adm-top-title { margin:0; font-size:1.15rem; font-weight:800; border:0; padding:0; }
.adm-top-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.adm-chip { background:var(--card2); border:1px solid var(--border); border-radius:10px;
  padding:7px 13px; font-weight:800; font-size:.72rem; letter-spacing:.06em; white-space:nowrap; }
.adm-user { display:flex; align-items:center; gap:9px; background:var(--card2); border:1px solid var(--border);
  border-radius:12px; padding:5px 10px; }
.adm-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6d28d9,#8b5cf6); color:#fff; font-weight:900; }
.adm-user-txt b { display:block; font-size:.8rem; line-height:1.1; }
.adm-user-txt small { color:#8a94a6; font-size:.62rem; }
.adm-logout { color:#8a94a6; text-decoration:none; font-size:1rem; padding:2px 4px; }
.adm-logout:hover { color:#ef4444; }
.adm-main { padding:20px 24px 40px; }

/* dashboard stat cards */
.adm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:16px 0; }
.adm-stat { display:flex; align-items:center; gap:13px; background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid var(--border); border-radius:14px; padding:15px 16px; }
.adm-stat .ic { flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; font-weight:800; color:#fff;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff 12%), var(--c));
  box-shadow:0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.adm-stat small { display:block; font-size:.62rem; font-weight:800; letter-spacing:.12em; color:#8a94a6; }
.adm-stat b { display:block; font-size:1.45rem; line-height:1.15; }
.adm-stat span:not(.ic) span, .adm-stat div > span { font-size:.7rem; color:#8a94a6; }

/* dashboard nav cards */
.adm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:6px 0 18px; }
.adm-card { display:flex; align-items:center; gap:13px; background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid var(--border); border-radius:14px; padding:15px 16px; text-decoration:none; color:inherit;
  transition:transform .14s, border-color .14s, box-shadow .14s; }
.adm-card:hover { transform:translateY(-2px); border-color:var(--c,#8b5cf6); box-shadow:0 8px 22px rgba(0,0,0,.35); }
.adm-card .ic { flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.25rem;
  background:color-mix(in srgb, var(--c,#8b5cf6) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--c,#8b5cf6) 45%, transparent); }
.adm-card .tx { flex:1; min-width:0; }
.adm-card .tx b { display:block; font-size:.93rem; }
.adm-card .tx small { color:#8a94a6; font-size:.74rem; line-height:1.35; display:block; margin-top:2px; }
.adm-card .ch { color:#8a94a6; font-size:1.2rem; font-weight:700; }

/* system overview + activities */
.adm-two { display:grid; grid-template-columns:1fr 1.35fr; gap:16px; align-items:start; }
.adm-sys { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.adm-sys-rows { flex:1; min-width:220px; }
.adm-sys-rows > div { display:flex; justify-content:space-between; gap:10px; padding:9px 2px;
  border-bottom:1px dashed var(--border); font-size:.86rem; }
.adm-sys-rows span { color:#8a94a6; }
.adm-donut { width:130px; height:130px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(#8b5cf6 calc(var(--p) * 1%), var(--border) 0); display:flex; align-items:center; justify-content:center; }
.adm-donut-in { width:100px; height:100px; border-radius:50%; background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.adm-donut-in b { font-size:1.35rem; }
.adm-donut-in span { font-size:.62rem; color:#8a94a6; }
.adm-acts { margin-top:10px; }
.adm-act { display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px dashed var(--border); font-size:.85rem; }
.adm-act .dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--c,#8b5cf6);
  box-shadow:0 0 8px var(--c,#8b5cf6); }
.adm-act .tx { flex:1; min-width:0; }
.adm-act .tm { color:#8a94a6; font-size:.74rem; white-space:nowrap; }

@media (max-width: 900px) {
  .adm-shell { grid-template-columns:1fr; }
  .adm-side { position:fixed; left:-270px; width:252px; z-index:100; transition:left .2s; }
  .adm-side.open { left:0; box-shadow:0 0 60px rgba(0,0,0,.6); }
  .adm-burger { display:block; }
  .adm-two { grid-template-columns:1fr; }
  .adm-main { padding:14px 12px 32px; }
  .adm-user-txt { display:none; }
  /* comfortable 44px touch targets on phones/tablets */
  .adm-burger, .adm-top .theme-btn { min-width:44px; min-height:44px; }
  .adm-main .btn-sm { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}
/* tiny phones (≤560px): keep the admin topbar within the viewport — no horizontal scroll */
@media (max-width: 560px) {
  .adm-top { gap:8px; padding:10px 12px; }
  .adm-top-right { gap:7px; }
  .adm-top-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .adm-top-right .adm-chip:not(.adm-chip-plan) { display:none; }   /* drop the season chip */
  .adm-chip-plan { max-width:112px; overflow:hidden; text-overflow:ellipsis; }
  .adm-chip { padding:6px 9px; font-size:.66rem; }
  .adm-user { padding:4px 6px; }
}
/* ================= v8 — real light mode (must stay LAST in this file) ================= */
html[data-theme="light"] {
  --bg:#f3f5fb; --card:#ffffff; --card2:#eef1f8; --border:#d9dfec;
  --text:#1b2437; --muted:#5c6880; --primary:#b07f00; --primary-ink:#ffffff;
  --green:#1d9e57; --red:#d63a3a; --amber:#b07f00; --navbg:#101623;
  --violet:#6d28d9; --blue:#2563eb;
}
html[data-theme="light"] body {
  color:var(--text);
  background:
    radial-gradient(ellipse 900px 500px at 90% -10%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(ellipse 800px 460px at -10% 25%, rgba(59,130,246,.07), transparent 60%),
    radial-gradient(ellipse 900px 520px at 50% 118%, rgba(176,127,0,.06), transparent 60%),
    var(--bg);
}
html[data-theme="light"] h1 {
  background:linear-gradient(90deg, var(--text), var(--primary));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* generic dark-hardcoded text → readable on white */
html[data-theme="light"] .mx-hero { background:linear-gradient(160deg,#ffffff,#eef1f8 60%,#e6ebf7); }
html[data-theme="light"] .mx-strip span { color:#3c465e; }
html[data-theme="light"] .mx-strip b,
html[data-theme="light"] .tabbar a:hover,
html[data-theme="light"] .sec-tabs a:hover,
html[data-theme="light"] .idcard-name { color:var(--text); }
html[data-theme="light"] .sec-tabs a:hover { background:var(--card2); }
html[data-theme="light"] .pts-table thead th {
  background:linear-gradient(90deg, rgba(109,40,217,.14), rgba(139,92,246,.07)); color:#4c2a8c; }
html[data-theme="light"] .over-head { background:linear-gradient(90deg, rgba(139,92,246,.10), var(--card2)); }
html[data-theme="light"] .over-score { color:#6d28d9; }
html[data-theme="light"] .stat-tile .t-ico { background:rgba(109,40,217,.08); border-color:rgba(109,40,217,.25); }
html[data-theme="light"] .lb-head b { color:#6d28d9; }
html[data-theme="light"] .result-box, html[data-theme="light"] .fow-chip { background:var(--card2); }
html[data-theme="light"] .match-card:hover { box-shadow:0 12px 28px rgba(20,30,60,.14); }
html[data-theme="light"] .strip-ball { background:#e4e9f5; }
html[data-theme="light"] .rr-chip { color:var(--text); }

/* admin shell in light mode */
html[data-theme="light"] .adm-side { background:#ffffff; border-right-color:var(--border); }
html[data-theme="light"] .adm-brand small { color:#8a94a6; }
html[data-theme="light"] .adm-nav a { color:#5c6880; }
html[data-theme="light"] .adm-nav a:hover { background:var(--card2); color:var(--text); }
html[data-theme="light"] .adm-nav a.on { color:#fff; }
html[data-theme="light"] .adm-visit { color:#3c465e; }
html[data-theme="light"] .adm-top { background:rgba(255,255,255,.94); }
html[data-theme="light"] .adm-burger { color:var(--text); border-color:var(--border); }
html[data-theme="light"] .adm-donut-in { background:var(--card); }
html[data-theme="light"] .adm-stat b, html[data-theme="light"] .adm-card .tx b { color:var(--text); }
html[data-theme="light"] .table thead th { color:var(--primary); }
html[data-theme="light"] .site-footer { background:#eef1f8; border-top-color:#d9dfec; }
html[data-theme="light"] .sf-cols h4 { color:#5a3d00; }
html[data-theme="light"] .sf-cols a { color:#374151; }
html[data-theme="light"] .sf-cols p, html[data-theme="light"] .sf-cols .muted { color:#5c6880; }
html[data-theme="light"] .sf-bottom { color:#5c6880; border-top-color:#d9dfec; background:#eef1f8; }
/* hard guarantee: correct body base colour per theme */
html[data-theme="dark"] body { background-color:#05070f; color:#f2f5fa; }
html[data-theme="light"] body { background-color:#f3f5fb; color:#1b2437; }

/* ===== v9 fixes ===== */
/* commentary: over-blocks were flex-shrinking inside the scroll column, clipping ball rows */
.commentary > * { flex-shrink: 0; }
.over-block { overflow: visible; border-radius: 12px; }
.over-block .ball-row span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* live panel tables stay inside their frame on any width */
.two-col > * { min-width: 0; }
.live-panel .two-col > div { min-width: 0; }
.live-panel table { width: 100%; }
@media (max-width: 760px) {
  /* live mini-tables fit the card like CricInfo — Batter·R·B·4s·6s·SR and
     Bowler·O·M·R·W·Econ — number columns shrink to digits, no overlap, no scroll */
  .live-panel table { display: table; width: 100%; white-space: normal; }
  .live-panel .table.compact th,
  .live-panel .table.compact td { padding: 7px 6px; text-align: center; }
  /* name columns take the slack and may wrap; the striker star col stays tiny */
  .live-panel .two-col > table th:nth-child(2),
  .live-panel .two-col > table td:nth-child(2),
  .live-panel .two-col > div > table th:nth-child(1),
  .live-panel .two-col > div > table td:nth-child(1) {
    text-align: left; width: auto; white-space: normal; overflow-wrap: anywhere; }
  .live-panel .two-col > table td:nth-child(n+3),
  .live-panel .two-col > table th:nth-child(n+3),
  .live-panel .two-col > div > table td:nth-child(n+2),
  .live-panel .two-col > div > table th:nth-child(n+2) { width: 1%; white-space: nowrap; }
  /* batter table: keep star·Batter·R·B·4s·6s·SR — hide only 1s(5) & 2s(6) */
  .live-panel .two-col > table th:nth-child(5), .live-panel .two-col > table td:nth-child(5),
  .live-panel .two-col > table th:nth-child(6), .live-panel .two-col > table td:nth-child(6) { display: none; }
  /* bowler table: keep Bowler·O·M·R·W·Econ — hide 0s(6),4s(7),6s(8) */
  .live-panel .two-col > div > table th:nth-child(n+6):nth-child(-n+8),
  .live-panel .two-col > div > table td:nth-child(n+6):nth-child(-n+8) { display: none; }
  /* batter/bowler photos shown small in the live mini-tables (avatar() emits inline 24px) */
  .live-panel .two-col td .avatar {
    width: 22px !important; height: 22px !important; font-size: 9px !important;
    vertical-align: middle; flex: 0 0 auto; }
  .live-panel .two-col td .muted.small { font-size: .68rem; }
}

/* CricInfo-style scorecard: the dismissal sits UNDER the batter's name (not in its own
   column), and every number column shrinks to its digits — so all of R/B/4s/6s/SR fit in
   one frame with no horizontal scroll, at any width. */
#scorecard .sc-bat td:not(.bat-cell), #scorecard .sc-bat th:not(:first-child),
#scorecard .sc-bowl td:not(:first-child), #scorecard .sc-bowl th:not(:first-child) {
  width: 1%; white-space: nowrap; text-align: center; }
#scorecard .sc-bat th:first-child, #scorecard .sc-bowl th:first-child { text-align: left; }
.bat-cell { display: flex; align-items: center; gap: 9px; }
#scorecard .sc-bat td, #scorecard .sc-bowl td { vertical-align: middle; }
.bat-av { flex: 0 0 auto; }
.bat-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bat-nm { line-height: 1.25; }
.bat-dis { display: block; line-height: 1.2; }
.bat-dis:empty { display: none; }

@media (max-width: 760px) {
  #scorecard .two-col { display: block; }
  #scorecard .two-col > table { width: 100%; margin: 0 0 16px; font-size: .82rem; }
  #scorecard .sc-bat td:not(.bat-cell), #scorecard .sc-bat th:not(:first-child),
  #scorecard .sc-bowl td:not(:first-child), #scorecard .sc-bowl th:not(:first-child) {
    padding: 9px 7px; }
  #scorecard .sc-bat td.bat-cell, #scorecard .sc-bowl td:first-child { padding: 9px 4px; }
  #scorecard .bat-nm, #scorecard .bat-dis { white-space: normal; overflow-wrap: anywhere; }
  #scorecard .rh-badge { display: inline; padding: 1px 5px; }
  #scorecard .sc-bowl td:first-child { white-space: normal; overflow-wrap: anywhere; }
  /* keep the batter photo — just compact it so the row still fits the frame */
  #scorecard .bat-cell { gap: 7px; }
  #scorecard .bat-av img, #scorecard .bat-av .avatar,
  #scorecard .sc-bowl td:first-child img, #scorecard .sc-bowl td:first-child .avatar {
    width: 26px; height: 26px; }
}

/* match-stats sections fit the phone frame — no horizontal page scroll (#2) */
@media (max-width: 760px) {
  #stats .stats-grid, #stats .stats-grid .stat-sec { min-width: 0; }
  #stats .stat-sec .two-col { grid-template-columns: 1fr; }
  #stats .stat-sec .two-col > * { min-width: 0; }
  #stats .stat-sec { padding: 14px 14px; }
}

/* mobile: hero team names stay inside the card */
@media (max-width: 760px) {
  .mx-hero { padding: 16px 10px 12px; }
  /* Stack the two team crests side-by-side on top, and give the live score its OWN
     full-width row below — otherwise the middle column squeezes the team name to 0px
     and the collapsed badge shows as a stray bracket. */
  .mx-hero-top { grid-template-columns: 1fr 1fr; row-gap: 12px; column-gap: 10px; }
  .mx-hero-top > .mx-team:first-child { grid-column: 1; grid-row: 1; }
  .mx-hero-top > .mx-team:last-child  { grid-column: 2; grid-row: 1; }
  .mx-mid { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; }
  /* once the score rows render, the big top crests are redundant on phones (the score rows
     already carry each team's badge + name) — hide them; kept for scheduled matches (no scores) */
  .mx-hero-top.has-scores { display: block; }
  .mx-hero-top.has-scores > .mx-team { display: none; }
  .mx-hero-top.has-scores > .mx-mid { width: 100%; }
  .mx-team { font-size: .74rem; letter-spacing: .01em; min-width: 0; word-break: break-word; gap: 6px; }
  /* team_badge() emits an inline width/height (88px) — override it so the crest isn't huge on phones */
  .mx-team img, .mx-team .team-chip { width: 46px !important; height: 46px !important; font-size: 1rem !important; }
  .mx-score { font-size: 1.5rem !important; }
  .mx-strip span { padding: 2px 8px; font-size: .74rem; }
  /* season · over · toss kept together as one compact line */
  .mx-strip-meta { border-top: 0; padding-top: 4px; margin-top: 2px; flex-wrap: nowrap; gap: 5px; }
  .mx-strip-meta span { font-size: .64rem !important; padding: 2px 6px !important; white-space: nowrap; }
  /* drop the "Season:" / "Toss:" / "match" word labels only on phones to fit one line (desktop keeps them) */
  .mx-strip-meta .mlbl { display: none; }
}

/* light theme: proper highlight for W / 4 / 6 balls */
html[data-theme="light"] .ball-result { background: #e4e9f5; color: #1b2437; border-color: #c9d2e6; }
html[data-theme="light"] .ball-result.b, html[data-theme="light"] .strip-ball.b {
  background: #e8a11c; border-color: #c9880e; color: #14100a; }
html[data-theme="light"] .ball-result.w, html[data-theme="light"] .strip-ball.w {
  background: #d63a3a; border-color: #b52f2f; color: #fff; }
html[data-theme="light"] .strip-ball { background: #e4e9f5; border-color: #c9d2e6; color: #1b2437; }
html[data-theme="light"] .strip-runs { color: #8a5f00; }

/* ===== v10: statistics leaderboard player cards ===== */
.pl-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:18px; margin-top:16px; }
.pl-card { position:relative; display:block; background:linear-gradient(160deg,var(--card),var(--card2));
  border:1.5px solid color-mix(in srgb, var(--c,#8b5cf6) 55%, transparent); border-radius:16px;
  padding:30px 14px 14px; text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .14s, box-shadow .14s, border-color .14s; }
.pl-card:hover { transform:translateY(-3px); border-color:var(--c,#8b5cf6);
  box-shadow:0 10px 26px rgba(0,0,0,.4); text-decoration:none; }
.pl-rank { position:absolute; top:0; right:0; background:var(--c,#8b5cf6); color:#fff;
  font-weight:900; font-size:.8rem; padding:4px 12px; border-radius:0 14px 0 12px; letter-spacing:.05em; }
.pl-medal { position:absolute; top:6px; left:10px; font-size:1.3rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.pl-name { font-weight:900; font-size:1.02rem; color:var(--primary); margin:0 0 10px; padding-right:34px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-body { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.pl-body .avatar, .pl-body .avatar-txt { border:2px solid var(--c,#8b5cf6); }
.pl-teambox { display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:7px 14px; min-width:78px; }
.pl-teambox small { font-size:.55rem; font-weight:800; letter-spacing:.18em; color:var(--muted,#8a94a6); }
.pl-teambox b { font-size:.8rem; }
.pl-stats { display:flex; border-top:1px dashed var(--border); padding-top:9px; }
.pl-stat { flex:1; text-align:center; min-width:0; }
.pl-stat small { display:block; font-size:.6rem; font-weight:800; letter-spacing:.06em;
  color:var(--muted,#8a94a6); text-transform:uppercase; white-space:nowrap; }
.pl-stat b { font-size:.95rem; }
.pl-stat.hl b { color:var(--primary); font-size:1.1rem; }
/* cert: secretary block fully clear of the QR panel */
.cx-bottom { left:23%; right:6%; }
.cx-qr { max-width:15%; bottom:3.4%; }
.cx-qr .q2 { font-size:.62rem; }
/* ================= v11 batch ================= */

/* 9) stronger, more visible borders in both themes */
html[data-theme="dark"], :root { --border:#2c3a5e; }
html[data-theme="light"] { --border:#b9c4da; }

/* 3) auction console: clickable team bid buttons */
.au-pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:8px 0 12px; }
.au-teambtn { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--card2); border:2px solid var(--border); border-radius:12px; padding:12px 8px 10px;
  cursor:pointer; color:inherit; transition:transform .12s, border-color .12s, box-shadow .12s; }
.au-teambtn img { width:38px; height:38px; object-fit:contain; }
.au-teambtn b { font-size:.95rem; }
.au-teambtn small { color:var(--muted,#8a94a6); font-size:.68rem; }
.au-teambtn:hover { transform:translateY(-2px); border-color:var(--c,#8b5cf6); }
.au-teambtn.sel { border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.25); }
.au-teambtn.leading { border-color:var(--primary); background:rgba(245,182,13,.1);
  box-shadow:0 0 16px rgba(245,182,13,.35); }
.au-teambtn .lead-tag { position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#ffd257,var(--primary)); color:#14100a; font-size:.58rem; font-weight:900;
  padding:2px 9px; border-radius:999px; white-space:nowrap; }

/* 6) big live match cards */
.live-big-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px; padding:16px 0; }
.live-big { display:block; background:linear-gradient(160deg,#0a0f22,#0d1330 60%,#131a3d);
  border:1.5px solid var(--border); border-radius:16px; padding:20px; text-decoration:none; color:inherit;
  text-align:center; transition:transform .14s, border-color .14s, box-shadow .14s; }
.live-big:hover { transform:translateY(-3px); border-color:#f0554d; box-shadow:0 12px 30px rgba(214,55,45,.25); text-decoration:none; }
html[data-theme="light"] .live-big { background:linear-gradient(160deg,#ffffff,#eef1f8); }
.lb-teams { display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 10px; }
.lb-side { display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:900; font-size:1rem; min-width:0; }
.lb-vs { color:var(--muted,#8a94a6); font-weight:800; }
.lb-scores { margin:8px 0 10px; }
.lb-scores > div { padding:3px 0; font-size:1.05rem; }
.lb-scores .sc { font-weight:900; font-size:1.4rem; color:var(--primary); margin:0 6px; }

/* 7) match-stats grid arrangement */
.stats-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.stats-grid .stat-sec { background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:0; }
.stats-grid .stat-sec h3 { margin-top:0; border-left:4px solid var(--primary); padding-left:10px; }
.stats-grid .stat-sec .two-col { gap:12px; }
.duo-right .stats-grid { grid-template-columns:1fr; }
@media (min-width: 1200px) {
  .mtab[data-tab="stats"] .stats-grid { grid-template-columns:1fr 1fr; }
  .mtab[data-tab="stats"] .stat-sec[data-sec="manhattan"],
  .mtab[data-tab="stats"] .stat-sec[data-sec="runrate"],
  .mtab[data-tab="stats"] .stat-sec[data-sec="worm"] { grid-column:1 / -1; }
}

/* 8) stats leaderboard cards: big square photo + logo-only team */
.pl-photo { width:92px; height:92px; object-fit:cover; border-radius:14px;
  border:2.5px solid var(--c,#8b5cf6); flex:0 0 auto; }
.pl-photo-txt { display:inline-flex; align-items:center; justify-content:center; font-size:2.6rem; font-weight:900;
  color:#fff; background:linear-gradient(135deg,#6d28d9,#8b5cf6); }
.pl-teamlogo .logo-img, .pl-teamlogo .team-chip { width:46px !important; height:46px !important; border-radius:10px; }
.pl-body { justify-content:space-between; }

/* 10) fixtures: desktop table, mobile card list */
.fx-cards { display:none; }
.fx-card { display:block; background:var(--card2); border:1px solid var(--border); border-radius:12px;
  padding:12px; margin-bottom:10px; text-decoration:none; color:inherit; }
.fx-card .fx-top { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin-bottom:6px; }
.fx-card .fx-top .vs-chip { min-width:0; }
.fx-card .fx-top .pill { flex:0 0 auto; margin-left:auto; }
.fx-card .fx-res { color:#4ade80; font-weight:700; font-size:.85rem; margin-top:4px; }
@media (max-width: 760px) {
  .fx-desk { display:none; }
  .fx-cards { display:block; padding:12px 0; }
  .live-big-grid { grid-template-columns:1fr; }
}

/* cricinfo-style hero score rows: team left · runs right */
.score-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 6px; border-bottom:1px dashed var(--border); text-align:left; min-width:min(320px, 100%); }
.score-row:last-child { border-bottom:0; }
.sr-t { display:inline-flex; align-items:center; gap:9px; min-width:0; font-size:.95rem; }
.sr-t b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-r { font-weight:900; font-size:1.45rem; white-space:nowrap; }
.sr-r small { font-weight:700; font-size:.72rem; color:var(--primary); margin-left:4px; }
.score-row:not(.cur) .sr-r, .score-row:not(.cur) .sr-t { opacity:.75; }
.sr-r.sr-yet { font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.score-row.cur .sr-r { color:var(--primary); font-size:1.7rem; }
@media (max-width:760px) { .sr-r { font-size:1.2rem; } .score-row.cur .sr-r { font-size:1.4rem; } }
/* "on strike" marker drawn in CSS so it never depends on a font glyph (▸ tofus to "[" on some Android fonts) */
.on-strike { display:inline-block; width:0; height:0; vertical-align:middle;
  border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--gold,#e8b923); }

/* ===== v12: professional Match Stats ===== */
/* full-width sections (no cramped 2-col grid) */
.mtab[data-tab="stats"] .stats-grid { grid-template-columns:1fr !important; }
.stats-grid .stat-sec { padding:18px 22px; }

/* head-to-head comparison (Scoring Breakdown) */
.cmp-head { display:flex; justify-content:space-between; align-items:center; padding:6px 2px 12px;
  border-bottom:1px solid var(--border); margin-bottom:4px; }
.cmp-t { display:inline-flex; align-items:center; gap:9px; font-size:1.02rem; }
.cmp-row { display:grid; grid-template-columns:1fr 1.3fr 1fr; align-items:center; padding:9px 2px;
  border-bottom:1px dashed var(--border); }
.cmp-row.rule { border-bottom:2px solid var(--border); }
.cmp-row:last-child { border-bottom:0; }
.cmp-l { text-align:center; color:var(--muted); font-weight:700; font-size:.88rem; }
.cmp-v { justify-self:start; background:var(--card2); border:1px solid var(--border); border-radius:8px;
  padding:5px 14px; font-weight:900; font-size:.95rem; min-width:56px; text-align:center; }
.cmp-v.r { justify-self:end; }
.cmp-v.win { background:linear-gradient(135deg,#2563eb,#3b82f6); border-color:#3b82f6; color:#fff; }

/* Best Performances cards */
.stat-sec[data-sec="best"] .two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; }
.bp-card { background:var(--card2); border:1px solid var(--border); border-left:4px solid var(--tc,#8b5cf6);
  border-radius:14px; padding:14px 16px; }
.bp-team { display:flex; align-items:center; gap:10px; font-size:1.05rem; padding-bottom:10px;
  border-bottom:1px solid var(--border); }
.bp-sub { font-weight:900; font-size:.72rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase;
  margin:14px 0 6px; }
.bp-row { display:flex; align-items:center; gap:10px; padding:7px 0; }
.bp-rk { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--tc,#8b5cf6); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:.7rem; }
.bp-nm { flex:1; min-width:0; }
.bp-nm b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.bp-bar { display:block; height:7px; border-radius:5px; background:var(--border); margin-top:4px; overflow:hidden; }
.bp-bar i { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--tc,#8b5cf6),color-mix(in srgb,var(--tc,#8b5cf6) 55%,#fff)); }
.bp-bar.red i { background:linear-gradient(90deg,#ef4444,#f97316); }
.bp-vl { flex:0 0 auto; text-align:right; }
.bp-vl b { font-size:1.05rem; color:var(--primary); }
.bp-vl small { display:block; color:var(--muted); font-size:.66rem; }

/* Interactive wagon wheel — filters + zone breakdown */
.ww-card { background:var(--card2); border:1px solid var(--border); border-left:4px solid var(--tc,#8b5cf6);
  border-radius:14px; padding:14px 16px; }
.ww-filters { margin:12px 0 6px; }
.ww-filters select { width:auto; max-width:46%; padding:8px 10px; font-size:.82rem; }
.ww-runs { display:inline-flex; gap:6px; flex-wrap:wrap; }
.ww-row { display:grid; grid-template-columns:1fr 1.4fr auto; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px dashed var(--border); font-size:.86rem; }
.ww-row:last-child { border-bottom:0; }
.ww-bar { display:block; height:7px; border-radius:5px; background:var(--border); overflow:hidden; }
.ww-bar i { display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--tc,#8b5cf6),color-mix(in srgb,var(--tc,#8b5cf6) 55%,#fff)); }

/* Partnerships — names either side, tug bar center */
.stat-sec[data-sec="partnerships"] .two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; }
.pn-card { background:var(--card2); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.pn-team { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border);
  margin-bottom:6px; }
.pn-row { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px dashed var(--border); }
.pn-row:last-child { border-bottom:0; }
.pn-p { min-width:0; font-size:.86rem; }
.pn-p b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-p.r { text-align:right; }
.pn-mid { text-align:center; }
.pn-mid > b { font-size:.95rem; }
.pn-bar { display:block; height:8px; border-radius:5px; background:var(--border); margin-top:4px; overflow:hidden; }
.pn-bar i { display:block; height:100%; border-radius:5px; }

/* over-wise: cap height, cleaner */
.stat-sec[data-sec="overs"] .two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.stat-sec[data-sec="overs"] table { display:table; width:100%; white-space:normal; }

/* ===== hero: chase equation + win probability ===== */
.mx-chase { font-weight:900; font-size:1.02rem; margin-top:10px; color:var(--primary); }
.mx-rates { font-size:.82rem; color:#c9d4e5; margin-top:6px; }
html[data-theme="light"] .mx-rates { color:#3c465e; }
.mx-rates b { color:var(--primary); }
.wp-wrap { margin:12px auto 2px; max-width:380px; }
.wp-wrap small { display:block; font-size:.6rem; font-weight:900; letter-spacing:.2em; color:var(--muted); margin-bottom:4px; }
.wp-lbls { display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:4px; }
.wp-bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--border); }
.wp-bar i { display:block; height:100%; transition:width .6s; }
/* analysis strip — same look as the date/venue strip row */
.mx-strip2 { border-top:1px dashed var(--border); margin-top:0; padding-top:10px; }
.mx-strip2 .mx-chase-seg b { color:var(--primary); }
.mx-strip2 .wp-seg { display:inline-flex; align-items:center; gap:8px; }
.mx-strip2 .wp-bar { display:inline-flex; width:110px; height:9px; border-radius:6px; overflow:hidden;
  background:var(--border); vertical-align:middle; }
.mx-strip2 .wp-bar i { display:block; height:100%; transition:width .6s; }
/* analysis strip: everything on ONE line (scrolls sideways if too narrow) */
.mx-strip2 { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:thin; }
.mx-strip2 > span { white-space:nowrap; font-size:.78rem; padding:2px 12px; flex:0 0 auto; }
.mx-strip2 .wp-bar { width:80px; }
@media (min-width: 900px) { .mx-strip2 { justify-content:center; } }
/* mobile: analysis strip in 2 parts — chase line on top, rates+win% below */
@media (max-width: 760px) {
  .mx-strip2 { flex-wrap:wrap; overflow-x:visible; justify-content:center; row-gap:4px; }
  /* the chase target ("… need N runs from M overs") becomes a bold highlighted banner */
  .mx-strip2 .mx-chase-seg { flex:0 0 100%; box-sizing:border-box; max-width:100%;
    text-align:center; border-right:0; white-space:normal;
    padding:9px 10px; margin-bottom:8px; border-radius:10px;
    background:linear-gradient(90deg, rgba(232,185,35,.16), rgba(155,28,28,.16));
    border:1px solid var(--gold,#e8b923); font-size:.9rem !important; font-weight:800; line-height:1.3; }
  .mx-strip2 .mx-chase-seg b { color:var(--primary) !important; }
  /* show CRR · RRR · Proj · L5 · Win% — Proj sits right after CRR/RRR on phones too */
  .mx-strip2 .proj-seg { display:inline; }
  .mx-strip2 { flex-wrap:wrap; row-gap:4px; }
  .mx-strip2 > span { font-size:.57rem; padding:2px 4px; white-space:nowrap; letter-spacing:-.01em; }
  .mx-strip2 .wp-seg { flex-wrap:nowrap; gap:3px; }
}
@media (max-width: 760px) {
  .mx-strip2 > span { font-size:.66rem; padding:2px 5px; }
  .mx-strip2 .wp-bar { width:44px; height:7px; }
  .mx-strip2 .wp-seg { gap:4px; }
}
/* mobile 2-part strip: short labels, no bar, decimals tighten */
.lbl-short { display:none; }
@media (max-width: 760px) {
  .lbl-full { display:none; }
  .lbl-short { display:inline; }
  .mx-strip2 .wp-bar { display:none; }
  .mx-strip2 > span { border-right:1px solid var(--border); }
  .mx-strip2 > span:last-child { border-right:0; }
}

/* ===== v13: crisp modern scorer console ===== */
.score-panel { background:linear-gradient(160deg,#0a0f22,#0d1330 60%,#131a3d) !important;
  border:1.5px solid var(--border); border-radius:16px; color:#fff; }
html[data-theme="light"] .score-panel { background:linear-gradient(160deg,#ffffff,#eef1f8) !important; color:var(--text); }
.score-panel .huge { font-size:clamp(2.2rem,5vw,3.2rem); color:var(--primary); text-shadow:0 4px 22px rgba(245,182,13,.3); }
.pad-grid { gap:10px; }
.pad { height:64px; border-radius:14px; font-size:1.25rem; font-weight:900; border:1.5px solid var(--border);
  background:linear-gradient(160deg,var(--card),var(--card2)); color:var(--text); cursor:pointer;
  transition:transform .1s, box-shadow .1s, border-color .1s; }
.pad:hover { transform:translateY(-2px); border-color:var(--primary); }
.pad:active { transform:scale(.95); }
.pad-b { background:linear-gradient(135deg,#ffd257,var(--primary)); color:#14100a; border-color:var(--primary);
  box-shadow:0 4px 16px rgba(245,182,13,.3); }
.pad-e { background:linear-gradient(160deg,#1e3a8a,#2563eb); color:#fff; border-color:#3b82f6; font-size:.95rem; }
.pad-w { background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; border-color:#ef4444;
  box-shadow:0 4px 16px rgba(239,68,68,.35); font-size:1rem; letter-spacing:.06em; }
.this-over .ball-result { width:34px; height:34px; min-width:34px; font-size:.9rem; }
.rr-chips .rr-chip { font-size:.92rem; padding:8px 16px; border-radius:10px; }

/* partnership / DRS strip */
.pship-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:9px 8px; margin:10px 0; }
.pship-strip > span { padding:2px 14px; border-right:1px solid var(--border); font-size:.8rem;
  color:var(--muted); white-space:nowrap; }
.pship-strip > span:last-child { border-right:0; }
.pship-strip b { color:var(--text); }
.drs-tag { background:linear-gradient(135deg,#6d28d9,#8b5cf6); color:#fff; font-weight:900; font-size:.6rem;
  letter-spacing:.1em; border-radius:6px; padding:2px 8px; margin-left:6px; vertical-align:middle; }
@media (max-width:760px){ .pship-strip { max-width:100%; } .pship-strip > span { font-size:.7rem; padding:2px 8px; white-space:normal; overflow-wrap:anywhere; text-align:center; } }

/* ===== about page ===== */
.ab-hero { border-radius:18px; overflow:hidden; background:linear-gradient(160deg,#0a0f22,#131a3d);
  background-size:cover; background-position:center; border:1px solid var(--border); margin-bottom:14px; }
.ab-hero-in { display:flex; align-items:center; gap:18px; padding:34px 26px;
  background:linear-gradient(90deg, rgba(5,7,15,.85), rgba(5,7,15,.35)); }
.ab-logo { width:92px; height:92px; object-fit:contain; border-radius:18px; background:rgba(255,255,255,.06);
  padding:8px; border:1px solid rgba(255,255,255,.15); }
.ab-logo-txt { display:flex; align-items:center; justify-content:center; font-size:3rem; }
.ab-hero-in h1 { margin:0; color:#fff; -webkit-text-fill-color:#fff; background:none; font-size:clamp(1.5rem,4vw,2.3rem); }
.ab-hero-in p { margin:4px 0 0; color:var(--primary); font-weight:800; letter-spacing:.06em; }
.ab-contact { display:flex; align-items:center; gap:14px; background:var(--card2); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:10px; color:inherit; text-decoration:none; }
.ab-contact:hover { border-color:var(--primary); text-decoration:none; }
.ab-contact .ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; background:color-mix(in srgb, var(--c,#f5b60d) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c,#f5b60d) 45%, transparent); }
.ab-contact small { display:block; font-size:.6rem; font-weight:800; letter-spacing:.16em; color:var(--muted); }
/* let the icon stay fixed but the long email/venue text shrink + wrap on tiny screens */
.ab-contact .ic { flex:0 0 auto; }
.ab-contact > span:not(.ic) { min-width:0; }
.ab-contact b { overflow-wrap:anywhere; }
/* two-column admin/about grids: allow tracks to shrink below content min-width */
.adm-two > * { min-width:0; }

/* ===== v14: mockup-grade scoring console ===== */
.cons-grad { background:linear-gradient(90deg,#8b5cf6,#ec4899); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.sec-head { display:flex; align-items:center; gap:9px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; font-size:.92rem; margin-top:0; border-left:0; padding-left:0; }
.sec-head .sh-ic { width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center;
  justify-content:center; font-size:.95rem; background:color-mix(in srgb, var(--c,#8b5cf6) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--c,#8b5cf6) 50%, transparent); }

/* score hero */
.sc-hero { position:relative; overflow:hidden; border-radius:18px; border:1.5px solid var(--border);
  padding:22px 24px; margin-bottom:16px; color:#fff;
  background:
    radial-gradient(ellipse 40% 90% at 96% 50%, rgba(139,92,246,.35), transparent 70%),
    radial-gradient(ellipse 30% 70% at 78% 20%, rgba(245,182,13,.14), transparent 70%),
    linear-gradient(160deg,#0a0f22,#0d1330 55%,#161042); }
.sc-hero::after { content:'🏏'; position:absolute; right:4%; top:50%; transform:translateY(-50%) rotate(-15deg);
  font-size:5.5rem; opacity:.25; filter:drop-shadow(0 0 30px rgba(245,182,13,.6)); }
html[data-theme="light"] .sc-hero { color:var(--text);
  background:radial-gradient(ellipse 40% 90% at 96% 50%, rgba(139,92,246,.15), transparent 70%),
    linear-gradient(160deg,#ffffff,#eef1f8); }
.sc-main { display:flex; align-items:flex-start; gap:18px; position:relative; z-index:1; }
.sc-scorebox { flex:1; min-width:0; }
.sc-line { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sc-team { font-size:1.15rem; font-weight:900; }
.sc-score { font-size:clamp(2.2rem,5vw,3.2rem); font-weight:900; color:var(--primary); line-height:1;
  text-shadow:0 4px 24px rgba(245,182,13,.35); }
.sc-ov { color:#9aa3c0; font-weight:700; }
html[data-theme="light"] .sc-ov { color:var(--muted); }
.sc-target { background:linear-gradient(135deg,#f0554d,#d02b23); color:#fff; font-weight:800; font-size:.8rem;
  border-radius:9px; padding:7px 14px; box-shadow:0 4px 14px rgba(214,55,45,.4); }
.sc-rr { display:flex; gap:12px; margin:14px 0 10px; flex-wrap:wrap; }
.sc-rrbox { background:rgba(10,8,26,.6); border:1px solid var(--border); border-radius:12px; padding:10px 18px; }
html[data-theme="light"] .sc-rrbox { background:var(--card); }
.sc-rrbox small { display:block; font-size:.68rem; font-weight:700; color:#9aa3c0; border-bottom:2px solid var(--primary);
  padding-bottom:3px; margin-bottom:5px; }
html[data-theme="light"] .sc-rrbox small { color:var(--muted); }
.sc-rrbox b { font-size:1.3rem; color:var(--primary); }
.sc-rrbox.req b { color:#f0a04d; }

/* bowling stat circles */
.bw-circles { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.bw-c { width:74px; height:74px; border-radius:50%; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; background:var(--card2); border:1.5px solid var(--border); }
.bw-c b { font-size:1.05rem; }
.bw-c small { font-size:.52rem; font-weight:800; letter-spacing:.1em; color:var(--muted); margin-top:2px; }
.bw-c.hl { border-color:#8b5cf6; box-shadow:0 0 14px rgba(139,92,246,.35); }
.bw-c.hl b { color:#a78bfa; }

/* DRS cards */
.drs-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; }
@media (max-width:900px){ .drs-grid { grid-template-columns:1fr; } }
.drs-cards { display:grid; gap:10px; }
.drs-card { border-radius:14px; padding:12px 16px; border:1.5px solid color-mix(in srgb, var(--c,#8b5cf6) 60%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--c,#8b5cf6) 20%, var(--card)), var(--card2)); }
.drs-card .dc-t { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.drs-card small { display:block; font-size:.62rem; font-weight:800; letter-spacing:.1em; color:var(--muted); }
.drs-card .dc-n { font-size:1.45rem; font-weight:900; color:var(--primary); }
@media (max-width:760px){
  .sc-hero::after { display:none; }
  .bw-circles { justify-content:center; }
}
/* bowling rows: current + last bowler, compact rectangular chips */
.bw-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--card2); }
.bw-row.cur { border-color:var(--primary); background:rgba(245,182,13,.06); }
.bw-row:not(.cur) { opacity:.8; }
.bw-who { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.bw-who b { display:block; font-size:.9rem; }
.bw-who small { display:block; font-size:.56rem; font-weight:800; letter-spacing:.12em; color:var(--muted); }
.bw-row.cur .bw-who small { color:var(--primary); }
.bw-chips { display:inline-flex; gap:6px; flex-wrap:wrap; }
.bw-chips .bw-c { width:auto; height:auto; min-width:46px; border-radius:9px; padding:5px 9px;
  flex-direction:column; }
.bw-chips .bw-c b { font-size:.88rem; }
.bw-chips .bw-c small { font-size:.5rem; }

/* ===== v15: console hero info column + mobile-first console ===== */
.sc-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; position:relative; z-index:1; align-items:start; }
.sc-info { background:rgba(10,8,26,.55); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
html[data-theme="light"] .sc-info { background:var(--card); }
.sci-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.78rem; color:#c9d4e5;
  padding:4px 0; }
html[data-theme="light"] .sci-row { color:#3c465e; }
.sci-row b { color:#fff; }
html[data-theme="light"] .sci-row b { color:var(--text); }
.sci-row.chase b { color:var(--primary); }
.sci-div { border-top:1px dashed var(--border); margin:7px 0; }
.sc-hero::after { display:none; }

@media (max-width: 900px) {
  .sc-grid { grid-template-columns:1fr; gap:12px; }
}
/* mobile console: everything compact, Record Ball pinned right after the score */
@media (max-width: 760px) {
  main.container:has(#recordPanel) { display:flex; flex-direction:column; }
  main.container:has(#recordPanel) > * { order:5; }
  main.container:has(#recordPanel) > .page-back { order:0; }
  main.container:has(#recordPanel) > .page-head { order:1; }
  main.container:has(#recordPanel) > .page-sub { order:2; }
  main.container:has(#recordPanel) > .sc-hero { order:3; }
  main.container:has(#recordPanel) > #recordPanel { order:4; position:sticky; top:64px; z-index:45;
    box-shadow:0 10px 26px rgba(0,0,0,.45); }
  .sc-hero { padding:12px 10px; }
  .sc-score { font-size:1.8rem !important; }
  .sc-team { font-size:.95rem; }
  .sc-target { font-size:.64rem; padding:5px 9px; }
  .sc-rrbox { padding:6px 10px; } .sc-rrbox b { font-size:1rem; }
  .sc-line { gap:8px; }
  .pad { height:48px; font-size:1rem; border-radius:10px; }
  .pad-grid { gap:6px; margin:6px 0; }
  #recordPanel { padding:10px 10px 8px; }
  #recordPanel .sec-head { font-size:.76rem; margin-bottom:2px; }
  #recordPanel .sec-head .muted { display:none; }
  #recordPanel .team-toolbar { gap:6px; }
  .bw-row { padding:6px 8px; gap:6px; }
  .bw-chips { gap:4px; }
  .bw-chips .bw-c { min-width:34px; padding:3px 5px; }
  .bw-chips .bw-c b { font-size:.72rem; }
  .bw-who b { font-size:.8rem; }
  .panel { padding:12px 10px; }
  .sc-info { padding:9px 10px; }
  .sci-row { font-size:.7rem; }
  .this-over .ball-result { width:28px; height:28px; min-width:28px; font-size:.76rem; }
}
/* mobile hero: kill the dead space — tight rows, RR boxes deduped into the info line */
@media (max-width: 760px) {
  .sc-hero { padding:10px 10px 8px; margin-bottom:10px; }
  .sc-grid { gap:8px; }
  .sc-main { gap:10px; align-items:center; }
  .sc-main > .logo-img, .sc-main > .team-chip { width:44px !important; height:44px !important; }
  .sc-line { row-gap:2px; gap:8px; }
  .sc-rr { display:none; }            /* CRR/RRR/L5 already shown in the info panel line */
  .this-over { margin-top:4px; font-size:.78rem; }
  .sc-info { padding:8px 10px; }
  .sci-row { padding:2px 0; font-size:.68rem; gap:5px; }
  .sci-div { margin:4px 0; }
}

/* ===== v16: console mobile pass 2 (all mobile-only) ===== */
.mob-details { display:none; }
@media (max-width: 760px) {
  /* 0) record ball: no stickiness, natural position (after batting/bowling) */
  main.container:has(#recordPanel) > #recordPanel { position:static; top:auto; order:5; box-shadow:none; }
  /* 1) match details move after retired-hurt; hero keeps only the chase/rates/win% */
  .sci-details { display:none; }
  .mob-details { display:block; }
  /* 2) header (Scoring Console) — less height */
  .page-back { margin-bottom:4px; padding:4px 12px; font-size:.72rem; }
  .page-head { gap:8px; margin:0; }
  .page-ico { width:36px; height:36px; font-size:1.05rem; border-radius:10px; }
  .page-head h1 { font-size:1.05rem; }
  .page-head .pill { font-size:.6rem; padding:4px 10px; }
  .page-head .btn { padding:4px 10px; font-size:.68rem; }
  .page-sub { margin:2px 0 8px !important; font-size:.76rem; gap:6px !important; }
  .page-sub .logo-img, .page-sub .team-chip { width:20px !important; height:20px !important; }
  /* 3) batting & bowling squeezed */
  .two-col { gap:8px; }
  .two-col .panel { padding:8px; }
  .two-col .sec-head { font-size:.68rem; margin-bottom:4px; }
  .two-col .sec-head .sh-ic { width:24px; height:24px; font-size:.72rem; border-radius:7px; }
  .bw-row { padding:4px 6px; margin-bottom:5px; border-radius:9px; }
  .bw-who { gap:6px; }
  .bw-who .avatar, .bw-who .avatar-txt { width:26px !important; height:26px !important; font-size:9px !important; }
  .bw-who b { font-size:.74rem; }
  .bw-who small { font-size:.48rem; }
  .bw-chips { gap:3px; }
  .bw-chips .bw-c { min-width:29px; padding:2px 4px; border-radius:6px; }
  .bw-chips .bw-c b { font-size:.64rem; }
  .bw-chips .bw-c small { font-size:.42rem; }
}

/* console header: teams inline beside LIVE on desktop/tablet; sub-row on mobile only */
.head-teams { display:none; align-items:center; gap:8px; margin-left:14px; font-size:.9rem; }
@media (min-width: 761px) {
  .head-teams { display:inline-flex; }
  .cons-sub { display:none !important; }
}
/* mobile: squeeze remaining gaps in the console */
@media (max-width: 760px) {
  main.container:has(#recordPanel) { gap:0; }
  main.container:has(#recordPanel) .panel { margin:0 0 8px; }
  .two-col { gap:6px; margin:0 0 8px; }
  .two-col .panel { margin:0; padding:6px 7px; }
  .two-col .sec-head { margin-bottom:3px; }
  .bw-row { padding:3px 5px; margin-bottom:4px; }
  .bw-chips .bw-c { min-width:27px; padding:2px 3px; }
  .sc-hero { margin-bottom:8px; }
  #recordPanel .pad-grid { margin:4px 0; }
  .cons-sub { margin-bottom:6px !important; }
}
@media (max-width: 760px) {
  main.container:has(#recordPanel) .two-col .panel { margin:0; }
}

/* ===== v17: TEAMS page (mockup style) ===== */
.tm-hero { text-align:center; padding:26px 10px 8px; }
.tm-hero h1 { font-size:clamp(2.4rem,7vw,4rem); font-weight:900; letter-spacing:.06em; margin:0;
  background:linear-gradient(180deg,#fff,#b9c3d8 55%,#7c8699); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); font-style:italic; }
html[data-theme="light"] .tm-hero h1 { background:linear-gradient(180deg,#3a4763,#111a2e); -webkit-background-clip:text; background-clip:text; }
.tm-hero p { color:var(--muted); margin:4px 0 0; }
.tm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:20px; margin:18px 0; }
.tm-card { position:relative; background:linear-gradient(165deg,#0b101f,#0d1330 70%,#10173a);
  border:1.5px solid var(--c,#8b5cf6); border-radius:18px; padding:34px 16px 16px; text-align:center;
  overflow:hidden; transition:transform .15s, box-shadow .15s; }
html[data-theme="light"] .tm-card { background:linear-gradient(165deg,#ffffff,#eef1f8); }
.tm-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.45); }
.tm-no { position:absolute; top:0; right:0; background:var(--c,#8b5cf6); color:#fff; font-weight:900;
  font-size:.85rem; padding:5px 16px; border-radius:0 16px 0 14px; letter-spacing:.06em; }
.tm-logo img { width:130px; height:130px; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,0,0,.5)); }
.tm-logo-txt { display:inline-flex; align-items:center; justify-content:center; width:110px; height:110px;
  border-radius:22px; color:#fff; font-weight:900; font-size:2rem; }
.tm-name { margin:12px 0 12px; font-size:1.2rem; font-weight:900; }
.tm-rows { text-align:left; border-top:1px solid var(--border); }
.tm-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 4px;
  border-bottom:1px solid var(--border); font-size:.82rem; }
.tm-row span { color:var(--muted); white-space:nowrap; }
.tm-row b { text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-btn { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
  border:1.5px solid var(--c,#8b5cf6); color:var(--c,#8b5cf6); border-radius:11px; padding:11px;
  font-weight:900; letter-spacing:.08em; font-size:.82rem; text-decoration:none; transition:background .14s, color .14s; }
.tm-btn:hover { background:var(--c,#8b5cf6); color:#fff; text-decoration:none; }
.tm-statsbar { display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; background:var(--card);
  border:1px solid var(--border); border-radius:16px; padding:16px; margin:8px 0 20px; }
.tm-stat, .tm-auction { flex:1; min-width:170px; display:flex; align-items:center; gap:12px; }
.tm-stat .ic, .tm-auction .ic { flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:1.3rem;
  background:color-mix(in srgb, var(--c,#8b5cf6) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--c,#8b5cf6) 50%, transparent); }
.tm-stat small, .tm-auction small { display:block; font-size:.6rem; font-weight:800; letter-spacing:.12em; color:var(--muted); }
.tm-stat b, .tm-auction b { display:block; font-size:1.5rem; font-weight:900; line-height:1.15; }
.tm-stat div > span, .tm-auction div > span { font-size:.7rem; color:var(--muted); }
.tm-auction { background:linear-gradient(135deg, rgba(109,40,217,.35), rgba(139,92,246,.15));
  border:1.5px solid #8b5cf6; border-radius:14px; padding:10px 14px; text-decoration:none; color:inherit; }
.tm-auction .ic { background:linear-gradient(135deg,#6d28d9,#8b5cf6); border:0; color:#fff; }
.tm-auction b { color:#a78bfa; }
.tm-auction:hover { text-decoration:none; box-shadow:0 0 18px rgba(139,92,246,.4); }
@media (max-width:760px) { .tm-statsbar { gap:10px; } .tm-stat, .tm-auction { min-width:46%; } }

/* ===== Add/Edit Player form grid (admin/players.php) ===== */
.pform { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 18px; align-items: start; margin: 14px 0 4px; }
.pform > label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: .85rem; min-width: 0; }
.pform > label input, .pform > label select { width: 100%; box-sizing: border-box; }
.pform .sp2 { grid-column: span 2; }
.pform .pf-photo { display: flex; align-items: center; gap: 10px; }
.pform .pf-photo input[type=file] { flex: 1; min-width: 0; }
.pform .upload-hint { margin: 0; line-height: 1.35; }
.pf-abil { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px dashed var(--border); border-radius: 10px; padding: 11px 16px; align-self: end; }
.pf-abil label.chk { display: flex; flex-direction: row; align-items: center; gap: 8px;
  margin: 0; white-space: nowrap; font-size: .9rem; cursor: pointer; }
.pf-abil input[type=checkbox] { width: auto; margin: 0; }
.pf-note { margin: 12px 0 0; }
.pf-actions { display: flex; gap: 10px; margin-top: 14px; }
@media (max-width: 960px) {
  .pform { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pform { grid-template-columns: 1fr; }
  .pform .sp2 { grid-column: span 1; }
  .pf-abil { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ===== v12: tidy grid layout for ALL admin forms ===== */
.adm-body .team-toolbar, .adm-body .inline-form {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin: 12px 0;
}
.adm-body .team-toolbar > label:not(.chk), .adm-body .inline-form > label:not(.chk) {
  display: flex; flex-direction: column; gap: 6px; font-size: .85rem;
  flex: 1 1 220px; min-width: 200px; max-width: 100%; margin: 0;
}
.adm-body .team-toolbar > label:not(.chk) input:not([type=checkbox]):not([type=radio]),
.adm-body .team-toolbar > label:not(.chk) select,
.adm-body .team-toolbar > label:not(.chk) textarea,
.adm-body .inline-form > label:not(.chk) input:not([type=checkbox]):not([type=radio]),
.adm-body .inline-form > label:not(.chk) select,
.adm-body .inline-form > label:not(.chk) textarea { width: 100%; box-sizing: border-box; }
.adm-body .team-toolbar > label.chk, .adm-body .inline-form > label.chk {
  flex: 0 0 auto; align-self: center; padding-bottom: 6px;
}
.adm-body .team-toolbar > button, .adm-body .team-toolbar > .btn,
.adm-body .inline-form > button, .adm-body .inline-form > .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .adm-body .team-toolbar, .adm-body .inline-form { flex-direction: column; align-items: stretch; }
  .adm-body .team-toolbar > label:not(.chk), .adm-body .inline-form > label:not(.chk) { min-width: 0; }
}
/* v29.4: in column direction the 220px flex-basis becomes HEIGHT — reset it so
   phone forms stack tightly instead of leaving huge vertical gaps between fields */
@media (max-width: 760px) {
  .adm-body .team-toolbar > label:not(.chk), .adm-body .inline-form > label:not(.chk),
  .team-toolbar > label, .inline-form > label { flex: 0 0 auto; min-width: 0; }
}

/* ===== v12: Website Menus admin page ===== */
.menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 6px 0 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: rgba(139, 92, 246, .04); transition: border-color .15s, opacity .15s; }
.menu-item:not(.on) { opacity: .55; }
.menu-item.on { border-color: #8b5cf6; }
.menu-item .mi-ico { font-size: 1.4rem; width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(139, 92, 246, .12); border-radius: 10px; flex: 0 0 auto; }
.menu-item .mi-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.menu-item .mi-txt b { font-size: .92rem; letter-spacing: .4px; }
.menu-item .mi-txt small { color: var(--muted); font-size: .72rem; }
.menu-item .mi-state { font-size: .64rem; font-weight: 800; letter-spacing: .8px; color: var(--muted); }
.menu-item.on .mi-state { color: #22c55e; }
.menu-item input[type=checkbox] { display: none; }
.menu-item .mi-switch { flex: 0 0 auto; width: 42px; height: 23px; border-radius: 20px;
  background: rgba(120, 130, 160, .35); position: relative; transition: background .15s; }
.menu-item .mi-switch::after { content: ''; position: absolute; top: 2.5px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.menu-item.on .mi-switch { background: #22c55e; }
.menu-item.on .mi-switch::after { left: 21px; }

/* ===== v12: admin Scoring Console match picker ===== */
.adm-main .match-grid { margin-top: 10px; }
.sc-pick-teams { display: flex; align-items: center; gap: 8px; }
.sc-pick-teams img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; flex: 0 0 auto; }
.sc-pick-teams strong { flex: 1; min-width: 0; }

/* ===== v12.1: admin form orientation fixes ===== */
/* Top-align rows so labels with hints don't stagger their neighbours */
.adm-body .team-toolbar, .adm-body .inline-form { align-items: flex-start; }
/* Preview images / badges / avatars sit centered next to their field */
.adm-body .team-toolbar > img, .adm-body .inline-form > img,
.adm-body .team-toolbar > .avatar, .adm-body .inline-form > .avatar,
.adm-body .team-toolbar > .team-chip, .adm-body .inline-form > .team-chip {
  align-self: center; flex: 0 0 auto; margin-top: 14px; }
/* Color picker: proper swatch height instead of a thin line */
.adm-body .team-toolbar input[type=color], .adm-body .inline-form input[type=color] {
  height: 42px; padding: 3px 4px; cursor: pointer; }
/* Buttons in mixed rows line up with the inputs */
.adm-body .team-toolbar > button, .adm-body .team-toolbar > .btn,
.adm-body .inline-form > button, .adm-body .inline-form > .btn { align-self: center; }
/* Helper notes take their own full row instead of squeezing fields */
.adm-body .team-toolbar > span.muted, .adm-body .inline-form > span.muted {
  flex: 1 1 100%; align-self: flex-start !important; }
/* Checkbox labels center against the neighbouring field */
.adm-body .team-toolbar > label.chk, .adm-body .inline-form > label.chk {
  align-self: center; padding-bottom: 0; margin-top: 14px; }
/* Keep file inputs from forcing overflow on small screens */
.adm-body .team-toolbar input[type=file], .adm-body .inline-form input[type=file] { min-width: 0; }
@media (max-width: 560px) {
  .adm-body .team-toolbar > img, .adm-body .inline-form > img,
  .adm-body .team-toolbar > label.chk, .adm-body .inline-form > label.chk {
    align-self: flex-start; margin-top: 0; }
  .adm-body .team-toolbar > button, .adm-body .team-toolbar > .btn,
  .adm-body .inline-form > button, .adm-body .inline-form > .btn { align-self: stretch; }
  .adm-body .upload-hint { font-size: .68rem; }
}

/* v12.1: compact admin topbar on phones (fixes 6px horizontal overflow) */
@media (max-width: 560px) {
  .adm-top { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .adm-top-right { gap: 8px; }
  .adm-chip { display: none; }
  .adm-top-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ===== v12.2: admin sidebar — selected item keeps purple on hover (text was invisible in light mode) ===== */
.adm-nav a.on:hover,
html[data-theme="light"] .adm-nav a.on:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff;
}
html[data-theme="light"] .adm-nav a:hover:not(.on) { background: #eef1f8; color: #1b2437; }

/* ===== v12.2: players.php in the teams-page card style ===== */
.tm-player .tm-logo img.avatar,
.tm-player .tm-logo .avatar { width: 110px; height: 110px; object-fit: cover; border-radius: 24px;
  border: 2px solid var(--c, #8b5cf6); box-shadow: 0 8px 22px rgba(0,0,0,.4); font-size: 2.4rem; }
.tm-player .tm-logo .avatar-txt { display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c, #8b5cf6), #1d2643); color: #fff; }
.tm-player .tm-row b { display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.tm-player .tm-row b img, .tm-player .tm-row b .team-chip { flex: 0 0 auto; }

/* ===== v13: social / OTP login ===== */
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.social-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sbtn { flex: 1 1 30%; min-width: 120px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 12px; border-radius: 12px; font-weight: 800; font-size: .86rem;
  text-decoration: none; border: 1px solid var(--border); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.sbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.sbtn-google { background: #fff; color: #1b2437; }
.sbtn-fb { background: #1877f2; color: #fff; border-color: #1877f2; }
.sbtn-otp { background: #16a34a; color: #fff; border-color: #16a34a; font-family: inherit; }
.otp-box { margin-top: 14px; border: 1px dashed var(--border); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.otp-box label { display: flex; flex-direction: column; gap: 6px; }
.otp-box input { width: 100%; box-sizing: border-box; }
#recaptchaBox { display: flex; justify-content: center; }
#otpStep2 { display: flex; flex-direction: column; gap: 10px; }
#otpStep2[hidden] { display: none; }

/* Login Methods admin page */
.lm-doc { margin: 10px 0 4px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(139, 92, 246, .05); overflow: hidden; }
.lm-doc summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: .88rem; }
.lm-doc[open] summary { border-bottom: 1px solid var(--border); }
.lm-doc ol { margin: 12px 4px; padding-left: 34px; display: flex; flex-direction: column; gap: 8px;
  font-size: .86rem; line-height: 1.55; }
.lm-doc code, .lm-uri { background: rgba(139, 92, 246, .14); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; font-size: .78rem; word-break: break-all; }

/* ===== v13.1: dashboard Login Methods status + provider fieldsets ===== */
.lm-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.lm-stat { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; opacity: .6; transition: border-color .15s, opacity .15s; }
.lm-stat.ok { opacity: 1; border-color: #22c55e66; }
.lm-stat.warn { opacity: 1; border-color: #e8a11c88; }
.lm-stat:hover { border-color: #8b5cf6; }
.lm-stat .ic { font-size: 1.25rem; width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(139, 92, 246, .12); border-radius: 10px; flex: 0 0 auto; }
.lm-stat .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lm-stat .tx b { font-size: .85rem; }
.lm-stat .tx small { color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-stat .pill { font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: 4px 8px;
  border-radius: 20px; background: rgba(120, 130, 160, .25); color: var(--muted); flex: 0 0 auto; }
.lm-stat.ok .pill { background: rgba(34, 197, 94, .16); color: #22c55e; }
.lm-stat.warn .pill { background: rgba(232, 161, 28, .16); color: #e8a11c; }
.lm-prov { border-left: 3px solid #8b5cf644; padding-left: 14px; margin: 4px 0 10px; }

/* ===== v14: licensing / subscription UI ===== */
.lic-lockbox { text-align: center; padding: 46px 24px; }
.lic-lock-ico { font-size: 3.4rem; margin-bottom: 10px; }
.lic-lockbox h2 { margin: 0 0 8px; }
.lic-lockbox .btn { margin-top: 14px; }
.lic-status { display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; }
.lic-big { flex: 0 0 190px; border: 1px solid var(--c, #22c55e); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center;
  background: color-mix(in srgb, var(--c, #22c55e) 7%, transparent); }
.lic-big small { color: var(--muted); font-size: .64rem; letter-spacing: .12em; font-weight: 800; }
.lic-big b { font-size: 1.7rem; }
.lic-big .pill { font-size: .62rem; font-weight: 800; padding: 4px 10px; border-radius: 20px; }
.lic-rows { flex: 1 1 300px; display: flex; flex-direction: column; }
.lic-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 2px;
  border-bottom: 1px solid var(--border); font-size: .86rem; flex-wrap: wrap; }
.lic-rows > div > span { color: var(--muted); }
.lic-feat { display: inline-block; margin-left: 8px; font-size: .74rem; opacity: .5; }
.lic-feat.on { opacity: 1; color: #22c55e; }
.lic-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lic-plan { position: relative; text-align: center; }
.lic-plan h3 { margin: 4px 0 4px; font-size: 1.15rem; }
.lic-plan.cur { border-color: #22c55e; }
.lic-plan.hot { border-color: #8b5cf6; box-shadow: 0 8px 30px rgba(139, 92, 246, .18); }
.lic-hot-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; font-size: .58rem; font-weight: 900;
  letter-spacing: .1em; padding: 4px 12px; border-radius: 20px; }
.lic-price { font-size: 1.7rem; font-weight: 900; color: var(--primary); }
.lic-price small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.lic-plan ul { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; display: flex;
  flex-direction: column; gap: 7px; font-size: .82rem; }

/* ===== v14.1: market-fit polish ===== */
.powered { font-size: .74rem; color: var(--muted); }
.sf-bottom .powered { margin-left: 14px; }
.powered a { color: #8b5cf6; font-weight: 700; text-decoration: none; }
.adm-chip-plan { text-decoration: none; color: var(--text); font-weight: 800; transition: border-color .15s; }
.adm-chip-plan:hover { border-color: #8b5cf6; }
.adm-chip-plan.bad { border-color: #ef4444; color: #ef4444; }
.adm-card.locked { opacity: .75; }
.adm-card.locked:hover { opacity: 1; }
.adm-lock { font-size: .56rem; font-weight: 900; letter-spacing: .06em; background: rgba(232, 161, 28, .16);
  color: #e8a11c; border-radius: 20px; padding: 2px 8px; vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
@media (max-width: 560px) { .adm-chip-plan { display: inline-flex; } }

/* ===== v14.4: PREMIUM certificate typography + overlap-proof signature row ===== */
.certx { font-family: 'Montserrat', Arial, sans-serif; }
.cx-org1 { font-family: 'Cinzel', Georgia, serif; font-weight: 900; }
.cx-org2 { font-family: 'Cinzel', Georgia, serif; font-weight: 800; }
.cx-sub { font-family: 'Montserrat', sans-serif; }
.cx-cert { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .3em; }
.cx-of { font-family: 'Cinzel', Georgia, serif; letter-spacing: .38em; }
.cx-ribbon { font-family: 'Montserrat', sans-serif; }
.cx-presented { font-family: 'Montserrat', sans-serif; letter-spacing: .22em; }
.cx-name { font-family: 'Great Vibes', 'Segoe Script', cursive; font-weight: 400;
  font-size: clamp(2.2rem, 6.2vw, 4.7rem); line-height: 1.05; }
.cx-team { font-family: 'Montserrat', sans-serif; }
.cx-reason { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(.88rem, 1.75vw, 1.28rem); }
.cx-reason b { color: #b8860b; font-weight: 700; }
/* three matched columns: sign / date / sign — same rhythm, text can never collide */
.cx-bottom { align-items: flex-end; gap: 3.5%; }
.cx-sign { flex: 1 1 0; max-width: none; min-width: 0; }
.cx-sign img, .cx-sign-space { height: 48px; }
.cx-datecol .cx-trophy-sm { font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.2; }
.cx-sign-line { border-top: 2px solid #b8860b; margin: 3px 6% 6px; }
.cx-sign-name, .cx-date { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: .04em;
  font-size: clamp(.6rem, 1.2vw, .92rem); white-space: nowrap; overflow: hidden; margin-top: 0; }
.cx-sign-role { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .1em;
  font-size: clamp(.44rem, .78vw, .6rem); white-space: nowrap; overflow: hidden; }

/* ===== v14.4: PREMIUM digital ID card ===== */
.idcard { width: 362px; border-radius: 18px; border: 1px solid rgba(232, 193, 90, .45); position: relative;
  background: linear-gradient(155deg, #101627, #0a0e19 55%, #0e1526);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.idcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 18px;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .045) 50%, transparent 58%); }
.idcard-top { padding: 12px 16px; position: relative; }
.idcard-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, #8a6508, #ffe9a8 50%, #8a6508); }
.idcard-org { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 900; font-size: .98rem; }
.idcard-org small { letter-spacing: .18em; font-size: .55rem; margin-top: 2px; }
.idcard-body { padding: 20px 16px 12px; }
.idcard-photo { border: none; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent, #f5b60d), 0 0 0 4.5px rgba(232, 193, 90, .4), 0 8px 18px rgba(0, 0, 0, .5); }
.idcard-name { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 900; font-size: 1.2rem; }
.idcard-role { letter-spacing: .16em; font-size: .66rem; margin: 3px 0 9px; }
.idcard-line { font-size: .8rem; }
.idcard-bottom { border-radius: 10px; box-shadow: inset 0 0 0 1px #ddd6c2; }
.idcard-code { letter-spacing: .34em; font-size: .76rem; }

/* ===== v15: PORTRAIT ID card — real CR80 shape (54 × 85.6 mm), zero blank space ===== */
.idc2 { width: 272px; aspect-ratio: 54 / 85.6; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; position: relative; text-align: center;
  border: 1px solid rgba(232, 193, 90, .45);
  background: linear-gradient(155deg, #101627, #0a0e19 55%, #0e1526);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .03);
  font-family: 'Montserrat', system-ui, sans-serif; }
.idc2-head { background: linear-gradient(90deg, var(--accent, #f5b60d), #f5b60d);
  padding: 8px 12px 9px; color: #14100a; border-bottom: 3px solid; flex: 0 0 auto;
  border-image: linear-gradient(90deg, #8a6508, #ffe9a8, #8a6508) 1; }
.idc2-logo { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 2px; }
.idc2-logo-txt { font-size: 1.5rem; line-height: 34px; }
.idc2-org { font-weight: 900; font-size: .88rem; line-height: 1.15; }
.idc2-sub { font-weight: 700; font-size: .5rem; letter-spacing: .16em; opacity: .78; margin-top: 2px; }
.idc2-photo { flex: 1 1 auto; min-height: 0; margin: 9px 10px 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 2px var(--accent, #f5b60d), 0 0 0 4.5px rgba(232, 193, 90, .4); position: relative; }
.idc2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idc2-photo-txt { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--accent, #f5b60d); color: #fff; font-size: 4.6rem; font-weight: 900; }
.idc2-name { font-weight: 900; color: #fff; font-size: 1.05rem; line-height: 1.15; padding: 9px 10px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.idc2-role { color: var(--accent, #f5b60d); font-weight: 800; font-size: .58rem; letter-spacing: .15em; margin-top: 2px; }
.idc2-lines { color: #c9d4e5; font-size: .66rem; font-weight: 600; line-height: 1.55; padding: 3px 12px 0; }
.idc2-lines > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc2-plate { background: #fff; margin: 7px 14px 0; border-radius: 9px; padding: 6px 9px 3px;
  box-shadow: inset 0 0 0 1px #ddd6c2; flex: 0 0 auto; }
.idc2-plate .idcard-barcode { width: 100%; height: 30px; display: block; }
.idc2-code { font-family: monospace; font-weight: 700; color: #111; font-size: .64rem; letter-spacing: .3em; }
.idc2-foot { color: #8a94a6; font-size: .5rem; font-weight: 600; letter-spacing: .06em; padding: 5px 10px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.idcard-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); justify-items: center; }
html[data-theme="light"] .idc2-name { color: #fff; } /* card stays dark in light mode */

/* v15.1: ID card header = logo left + text beside; photo top-aligned so faces never crop */
.idc2-head { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; }
.idc2-logo { margin: 0; flex: 0 0 auto; width: 38px; height: 38px; }
.idc2-head-tx { min-width: 0; }
.idc2-org { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc2-photo img { object-position: top center; }

/* ===== v16: custom pages ===== */
.custom-page { line-height: 1.75; font-size: .95rem; padding: 26px 30px; }
.custom-page h2 { border: 0; padding: 0; margin: 22px 0 8px; font-size: 1.2rem; }
.custom-page h3 { margin: 18px 0 6px; }
.custom-page ul, .custom-page ol { padding-left: 26px; display: block; }
.custom-page li { margin: 5px 0; }
.custom-page a { color: #8b5cf6; }

/* ===== v16.1: PREMIUM poster-style ID card (idc3) ===== */
.idc3 { width: 288px; aspect-ratio: 54 / 85.6; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; position: relative; text-align: center;
  border: 1px solid rgba(232, 193, 90, .55); background: #08080c;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
  font-family: 'Montserrat', system-ui, sans-serif; }
/* header */
.idc3-head { position: relative; flex: 0 0 26%; background: #120a0f; overflow: hidden;
  border-bottom: 2.5px solid; border-image: linear-gradient(90deg, #8a6508, #ffe9a8, #8a6508) 1; }
.idc3-head::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, var(--accent, #a11d2e) 0%, var(--accent, #a11d2e) 26%, transparent 55%),
              radial-gradient(circle at 86% 32%, rgba(232, 161, 28, .5), transparent 60%); }
.idc3-head::after { content: ''; position: absolute; top: 0; bottom: 0; left: 34%; width: 7%;
  background: rgba(255, 255, 255, .14); transform: skewX(-18deg); }
.idc3-batsman { position: absolute; right: 2px; top: 4px; width: 44%; height: 90%; }
.idc3-logobox { position: absolute; left: 9px; top: 9px; width: 46px; height: 46px; z-index: 2;
  border: 1.5px dashed #e8c15a; border-radius: 8px; display: grid; place-items: center; }
.idc3-logobox img { width: 38px; height: 38px; object-fit: contain; }
.idc3-logobox span { color: #fff; font-size: .38rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; }
.idc3-title { position: relative; z-index: 2; padding: 9px 6px 0 58px; line-height: 1.02; }
.idc3-title .t1, .idc3-title .t2 { display: block; font-weight: 900; font-size: 1.02rem;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.idc3-title .t1 { background: linear-gradient(180deg, #fff, #e9edf5 55%, #9aa4b5);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.idc3-title .t2 { background: linear-gradient(180deg, #ffe9a8, #e8a11c 55%, #b8791b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.idc3-tag { position: relative; z-index: 2; width: fit-content; max-width: 92%; margin: 7px auto 0;
  background: rgba(10, 6, 10, .82); border: 1px solid rgba(232, 193, 90, .55); border-radius: 7px;
  padding: 4px 10px; font-size: .5rem; font-weight: 700; color: #fff; letter-spacing: .06em; white-space: nowrap; }
.idc3-tag i { color: #5a5a66; font-style: normal; margin: 0 4px; }
.idc3-tag b { color: #e8a11c; }
.idc3-tag .sh, .idc3-tag .bl { font-size: .55rem; }
/* body */
.idc3-body { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, #0b0b10, #08080c),
              radial-gradient(circle at 94% 30%, rgba(232, 161, 28, .12), transparent 40%); }
.idc3-wm { position: absolute; left: -4px; top: 34%; writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 900; font-size: 2.6rem; color: rgba(255, 255, 255, .06); letter-spacing: .1em; pointer-events: none; }
.idc3-photo { margin: 10px auto 0; width: 60%; flex: 0 0 40%; min-height: 0; border-radius: 12px; overflow: hidden;
  border: 2.5px solid; border-image: none; box-shadow: 0 0 0 2.5px #e8a11c, 0 8px 22px rgba(0, 0, 0, .55);
  border: none; position: relative; z-index: 1; }
.idc3-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.idc3-photo-txt { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--accent, #a11d2e); color: #fff; font-size: 3.6rem; font-weight: 900; }
.idc3-name { color: #fff; font-weight: 900; font-size: 1.16rem; padding: 9px 10px 0; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc3-role { color: #e8a11c; font-weight: 800; font-size: .56rem; letter-spacing: .3em; margin-top: 3px; }
.idc3-info { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 12px 0; min-height: 0; }
.idc3-tlogo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.idc3-div { width: 1px; align-self: stretch; background: rgba(232, 193, 90, .4); flex: 0 0 auto; }
.idc3-lines { text-align: left; color: #e7ecf7; font-size: .63rem; font-weight: 600; line-height: 1.7; min-width: 0; }
.idc3-lines > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc3-lines .ic { margin-right: 6px; }
.idc3-plate { background: #fff; margin: auto 22px 0; border-radius: 8px; padding: 5px 9px 3px; flex: 0 0 auto; }
.idc3-plate .idcard-barcode { width: 100%; height: 26px; display: block; }
.idc3-code { font-family: monospace; font-weight: 700; color: #111; font-size: .62rem; letter-spacing: .3em; }
.idc3-foot { color: #9aa0ae; font-size: .46rem; font-weight: 700; letter-spacing: .1em; padding: 5px 8px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
html[data-theme="light"] .idc3-name { color: #fff; }

/* v16.2: ID card custom background (like certificate bg) */
.idc3.has-bg { background-size: 100% 100% !important; background-repeat: no-repeat; background-position: center; }
.idc3.has-bg .idc3-head { background: transparent; border-image: none; border-bottom: 0; }
.idc3.has-bg .idc3-head::before, .idc3.has-bg .idc3-head::after { display: none; }
.idc3.has-bg .idc3-batsman, .idc3.has-bg .idc3-wm { display: none; }
.idc3.has-bg .idc3-body { background: transparent; }
.idc3.has-bg .idc3-name, .idc3.has-bg .idc3-lines, .idc3.has-bg .idc3-foot { text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
.idc3.has-bg .idc3-logobox { border-style: solid; border-color: transparent; }

/* ===== v17: footer logo + compact mobile footer (#6, #13) ===== */
.sf-logo { width: 52px; height: 52px; object-fit: contain; margin-bottom: 8px; display: block; }
.sf-custom { color: #c9d4e5; font-size: .85rem; }
.sf-custom a { display: inline; }
@media (max-width: 600px) {
  .site-footer { margin-top: 24px; }
  .sf-cols { gap: 14px; padding: 18px 14px 8px; grid-template-columns: 1fr 1fr; }
  .sf-cols h4 { font-size: .76rem; margin-bottom: 5px; }
  .sf-cols a { font-size: .76rem; padding: 2px 0; }
  .sf-cols p { font-size: .74rem; }
  .sf-bottom { font-size: .66rem; padding: 8px; }
  .sf-bottom .powered { display: block; margin: 4px 0 0; }
}
/* ===== v17: active menu highlight (#7) ===== */
.nav-links a.active { color: var(--primary); position: relative; }
.nav-links a.active::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 2.5px;
  border-radius: 2px; background: var(--primary); }
/* ===== v17: points table mobile (#4) ===== */
@media (max-width: 640px) {
  .pt-wrap, .points-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pt-wrap table, .points-wrap table { min-width: 560px; }
}

/* ===== v17: menu manager (#15) ===== */
.mm-list { display: flex; flex-direction: column; gap: 8px; }
.mm-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; background: rgba(139, 92, 246, .04); opacity: .55; }
.mm-item.on { opacity: 1; border-color: rgba(139, 92, 246, .5); }
.mm-item.dragging { opacity: .35; border-style: dashed; }
.mm-grip { cursor: grab; color: var(--muted); font-size: 1.1rem; }
.mm-ico { width: 52px; text-align: center; }
.mm-label { width: 170px; font-weight: 700; }
.mm-href { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-vis { flex: 0 0 auto; }
@media (max-width: 640px) { .mm-label { width: 110px; } .mm-href { display: none; } }

/* v17: points table on phones — horizontal scroll instead of squashing/overlap (#4) */
@media (max-width: 640px) {
  .pts-table { min-width: 580px; font-size: .74rem; }
  .pts-table th, .pts-table td { padding: 7px 7px; white-space: nowrap; }
}

/* v17: Quill editor on Custom Pages (#14) */
.pg-editor { background: #fff; color: #1b2437; min-height: 260px; border-radius: 0 0 8px 8px; }
.ql-toolbar.ql-snow { background: #f3f5fb; border-radius: 8px 8px 0 0; border-color: var(--border); }
.ql-container.ql-snow { border-color: var(--border); font-size: .95rem; }

/* v17: export buttons + print mode (#17) */
@media print {
  .navbar, .site-footer, .filters, .tabbar, .page-back, .theme-btn, .btn, .lp-nav { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .panel { border: none !important; box-shadow: none !important; }
}

/* ===== v17: ID card kinds + roomy title + unfaded backgrounds (#18-20) ===== */
.idc3-kindtag { position: absolute; z-index: 3; top: calc(26% + 4px); left: 18%;
  transform: translateY(6px); padding: 3px 12px; border-radius: 20px; color: #fff;
  font-size: .52rem; font-weight: 900; letter-spacing: .14em; border: 1.5px solid rgba(255, 255, 255, .85); }
.idc3-kindtag.k-player { background: #b8791b; }
.idc3-kindtag.k-owner { background: #2563eb; }
.idc3-kindtag.k-official { background: #15803d; }
.idc3-kindtag.k-fan { background: #7c3aed; }
/* clear room above the title (space for a crest) — matches the PNG layout */
.idc3-title { padding-top: 20px; }
.idc3-tag { margin-top: 10px; }
.idc3-head { flex-basis: 26%; }
/* custom backgrounds must NOT look faded */
.idc3.has-bg::after { display: none; }
.idc3.has-bg { border-color: rgba(232, 193, 90, .35); }
.idc3.has-bg .idc3-photo { box-shadow: 0 0 0 2px rgba(232, 161, 28, .9), 0 8px 22px rgba(0, 0, 0, .5); }

/* v18: mobile admin drawer — Visit Website link always reachable (#2) */
@media (max-width: 900px) {
  .adm-visit { margin: 16px 0 40px; flex: 0 0 auto; }
  .adm-side { padding-bottom: 20px; }
}

/* ===== v18: ID card polish — star-burst, logo glow (no dashed box), custom colours (#10, #5) ===== */
.idc3-stars { position: absolute; right: 4px; top: 4px; width: 42%; height: 92%; pointer-events: none; }
.idc3-logobox { border: none !important; background: radial-gradient(circle, rgba(255, 233, 168, .45), transparent 70%);
  top: 26px; }
.idc3-logobox img { width: 42px; height: 42px; }
.idc3-title { padding-top: 26px; }
.idc3 .idc3-name { color: var(--c-name, #fff); }
.idc3 .idc3-lines { color: var(--c-lines, #e7ecf7); }
.idc3.custcol .t1 { background: none; -webkit-text-fill-color: var(--c-t1, #fff); color: var(--c-t1, #fff); }
.idc3.custcol .t2 { background: none; -webkit-text-fill-color: var(--c-t2, #e8a11c); color: var(--c-t2, #e8a11c); }

/* Points table on phones: keep ALL columns fully readable (no clipped heads) and
   scroll left↔right inside the panel frame — the .panel wrapper has overflow-x:auto. */
@media (max-width: 760px) {
  .pts-table { min-width: 660px; width: max-content; table-layout: auto;
    white-space: nowrap; font-size: .82rem; }
  .pts-table th, .pts-table td { white-space: nowrap; padding: 9px 10px;
    text-align: center; overflow: visible; text-overflow: clip; }
  .pts-table th:nth-child(2), .pts-table td:nth-child(2) { text-align: left; } /* Team */
  .pts-table .pt-full { display: none; }                     /* compact (M)/(W)/… heads, not clipped */
  .pts-table td:nth-child(2) a { gap: 8px; }
  .pts-table td:nth-child(2) b { white-space: nowrap; }      /* full team name, no ellipsis */
  .pts-table td:nth-child(2) .team-chip, .pts-table td:nth-child(2) .logo-img,
  .pts-table td:nth-child(2) img { width: 28px; height: 28px; flex: 0 0 auto; }
}
/* v19: watermark fully visible on screen too (#1) */
.idc3-wm { left: 6px; }

/* ===== v20: inner navbar = EXACT copy of the homepage navbar (no more jumping) ===== */
.navbar { background: #070a10; border-bottom: 2px solid var(--primary); padding: 10px 22px;
  gap: 18px; display: flex; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.brand-t1 { font-size: 1.15rem; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; font-weight: 800; }
.brand-t2 { font-size: .6rem; letter-spacing: .3em; color: var(--primary); }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 auto; align-items: center; }
.nav-links a { padding: 8px 12px; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text); background: none; border-radius: 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }
.nav-links a.active::after { display: none; }
.nav-links a.btn-nav { background: var(--primary); color: var(--primary-ink, #14100a); font-weight: 800;
  font-size: .78rem; letter-spacing: .05em; padding: 10px 16px; border-radius: 8px; border-bottom: none; }
.nav-links a.btn-nav:hover { color: var(--primary-ink, #14100a); border-bottom: none; filter: brightness(1.08); }
.nav-links .theme-btn { background: none; border: 1px solid rgba(255, 255, 255, .25); color: inherit;
  border-radius: 50%; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; }
html[data-theme="light"] .navbar { background: #ffffff; }
html[data-theme="light"] .nav-links .theme-btn { border-color: #d9dfec; }
@media (max-width: 760px) {
  .nav-links a { border-bottom: none; }
  .nav-links a.active { color: var(--primary); }
}

/* v20.2: restore the mobile dropdown (the unified-navbar rule above was keeping it open) */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; margin: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { border-bottom: none; text-align: center; }
  .nav-links .theme-btn { margin: 8px auto 0; }
}

/* ===== v22: header consistency + light-mode visibility (inner pages) ===== */
/* tagline always readable — gold in dark, deep gold in light */
.brand-t2 { color: #e8a11c !important; display: block; }
html[data-theme="light"] .brand-t2 { color: #8a6508 !important; }
/* burger: SAME spot on every page (top-right of the bar), visible in both themes */
.navbar { position: relative; }
.nav-toggle { color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  width: 40px; height: 38px; line-height: 1; }
@media (max-width: 860px) {
  .nav-toggle { position: absolute; right: 14px; top: 14px; display: block; }
  .navbar { padding-right: 66px; }
}
html[data-theme="light"] .nav-toggle { color: #1b2437; border-color: #d9dfec; }

/* v22: brand logo same size as the homepage (removes the last few px of header difference) */
.brand-logo { width: 40px; height: 40px; }

/* v22: identical link metrics to the homepage (tighter so all items fit one row) */
@media (min-width: 861px) {
  .nav-links a { padding: 8px 9px; font-size: .74rem; white-space: nowrap; }
  .nav-links a.btn-nav { padding: 10px 16px; font-size: .78rem; }
}

/* ===== v24: navbar that never overlaps the logo and never grows to 3 rows =====
   The menu is admin-editable and can hold 18-19 items — far too many to ever fit on
   one line beside the brand. So on desktop the brand keeps the top line to itself and
   the whole menu sits on its OWN single line underneath, scrolling horizontally when it
   runs long (instead of wrapping into 2-3 stacked rows that pushed the bar to ~150px and
   collided with the brand). Below 980px it collapses into the existing hamburger dropdown. */
@media (min-width: 981px) {
  .navbar { flex-wrap: nowrap; padding: 8px 20px; gap: 12px; align-items: center; }
  /* brand trimmed a touch on desktop so the menu has more room on the same line */
  .brand { flex: 0 0 auto; gap: 8px; }
  .brand-logo { width: 34px; height: 34px; }
  .brand-t1 { font-size: 1rem; letter-spacing: .06em; }
  .brand-t2 { font-size: .55rem; letter-spacing: .22em; }
  .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1px;
    /* invisible overflow safety — no page scroll on narrow windows, no visible scrollbar.
       flex-start (not flex-end) so any overflow spills right where it can be swiped to,
       never clipping HOME/FIXTURES off the unreachable left edge. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; height: 0; width: 0; }
  .nav-links > a,
  .nav-links > button,
  .nav-links .btn-nav,
  .nav-links .theme-btn { flex: 0 0 auto; }
  /* fluid, compact link metrics: shrink to fit the row (bigger on wide screens) */
  .nav-links a { padding: 6px clamp(5px, 0.45vw, 9px); font-size: clamp(.58rem, 0.58vw, .68rem);
    white-space: nowrap; letter-spacing: .03em; }
  .nav-links a.btn-nav { padding: 8px 12px; font-size: clamp(.62rem, 0.6vw, .72rem); }
  .nav-links .theme-btn { width: 30px; height: 30px; font-size: .85rem; }
}

/* Collapse to the hamburger dropdown earlier (was 860px) — a 19-item row is unreadable
   on tablets / small laptops, so hand those widths the clean slide-down menu. */
@media (max-width: 980px) {
  .nav-toggle { display: block; position: absolute; right: 14px; top: 14px; }
  .navbar { padding-right: 66px; }
  /* match the home-page mobile brand exactly (logo 34px + title 1rem) so the header is
     identical on every page and the league name stays on one line, not wrapping to two */
  .brand-logo { width: 34px; height: 34px; }
  .brand-mark { font-size: 1.4rem; }
  .brand-t1 { font-size: 1rem; letter-spacing: .04em; white-space: nowrap; }
  .brand-t2 { font-size: .58rem; letter-spacing: .2em; white-space: nowrap; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch;
    margin: 0; flex-wrap: nowrap; overflow: visible; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links a { border-bottom: none; text-align: center; }
  .nav-links .theme-btn { margin: 8px auto 0; }
}

/* ===== Admin documentation (help.php) ===== */
.docs-search { margin: 4px 0 16px; }
.docs-search input { width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: .95rem; min-height: 44px; }
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
.docs-toc-inner { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.docs-toc-inner b { padding: 4px 8px; letter-spacing: 1px; }
.docs-toc-inner a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text);
  text-decoration: none; font-size: .86rem; line-height: 1.3; }
.docs-toc-inner a:hover { background: rgba(127,127,127,.14); }
.docs-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.doc-sec { scroll-margin-top: 14px; }
.doc-sec h2 { margin: 0 0 10px; font-size: 1.25rem; }
.doc-sec h3 { margin: 16px 0 6px; font-size: 1rem; color: var(--accent, #e8b923); }
.doc-sec p, .doc-sec li { line-height: 1.6; }
.doc-sec ul, .doc-sec ol { margin: 8px 0 8px 20px; }
.doc-sec li { margin: 4px 0; }
.doc-sec code { background: rgba(127,127,127,.18); padding: 1px 6px; border-radius: 6px;
  font-size: .86em; word-break: break-word; }
.doc-tip { background: rgba(232,185,35,.12); border-left: 3px solid #e8b923;
  padding: 10px 12px; border-radius: 8px; margin: 12px 0; }
.doc-vendor { border: 1px solid rgba(232,185,35,.4); }
@media (max-width: 820px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-toc-inner { position: static; flex-flow: row wrap; }
  .docs-toc-inner b { width: 100%; }
  .docs-toc-inner a { font-size: .8rem; padding: 6px 8px; }
}

/* ===================== Fantasy League ===================== */
.fan-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fan-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:8px 0 26px;}
.fan-mcard{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:14px;text-decoration:none;color:var(--text);transition:.15s;}
.fan-mcard:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14);}
.fan-mcard-top{display:flex;justify-content:space-between;align-items:center;}
.fan-mcard-teams{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;}
.fan-vs{color:var(--muted);font-weight:600;font-size:.85rem;}
.fan-mcard-cta{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--primary);}
.fan-mcard-cta.done{color:var(--green);} .fan-mcard-cta.board{color:var(--amber);}
/* builder HUD */
.fan-hud{position:sticky;top:8px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:18px;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.fan-hud-cell{display:flex;flex-direction:column;line-height:1.2;}
.fan-hud-cell .k{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800;}
.fan-hud-cell .v{font-size:1.05rem;font-weight:800;}
.fan-hud-cell .v.bad b{color:var(--red);}
.fan-hud .btn{margin-left:auto;}
.fan-team-h{display:flex;align-items:center;gap:8px;margin:18px 0 10px;font-size:1.15rem;}
.fan-dot{width:14px;height:14px;border-radius:50%;display:inline-block;}
.fan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.fan-p{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:9px 12px;cursor:pointer;transition:.12s;user-select:none;}
.fan-p:hover{border-color:var(--primary);}
.fan-p.sel{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--card));box-shadow:inset 0 0 0 1px var(--primary);}
.fan-p-av img,.fan-p-av .avatar-chip{flex:0 0 auto;}
.fan-p-main{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto;}
.fan-p-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fan-p-cr{font-weight:800;font-variant-numeric:tabular-nums;}
.fan-p-cr small{font-size:.7rem;color:var(--muted);margin-left:2px;}
.fan-cvc{display:flex;gap:4px;}
.fan-c{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--card2);
  font-weight:800;font-size:.72rem;cursor:pointer;color:var(--muted);}
.fan-c.on{background:var(--primary);color:var(--primary-ink,#fff);border-color:var(--primary);}
.fan-p:not(.sel) .fan-c{opacity:.4;}
.fan-badge{display:inline-block;font-size:.62rem;font-weight:900;padding:1px 5px;border-radius:6px;vertical-align:middle;}
.fan-badge.c{background:var(--primary);color:#fff;} .fan-badge.vc{background:var(--amber);color:#241a00;}
.fan-big{font-size:1.8rem;font-weight:900;color:var(--primary);}
.fan-board .fan-me{background:color-mix(in srgb,var(--amber) 16%,transparent);font-weight:700;}
.ta-r{text-align:right;}
@media (max-width:560px){
  .fan-hud{gap:10px;padding:10px 12px;} .fan-hud .btn{margin-left:0;width:100%;}
  .fan-grid,.fan-mgrid{grid-template-columns:1fr;}
}

/* Player profile — awards */
.award-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:6px 0 22px;}
.award-card{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--amber);
  border-radius:12px;padding:12px 14px;}
.award-card.award-pom{border-left-color:var(--primary);}
.award-ribbon{font-weight:800;}
.award-ach{color:var(--muted);font-size:.9rem;margin-top:3px;}
.award-meta{margin-top:6px;}

/* ===== In-app (native shell) chrome: bottom tab bar replaces the web navbar ===== */
body.in-app{padding-bottom:calc(60px + env(safe-area-inset-bottom));}
body.in-app .page-back{margin-top:6px;}
.app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;
  background:var(--navbg,#0b1220);border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px rgba(0,0,0,.35);}
.app-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:56px;padding:6px 2px;color:var(--muted,#93a1b8);
  font-size:.66rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;text-decoration:none;}
.app-tab:hover{text-decoration:none;color:var(--muted,#93a1b8);}
.app-tab-ic{font-size:1.2rem;line-height:1;filter:grayscale(.35);opacity:.9;}
.app-tab.active{color:var(--primary,#f5b60d);}
.app-tab.active .app-tab-ic{filter:none;opacity:1;transform:translateY(-1px);}

/* ===== Offline scoring queue (scorer console) ===== */
.offline-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;min-height:44px;border-radius:12px;
  background:var(--card2);border:1px solid var(--amber);color:var(--text);
  font-weight:700;font-size:.9rem;text-align:center;
  box-shadow:0 6px 22px rgba(0,0,0,.4);}
.offline-banner .oq-count{color:var(--amber);}
.offline-banner.paused{border-color:var(--red);}
.offline-banner.paused .oq-count{color:var(--red);}
.ball-result.pending{border-style:dashed;border-color:var(--amber);
  color:var(--amber);opacity:.7;background:transparent;}
html[data-theme="light"] .ball-result.pending{background:transparent;color:var(--amber);border-color:var(--amber);}
@media (max-width:600px){.offline-banner{font-size:.82rem;padding:10px 12px;}}

/* ============ Live Prediction Game + Hall of Fame (match page) ============ */
.pred-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.pred-panel{padding:16px 18px;}
.pred-h{margin:0 0 4px;font-size:1.15rem;}
.pred-sub{margin:0 0 12px;}
.pred-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pred-team{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;min-height:44px;
  background:var(--card2);border:2px solid var(--border);border-radius:12px;color:var(--text);
  cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s;}
.pred-team:hover{transform:translateY(-2px);border-color:var(--tc,var(--primary));
  box-shadow:0 6px 18px rgba(0,0,0,.25);}
.pred-team.picked{border-color:var(--tc,var(--primary));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tc,#f5b60d) 30%,transparent),0 6px 18px rgba(0,0,0,.25);}
.pred-team .pt-name{font-weight:700;text-align:center;line-height:1.2;}
.pred-team .pt-cta{font-size:.78rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.4px;}
.pred-team .pt-mine{font-size:.78rem;font-weight:800;color:#2ea653;}
.pred-verdict{padding:12px 14px;border-radius:10px;margin:0 0 12px;}
.pred-verdict.won{background:rgba(46,166,83,.12);border:1px solid rgba(46,166,83,.4);}
.pred-verdict.lost{background:rgba(214,55,45,.08);border:1px solid rgba(214,55,45,.3);}
.pred-pulse{margin-top:14px;}
.pp-labels{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:5px;gap:8px;}
.pp-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;border:1px solid var(--border);}
.pp-bar span{display:block;min-width:4%;transition:width .4s;}
.pred-hof{margin:0;}
.pred-hof th,.pred-hof td{padding:7px 10px;}
.pred-hof tr.me{background:color-mix(in srgb,var(--primary) 12%,transparent);}
.pred-hof .hof-rank{font-weight:800;font-variant-numeric:tabular-nums;}
.pred-hof .hof-you{font-size:.68rem;font-weight:900;padding:1px 6px;border-radius:5px;
  background:var(--primary);color:var(--primary-ink);text-transform:uppercase;vertical-align:1px;}
@media (max-width:760px){.pred-grid{grid-template-columns:1fr;}}

/* ============ Next-ball prediction widget ============ */
.bp-panel{grid-column:1 / -1;}
.bp-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.bp-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;min-height:44px;
  background:var(--card2);border:2px solid var(--border);border-radius:12px;color:var(--text);
  cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s;}
.bp-pick:hover:not(:disabled){transform:translateY(-2px);border-color:var(--primary);}
.bp-pick:disabled{opacity:.5;cursor:not-allowed;}
.bp-pick.on{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent);}
.bp-big{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-weight:900;font-size:1.05rem;background:var(--card);border:1px solid var(--border);}
.bp-big.four{background:#1d6fd0;color:#fff;border:none;}
.bp-big.six{background:#159a4b;color:#fff;border:none;}
.bp-big.wicket{background:#d0453c;color:#fff;border:none;}
.bp-lbl{font-size:.78rem;font-weight:700;}
.bp-pts{font-size:.72rem;font-weight:800;color:var(--primary);}
.bp-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.bp-msg{font-size:.88rem;min-height:1.2em;}
.bp-msg.ok{color:var(--primary);font-weight:700;}
.bp-msg.win{color:#2ea653;font-weight:800;}
.bp-msg.lose{color:var(--muted);}
.bp-msg.err{color:#d0453c;font-weight:700;}
.bp-total{font-size:.85rem;color:var(--muted);}
.bp-total b{color:var(--text);}
@media (max-width:760px){.bp-choices{grid-template-columns:repeat(3,1fr);}}

/* ===== fx2: CricInfo-style fixture card grid (matches.php) ===== */
.fx2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 0;}
@media(max-width:1199px){.fx2-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:599px){.fx2-grid{grid-template-columns:1fr;}}
.fx2-card{display:block;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;}
.fx2-card:hover{border-color:var(--primary);transform:translateY(-2px);}
.fx2-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.65rem;gap:6px;}
.fx2-top-left{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.fx2-loc{color:var(--muted);font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.fx2-teams{margin:8px 0;}
.fx2-team{display:flex;align-items:center;gap:8px;padding:5px 0;}
.fx2-team+.fx2-team{border-top:1px solid var(--border);}
.fx2-tlogo{width:26px;height:26px;border-radius:6px;object-fit:contain;background:var(--card2);border:1px solid var(--border);flex:none;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;}
.fx2-tname{flex:1;min-width:0;}
.fx2-tshort{font-weight:800;font-size:.82rem;display:block;}
.fx2-tfull{font-size:.6rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.fx2-score{text-align:right;white-space:nowrap;}
.fx2-score .runs{font-weight:800;font-size:.9rem;}
.fx2-score .ovs{font-size:.6rem;color:var(--muted);display:block;}
.fx2-upcoming{text-align:right;}
.fx2-upcoming .t-date{font-size:.6rem;color:var(--muted);display:block;}
.fx2-upcoming .t-time{font-weight:800;font-size:1.05rem;line-height:1.2;}
.fx2-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:.65rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:6px;}
.fx2-foot a{color:var(--primary);font-weight:700;white-space:nowrap;}
.fx2-starts{font-size:.65rem;color:var(--muted);}
.fx2-result{font-size:.7rem;font-weight:700;color:#4ade80;}
html[data-theme="light"] .fx2-card{background:#fff;}