*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Kill iOS double-tap-to-zoom (and the 300ms tap delay) on all tap targets — fast taps on
   pills/buttons (e.g. the drill chain logger's Potted/Missed) no longer trigger a zoom. */
button, .mf-chip, .pill, .ac-chip, .cs-chip, label[role="button"], [data-nav] { touch-action: manipulation; }
:root {
  --green: #1D9E75;
  --green-dark: #0F6E56;
  --green-light: #E1F5EE;
  --red: #D85A30;
  --red-light: #FCEBEB;
  --amber: #BA7517;
  --blue: #185FA5;
  --bg: #05080f;
  --col: 520px;   /* content column width — mobile default; widened on desktop (min-width:1100px) */
  --surface: #111827;
  --surface2: #1a2235;
  --surface3: #222d42;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #eef0f4;
  --muted: #6b7a99;
  --radius: 12px;
  --felt: #0d3525;
  /* Pool-ball palette — real ball colours, reuse across the UI */
  --ball-yellow: #FDBE1A;  /* 1 / 9  */
  --ball-blue:   #3B9EFF;  /* 2 / 10 */
  --ball-red:    #E0453A;  /* 3 / 11 */
  --ball-purple: #9B6DFF;  /* 4 / 12 */
  --ball-orange: #F5912B;  /* 5 / 13 */
  --ball-green:  #1D9E75;  /* 6 / 14 (= brand --green) */
  --ball-maroon: #8C2F39;  /* 7 / 15 */
  --ball-black:  #14181f;  /* 8 */
  --ball-pink:   #FF5EA8;  /* the mobile-picker accent Idris loved */
}

/* Stop the browser's native pull-to-refresh (only fires in a normal tab, not the installed PWA) */
html, body { overscroll-behavior-y: contain; }

/* POOL FELT BACKGROUND */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(13,53,37,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(24,95,165,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(29,158,117,0.06) 0%, transparent 50%);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;   /* dynamic viewport → fixed bottom nav stays put as the mobile toolbar hides/shows */
}

/* NAV */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: rgba(10,15,26,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}
.navbar.nav-hidden { transform: translateY(-100%); }
.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
}
.nav-brand-text { color: var(--green); letter-spacing: 0.04em; }
.nav-brand-text em { color: var(--text); font-style: normal; }
.nav-brand-pro {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0a0f1a;
  background: var(--green);
  border-radius: 4px;
  padding: 1px 5px;
  align-self: center;
  margin-left: -2px;
}
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-user { font-size: 0.8rem; color: var(--muted); }
.btn-sync {
  background: var(--green);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn-sync:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border2); }

/* SYNC MODAL */
.sync-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 999; backdrop-filter: blur(4px); }
.sync-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; padding: 2rem; width: 90%; max-width: 400px; text-align: center; }
.sync-title { font-family: 'Inter', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sync-title .icn { width: 22px; height: 22px; color: var(--green); }
.sync-msg { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; min-height: 1.2em; }
.sync-bar-track { background: var(--surface2); border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 0.5rem; }
.sync-bar-fill { background: linear-gradient(90deg, var(--green-dark), var(--green)); height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.sync-pct { font-size: 0.8rem; color: var(--muted); }

/* MAIN */
.main { max-width: 1680px; margin: 0 auto; padding: 1.25rem 1.5rem 4rem; }

/* FILTERS */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 110px; }
.filter-group label { font-size: 0.7rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.filter-group input, .filter-group select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  outline: none;
  transition: border-color 0.2s;
}
.filter-group input:focus, .filter-group select:focus { border-color: var(--green); }
.filter-group select option { background: var(--surface); }
.btn-filter {
  background: var(--green);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 7px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  align-self: flex-end;
  transition: background 0.2s;
}
.btn-filter:hover { background: var(--green-dark); }
.btn-ghost-sm {
  background: transparent;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  align-self: flex-end;
  transition: color 0.2s;
}
.btn-ghost-sm:hover { color: var(--text); }

/* COLLAPSIBLE CARDS */
.collapsible-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; }
.collapsible-card.milestone-card { border-left: 3px solid var(--green); }
.collapsible-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
.collapsible-header:hover { background: var(--surface2); }
.collapsible-title { font-family: 'Barlow Condensed', sans-serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.collapsible-summary { font-size: 0.78rem; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collapsible-chevron { font-size: 0.65rem; color: var(--muted); transition: transform 0.3s; flex-shrink: 0; }
.collapsible-card.open .collapsible-chevron { transform: rotate(180deg); }
.collapsible-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.collapsible-card.open .collapsible-body { max-height: 600px; }
.collapsible-inner { padding: 0 1.25rem 1rem; }
.collapsible-inner .filters-bar { margin-bottom: 0; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 1rem 0 0.25rem; background: transparent; }
.collapsible-inner .antalya-bar { margin-bottom: 0; border: none; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.collapsible-inner .antalya-bar::after { right: 0; }

/* ANTALYA BAR */
.antalya-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.antalya-bar::after {
  content: '🏆';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: 0.15;
}
.antalya-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 0.75rem; }
.antalya-cols { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.antalya-col { display: flex; flex-direction: column; gap: 2px; }
.antalya-period { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.antalya-wr { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.antalya-wr.good { color: var(--green); }
.antalya-wr.mid { color: var(--amber); }
.antalya-detail { font-size: 0.78rem; color: var(--muted); }
.antalya-divider { width: 1px; height: 52px; background: var(--border2); }
.antalya-arrow { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 600; }

/* METRICS */
.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 1.25rem; }
.metric {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.1rem 0 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.metric::after { content:''; height:3px; width:46px; border-radius:2px; background: var(--ball-blue); margin-top: 6px; }
.metric:has(.metric-val.green)::after { background: var(--green); }
.metric:has(.metric-val.red)::after { background: var(--red); }
.metric-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.metric-val { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; }
.metric-val.green { color: var(--green); }
.metric-val.red { color: var(--red); }

/* CHARTS GRID */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.chart-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.chart-card.wide { grid-column: 1 / -1; }

/* CHART TITLE WITH TOOLTIP */
.chart-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.chart-title {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.info-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  flex-shrink: 0;
  position: relative;
}
.info-btn:hover .tooltip,
.info-btn:focus .tooltip,
.info-btn.active .tooltip { display: block; }
.tooltip {
  display: none;
  position: fixed;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text);
  width: 220px;
  text-align: left;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  z-index: 99999;
  white-space: normal;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  pointer-events: none;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border2);
}

/* DISC TOGGLES */
.disc-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.6rem;
}
.disc-toggle {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: opacity 0.2s, transform 0.1s;
  background: transparent;
}
.disc-toggle:hover { transform: translateY(-1px); }
.disc-toggle.inactive { opacity: 0.3; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 0.78rem; color: var(--muted); }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chart-wrap canvas {
  /* Prevent canvas from shrinking below a readable minimum on mobile */
  min-width: 320px;
}
.dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }

/* FORM STRIPS */
.form-strip { margin-bottom: 0.85rem; }
.form-strip-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; display: flex; justify-content: space-between; align-items: center; }
.form-strip-wr { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600; }
.form-strip-dots-row { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.form-strip-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.form-dot {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  cursor: default;
  transition: transform 0.12s ease;
  position: relative;
}
.form-dot:hover,
.form-dot.active { transform: scale(1.18); z-index: 5; }
.form-dot:hover .form-dot-tooltip,
.form-dot.active .form-dot-tooltip { display: block; }
.form-dot.W { background: #FDBE1A; color: #3a2c00; }
.form-dot.L { background: #3B9EFF; color: #06223f; }

/* TABLES */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface2); }
.td-win { color: var(--green); font-weight: 500; }
.td-loss { color: var(--red); font-weight: 500; }
.rating-badge { display: inline-block; background: rgba(216,90,48,0.12); color: #F0997B; font-size: 0.75rem; font-weight: 500; padding: 2px 7px; border-radius: 4px; }
.wr-badge { font-weight: 500; }
.wr-badge.good { color: var(--green); }
.wr-badge.bad { color: var(--red); }

/* POOL DECORATION */
.pool-accent {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  font-size: 20rem;
  line-height: 1;
  user-select: none;
}
.pool-accent.a1 { bottom: -2rem; right: -2rem; }
.pool-accent.a2 { top: 20%; left: -3rem; font-size: 12rem; opacity: 0.02; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .navbar { padding: 0.6rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .nav-user { display: none; }
  .nav-brand { font-size: 1.2rem; }
  .nav-right { gap: 0.5rem; }
  /* Show view-as selector on mobile — useful for scouting */
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .chart-card.wide { grid-column: 1; }
  .antalya-cols { gap: 1rem; }
  /* Chart scrolling: contain scroll to chart area only */
  .chart-card { overflow: hidden; }
  .chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Snap scroll feel */
    scroll-snap-type: x proximity;
  }
  .chart-wrap canvas { min-width: 600px; }
  /* Tables scroll inside their card */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Filters wrap nicely */
  .filters-bar { gap: 0.5rem; }
  .filter-group { min-width: 90px; }
  /* View-as banner stacks on mobile */
  /* Milestone bar */
  .antalya-bar { padding: 0.85rem 1rem; }
  /* Feedback button sits higher on mobile so it doesn't cover nav */
  .feedback-btn { bottom: 1rem; right: 1rem; font-size: 0.85rem; padding: 0.5rem 0.9rem; }
}
@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .btn-sync { font-size: 0.85rem; padding: 0.4rem 0.7rem; }
  /* Tabs scroll horizontally on small screens */
  .tabs-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
  /* Charts get a bit more room to breathe */
  .chart-wrap canvas { min-width: 520px; }
  /* Form dots slightly smaller on very small screens */
  .form-dot { width: 22px; height: 22px; font-size: 9px; }
  /* Main padding tighter */
  .main { padding: 0.75rem 0.75rem 4rem; }
  /* Metric values slightly smaller */
  .metric-val { font-size: 1.4rem; }
}

/* AI SUMMARY */
.ai-card {
  border-color: rgba(59,158,255,0.2);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(24,95,165,0.08) 100%);
  margin-bottom: 1rem;
}
.ai-summary {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
}
.ai-summary p {
  margin-bottom: 0.75rem;
}
.ai-summary p:last-child { margin-bottom: 0; }
.ai-loading {
  color: var(--muted);
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* MILESTONE EDITOR INPUTS */
#milestoneEditor input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  outline: none;
  width: 100%;
}
#milestoneEditor input:focus { border-color: var(--green); }

/* NAV PLAYER */
.nav-player { display:flex; align-items:center; gap:0.6rem; }
.nav-player-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--green); }
.nav-player-info { display:flex; flex-direction:column; gap:1px; }
.nav-player-name { font-size:0.85rem; font-weight:500; color:var(--text); }
.nav-player-rating { font-size:0.72rem; color:var(--green); font-weight:500; }
/* Desktop: give the brand logo + personal details much more presence */
@media (min-width: 769px) {
  .nav-logo-img { height: 76px; }
  .nav-player { gap: 0.8rem; }
  .nav-player-avatar { width: 66px; height: 66px; border-width: 3px; }
  .nav-player-name { font-size: 1.35rem; font-weight: 600; }
  .nav-player-rating { font-size: 0.98rem; }
}
/* Mobile tournament picker (replaces the desktop sidebar) — pink dropdown arrow (P45) */
.cs-mobile-picker {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none' stroke='%23ff5ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6 6 3 9 6'/%3E%3Cpath d='M3 10 6 13 9 10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 12px 16px;
  padding: 0.55rem 2.2rem 0.55rem 0.75rem;
}
/* P56: scroll affordance for overflowing tab rows — fade + pink chevron on each end as needed */
.tabs-nav-wrap { position: relative; }
.tabs-nav-fade {
  position: absolute; top: 0; bottom: 0; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.tabs-nav-fade--right { right: 0; background: linear-gradient(to right, rgba(10,15,26,0), var(--bg) 80%); }
.tabs-nav-fade--left  { left: 0;  background: linear-gradient(to left,  rgba(10,15,26,0), var(--bg) 80%); }
.tabs-nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  -webkit-appearance: none; appearance: none; border: none;
  background: var(--surface2); color: var(--ball-pink);
  width: 26px; height: 26px; border-radius: 50%;
  font: 700 1.2rem/1 'Inter', sans-serif; padding-bottom: 2px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.15s;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.tabs-nav-arrow--right { right: 3px; }
.tabs-nav-arrow--left  { left: 3px; }
.tabs-nav-wrap.has-more .tabs-nav-fade--right,
.tabs-nav-wrap.has-prev .tabs-nav-fade--left { opacity: 1; }
.tabs-nav-wrap.has-more .tabs-nav-arrow--right,
.tabs-nav-wrap.has-prev .tabs-nav-arrow--left { opacity: 1; pointer-events: auto; }

/* AGENDA */
.agenda-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.25rem; }
.agenda-header { margin-bottom:0.75rem; }
.agenda-strip { display:flex; gap:0.75rem; overflow-x:auto; padding-bottom:0.35rem; scrollbar-width:thin; scrollbar-color:var(--green) var(--surface2); }
.agenda-strip::-webkit-scrollbar { height:5px; }
.agenda-strip::-webkit-scrollbar-track { background:var(--surface2); border-radius:4px; }
.agenda-strip::-webkit-scrollbar-thumb { background:var(--green); border-radius:4px; }
.agenda-strip::-webkit-scrollbar-thumb:hover { background:#1D9E75; }
.agenda-empty { color:var(--muted); font-size:0.85rem; font-style:italic; padding:0.5rem 0; }

/* Tournament tab scrollbars */
#csTournSidebar { scrollbar-width:thin; scrollbar-color:var(--green) var(--surface); }
#csTournSidebar::-webkit-scrollbar { width:5px; }
#csTournSidebar::-webkit-scrollbar-track { background:var(--surface); }
#csTournSidebar::-webkit-scrollbar-thumb { background:var(--green); border-radius:4px; }
#csAchStrip::-webkit-scrollbar { height:4px; }
#csAchStrip::-webkit-scrollbar-track { background:var(--surface2); }
#csAchStrip::-webkit-scrollbar-thumb { background:var(--green); border-radius:4px; }
.cs-schedule-scroll, .et-scroll { scrollbar-width:thin; scrollbar-color:var(--green) var(--surface); }
.cs-schedule-scroll::-webkit-scrollbar, .et-scroll::-webkit-scrollbar { width:5px; }
.cs-schedule-scroll::-webkit-scrollbar-track, .et-scroll::-webkit-scrollbar-track { background:var(--surface); }
.cs-schedule-scroll::-webkit-scrollbar-thumb, .et-scroll::-webkit-scrollbar-thumb { background:var(--green); border-radius:4px; }
.agenda-card { flex-shrink:0; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:0.75rem 1rem; min-width:200px; max-width:240px; cursor:default; transition:border-color 0.2s; }
.agenda-card:hover { border-color:var(--border2); }
.agenda-card.tournament { border-left:3px solid var(--green); }
.agenda-card.competition { border-left:3px solid var(--blue); }
.agenda-card-type { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.3rem; }
.agenda-card.tournament .agenda-card-type { color:var(--green); }
.agenda-card.competition .agenda-card-type { color:#3B9EFF; }
.agenda-card-name { font-size:0.85rem; font-weight:500; color:var(--text); margin-bottom:0.25rem; line-height:1.3; }
.agenda-card-date { font-size:0.75rem; color:var(--muted); }
.agenda-card-venue { font-size:0.72rem; color:var(--muted); margin-top:0.2rem; }

/* TABS */
/* LIVE PULSE ANIMATION */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* CUESCORE TOURNAMENTS SIDEBAR */
.cs-tourn-item:hover { background:var(--surface2) !important; }

/* TWO-ROW TAB STRUCTURE */
.tabs-wrapper { margin-bottom:1rem; }
.tabs-group-row { display:flex; gap:2px; border-bottom:2px solid var(--border); padding-bottom:0; }
.tab-group-btn { -webkit-appearance:none; appearance:none; background:var(--surface2); color:var(--muted); font-family:'Inter', sans-serif; font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; border:1px solid var(--border); border-bottom:none; border-radius:6px 6px 0 0; padding:0.35rem 1.1rem 0.45rem; cursor:pointer; transition:color 0.15s, background 0.15s; margin-bottom:-2px; }
.tab-group-btn:hover { color:var(--text); background:var(--surface3); }
.tab-group-btn.active { background:var(--surface); color:var(--text); border-color:var(--border); border-bottom-color:var(--surface); }
.tabs-nav { display:flex; gap:4px; border-bottom:1px solid var(--border); padding-bottom:0; margin-bottom:1rem; }
.tab-btn { -webkit-appearance:none; appearance:none; background:transparent; color:var(--muted); font-family:'Inter', sans-serif; font-size:0.9rem; font-weight:500; border:none; border-bottom:2px solid transparent; padding:0.6rem 1.1rem; cursor:pointer; transition:color 0.2s, border-color 0.2s; margin-bottom:-1px; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--text); border-bottom-color:var(--green); font-weight:600; }
.et-sub-btn { -webkit-appearance:none; appearance:none; background:transparent; color:var(--muted); font-family:'Inter', sans-serif; font-size:0.9rem; font-weight:500; border:none; border-bottom:2px solid transparent; padding:0.6rem 1.1rem; cursor:pointer; transition:color 0.2s, border-color 0.2s; margin-bottom:-1px; }
.et-sub-btn:hover { color:var(--text); }
.et-sub-btn.active { color:var(--text); border-bottom-color:var(--green); font-weight:600; }
/* P70 inline vector icons — calm grey at rest, ignite in the tab's --tc ball-colour when active/hovered */
.tab-btn, .et-sub-btn, .tab-group-btn { display:inline-flex; align-items:center; gap:7px; }
.tabicon { width:18px; height:18px; flex-shrink:0; }
.icn { width:1.05em; height:1.05em; vertical-align:-0.15em; flex-shrink:0; }
/* P88 custom dropdown (vector icons in menus) */
.cs-dd { position:relative; }
.cs-dd-btn { display:inline-flex; align-items:center; gap:7px; background:var(--surface3); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:'Inter', sans-serif; font-size:0.75rem; padding:0.28rem 0.5rem; cursor:pointer; min-width:140px; }
.cs-dd-cur { display:inline-flex; }
.cs-dd-lbl { flex:1; text-align:left; white-space:nowrap; }
.cs-dd-chev { width:14px; height:14px; color:var(--muted); transition:transform .2s; }
.cs-dd.open .cs-dd-chev { transform:rotate(180deg); }
.cs-dd-pop { position:absolute; top:calc(100% + 5px); right:0; min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:5px; box-shadow:0 12px 30px rgba(0,0,0,0.5); z-index:60; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.cs-dd.open .cs-dd-pop { opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s; }
.cs-dd-opt { display:flex; align-items:center; gap:9px; padding:7px 10px; font-size:0.8rem; color:var(--text); cursor:pointer; border-radius:6px; white-space:nowrap; }
.cs-dd-opt:hover { background:var(--surface2); }
.cs-dd-opt.sel { background:var(--green); color:#fff; }
.cs-dd-optlbl { flex:1; }
.cs-dd-check { margin-left:auto; width:15px; height:15px; opacity:0; }
.cs-dd-opt.sel .cs-dd-check { opacity:1; }
/* HOME TAB (P70) — profile hero + key metrics + Palmarès */
.home-hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0.9rem 1rem 0.5rem; }
.home-ring { width:64px; height:64px; border-radius:50%; padding:3px; box-sizing:border-box; }
.home-avatar { width:100%; height:100%; border-radius:50%; background:var(--surface3); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.home-name { font-size:1.1rem; font-weight:700; color:var(--text); margin-top:0.4rem; }
.home-ratings { display:grid; grid-template-columns:1fr 1px 1fr; align-items:stretch; width:100%; max-width:200px; margin:0.5rem auto 0; }
.home-ratings-solo { display:flex; justify-content:center; max-width:none; }
.home-rcol { display:flex; flex-direction:column; align-items:center; }
.home-rdiv { width:1px; background:var(--border); align-self:stretch; }
.home-rval { height:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:1.85rem; color:#FDBE1A; }
.home-rval-epbf { font-size:1rem; }
.home-eprank { font-size:1.2rem; font-weight:700; color:#3B9EFF; line-height:1; }
.home-eppts { font-size:0.9rem; font-weight:600; color:#9CC9FF; line-height:1; margin-top:1px; }
.home-rpill { font-size:11px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; border-radius:6px; padding:2px 9px; margin-top:7px; }
.home-rpill-knbb { background:#FDBE1A; color:#2a2208; }
.home-rpill-epbf { background:#3B9EFF; color:#08243f; }
.home-chips { display:flex; gap:10px; max-width:var(--col); margin:0.6rem auto 0; }
.home-chip { flex:1; background:var(--surface2); border-radius:12px; padding:0.7rem 0.4rem; text-align:center; }
.home-chip-l { font-size:0.7rem; color:var(--muted); }
.home-chip-v { font-family:'Barlow Condensed', sans-serif; font-size:1.3rem; font-weight:700; color:var(--text); margin-top:3px; }
.home-pal { max-width:var(--col); margin:1.5rem auto 0; }
.home-pal-title { font-size:0.92rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text); font-weight:700; margin-bottom:0.8rem; }
.home-pal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem 1.3rem; }
.home-hon-top { display:flex; align-items:center; gap:9px; }
.home-hon-top .icn { width:20px; height:20px; }
.home-hon-top .icn-hill { width:26px; height:26px; }
.home-hon-num { font-family:'Barlow Condensed', sans-serif; font-size:1.6rem; font-weight:700; color:var(--text); line-height:1; }
.home-hon-l { font-size:0.72rem; color:var(--muted); margin-top:3px; }
.home-hon-sub { font-size:0.66rem; color:var(--muted); margin-top:3px; opacity:0.85; }
#csSheet { display:none; }
#csSheet.open { display:block; }
.cs-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .26s ease; z-index:1000; }
#csSheet.in .cs-sheet-backdrop { opacity:1; }
.cs-sheet { position:fixed; left:0; right:0; bottom:0; max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:20px 20px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .28s cubic-bezier(.3,.7,.3,1); z-index:1001; max-height:78vh; overflow-y:auto; }
#csSheet.in .cs-sheet { transform:translateY(0); }
.cs-sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:0.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.cs-sheet-x { background:transparent; border:none; color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px; }
.cs-sheet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cs-sheet-card { display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; background:var(--surface2); border:1px solid var(--border); cursor:pointer; text-align:left; transition:transform .12s, border-color .2s; min-width:0; }
.cs-sheet-card:hover { border-color:var(--border2); }
.cs-sheet-card:active { transform:scale(.97); }
.cs-sheet-ic { display:inline-flex; flex:none; }
.cs-sheet-ic .icn { width:18px; height:18px; }
.cs-sheet-meta { display:flex; flex-direction:column; min-width:0; }
.cs-sheet-name { font-size:0.82rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-sheet-val { font-size:0.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-sheet-empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:1.5rem 0; font-size:0.85rem; }
#milestoneCard, #filtersCard { display:none; }
#milestoneCard.revealed { display:block; }
.perf-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.perf-chip { display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:600; padding:7px 13px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); cursor:pointer; }
.perf-chip .icn { width:14px; height:14px; }
.perf-chip.on { background:rgba(59,158,255,.12); border-color:rgba(59,158,255,.4); color:var(--text); }
.home-hon-u { height:3px; border-radius:2px; margin-top:6px; width:52%; }
.home-up { max-width:var(--col); margin:1.3rem auto 0; }
.home-ft { max-width:var(--col); margin:1.4rem auto 0; }
.home-nm { max-width:var(--col); margin:1.1rem auto 0; position:relative; padding:14px 16px; border-radius:16px; background:linear-gradient(160deg,#19233a 0%,#111827 62%,#0d1320 100%); border:1px solid rgba(255,255,255,.07); overflow:hidden; }
.home-nm.is-link { cursor:pointer; }
.home-nm-eyebrow { font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:9px; }
.home-nm-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.home-nm-type { display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; color:var(--nm-accent); }
.home-nm-type .icn { width:15px; height:15px; }
.home-nm-when { font-size:0.72rem; font-weight:600; color:var(--nm-accent); }
.home-nm-title { font-size:1.25rem; font-weight:700; color:var(--text); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-nm-sub { font-size:0.78rem; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-nm-h2h { margin-top:13px; }
.home-nm-bar { height:6px; border-radius:3px; background:rgba(59,158,255,.4); overflow:hidden; }
.home-nm-bar span { display:block; height:100%; background:#FDBE1A; border-radius:3px; }
.home-nm-h2hlbl { display:flex; justify-content:space-between; font-size:0.66rem; color:var(--muted); margin-top:5px; }
.home-nm-h2hlbl .nm-w { color:#FDBE1A; font-weight:700; }
.home-nm-h2hlbl .nm-l { color:#3B9EFF; font-weight:700; }
.home-nm-form { margin-top:13px; display:flex; align-items:center; gap:9px; }
.home-nm-formlbl { font-size:0.7rem; color:var(--muted); }
.home-nm-dots { display:flex; gap:6px; }
.home-nm-dot { width:22px; height:22px; border-radius:7px; font-size:0.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; color:#fff; }
.home-nm-dot.w { background:#FDBE1A; color:#14181f; }
.home-nm-dot.l { background:#3B9EFF; color:#14181f; }
.home-insight { max-width:var(--col); margin:0.85rem auto 0; display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:14px; background:linear-gradient(135deg,#221a3e,#160f29); border:1px solid rgba(155,109,255,.30); }
.home-insight-ic { width:17px; height:17px; color:#a78bff; flex:none; margin-top:1px; }
.home-insight span { font-size:0.82rem; line-height:1.5; color:#f2f3f7; }
.home-insight b { color:#fff; font-weight:700; }
.home-insight .ins-hl { color:#a78bff; font-weight:700; }
.home-id { max-width:var(--col); margin:0 auto; display:flex; align-items:center; gap:12px; padding:2px; }
.home-id-ring { width:48px; height:48px; border-radius:50%; padding:2.5px; flex:none; box-sizing:border-box; }
.home-id-av { width:100%; height:100%; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.home-id-main { flex:1; min-width:0; }
.home-id-name { font-size:1.15rem; font-weight:700; color:var(--text); line-height:1.1; }
.home-id-pills { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.home-id-pill { font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; }
.home-id-pill.knbb { background:var(--ball-yellow); color:#3a2c00; }
.home-id-pill.epbf { background:var(--ball-blue); color:#06223f; }
.home-nm-wrap { max-width:var(--col); margin:1.1rem auto 0; display:flex; align-items:center; gap:12px; }
.home-nm-stage { flex:1; min-width:0; will-change:transform,opacity; }
.home-nm-stage.is-multi { touch-action:none; }
.home-hero-dots { display:flex; flex-direction:column; gap:9px; flex:none; }
.home-hero-dot { width:7px; height:7px; border-radius:50%; background:#2b3543; border:none; padding:0; cursor:pointer; transition:transform .2s, background .2s, height .2s; }
.home-hero-dot.on { background:#FF5EA8; height:18px; border-radius:3px; }
.perf-hero { max-width:var(--col); margin:0 auto 0.6rem; display:flex; flex-direction:column; align-items:center; padding-top:0.4rem; }
.perf-ring-wrap { position:relative; width:150px; height:150px; }
.perf-ring { width:150px; height:150px; transform:rotate(-90deg); }
.perf-ring-bg { fill:none; stroke:rgba(255,255,255,.07); stroke-width:9; }
.perf-ring-fg { fill:none; stroke:url(#perfGrad); stroke-width:9; stroke-linecap:round; }
.perf-ring-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.perf-rating { font-family:'Barlow Condensed', sans-serif; font-size:2.8rem; font-weight:700; color:var(--text); line-height:1; }
.perf-rating-pill { font-size:0.6rem; font-weight:700; padding:2px 9px; border-radius:6px; background:var(--ball-yellow); color:#3a2c00; }
.perf-hero-sub { font-size:0.8rem; color:var(--muted); margin-top:0.7rem; }
.perf-hero-sub b { color:var(--text); font-weight:700; }
/* Perf pager is a flat swiper sized dynamically by csLayoutPerfPager (track width = n*100%,
   each page = 100/n%). No hardcoded page count — the old 3-page rules (width:300% / 33.3333%)
   governed the track before the JS layout pass and caused a mis-sized flash on tab-open.
   Pre-JS the .home-pg-track (200%) / .home-pg-page (50%) defaults render the lone Overview
   page at exactly 100% of the viewport, then csLayoutPerfPager resizes for the real count. */
.home-pg-page, .home-pg-inner { min-width:0; }
/* Gutter between swiper pages: each page is one viewport wide (border-box), so symmetric
   horizontal padding insets the content and shows as a gap when you pause mid-drag. */
#perfPagerTrack > .home-pg-page, #oppPagerTrack > .home-pg-page { padding-left:18px; padding-right:18px; }

/* OPPONENTS tab (redesign): card-less rows · gold-win/blue-loss · initials avatars · pink giant control */
.opp-hero { display:flex; gap:9px; align-items:flex-start; background:rgba(155,109,255,.08); border:1px solid rgba(155,109,255,.22); border-radius:13px; padding:10px 13px; margin:.2rem 0 0; }
.opp-hero .icn { width:17px; height:17px; color:#9B6DFF; flex:0 0 17px; margin-top:1px; }
.opp-hero-line { font-size:.84rem; line-height:1.5; color:var(--text); }
.opp-hero-line b { font-weight:600; }
.opp-eyebrow { font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text); font-weight:700; margin-bottom:.5rem; }
.opp-sub { font-size:.76rem; color:var(--muted); margin:-.3rem 0 .2rem; }
.opp-r { border-bottom:1px solid rgba(255,255,255,.05); }
.opp-r-head { display:flex; align-items:center; gap:10px; padding:10px 2px; cursor:pointer; }
.opp-av { width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:#1a2335; border:1px solid #283353; display:flex; align-items:center; justify-content:center; font-size:12px; color:#9fb0cc; }
.opp-av-gold { border-color:#FDBE1A; color:#FDBE1A; }
.opp-main { flex:1; min-width:0; }
.opp-nm { font-size:.92rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opp-sub2 { font-size:.72rem; color:var(--muted); }
.opp-rec { font-size:.82rem; white-space:nowrap; }
.opp-rec small { font-size:.62rem; color:var(--muted); margin:0 5px 0 1px; }
.opp-wr { font-size:.72rem; padding:3px 8px; border-radius:999px; font-weight:600; flex:0 0 auto; }
.opp-wr.g { background:rgba(253,190,26,.15); color:#FDBE1A; }
.opp-wr.b { background:rgba(59,158,255,.15); color:#3B9EFF; }
.opp-scalp { display:inline-flex; align-items:center; gap:3px; font-size:.66rem; color:#FDBE1A; background:rgba(253,190,26,.13); padding:2px 7px; border-radius:999px; white-space:nowrap; }
.opp-scalp .icn { width:11px; height:11px; }
/* name search (Matches + Opponents lists) */
.cs-search { display:flex; align-items:center; gap:8px; margin-top:16px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:9px 12px; }
.cs-search > svg { flex:0 0 auto; color:var(--muted); }
.cs-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-family:inherit; font-size:16px; }
.cs-search input::placeholder { color:var(--muted); }
.cs-search input::-webkit-search-cancel-button, .cs-search input::-webkit-search-decoration { -webkit-appearance:none; display:none; }
.cs-search-x { flex:0 0 auto; background:transparent; border:none; color:var(--muted); font-size:1.3rem; line-height:1; cursor:pointer; padding:0 2px; }
.cs-search-x:hover { color:var(--text); }
/* opponent strength thresholds (user-settable) */
.opp-thr { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-top:12px; font-size:.8rem; }
.opp-thr-lbl { color:var(--text); font-weight:600; }
.opp-thr-g { display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:2px 6px; }
.opp-thr-g b { color:var(--text); font-weight:600; min-width:38px; text-align:center; }
.opp-thr-b { width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text); font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.opp-thr-b:hover { border-color:var(--ball-pink); color:var(--ball-pink); }
.opp-thr-hint { color:var(--muted); font-size:.72rem; }
.opp-chev { font-size:1rem; color:#46506b; transition:transform .2s; flex:0 0 auto; }
.opp-r.open .opp-chev { transform:rotate(90deg); }
.opp-detail { padding:2px 2px 12px; }
.opp-band-head { flex-direction:column; align-items:stretch; gap:6px; }
.opp-band-top { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; }
.opp-band-lbl { color:var(--text); }
.opp-band-rt { display:flex; align-items:center; gap:7px; }
.opp-band-r { font-weight:600; }
.opp-rt { font-size:.7rem; font-weight:600; color:#3FD0C4; background:rgba(63,208,196,.12); padding:1px 7px; border-radius:6px; }
.opp-rt-none { color:var(--muted); background:rgba(255,255,255,.04); font-weight:400; }
.opp-seeall { display:flex; align-items:center; justify-content:center; gap:5px; width:fit-content; margin:11px auto 2px; padding:7px 16px; background:rgba(63,208,196,.12); border:1px solid rgba(63,208,196,.38); border-radius:999px; color:#3FD0C4; font-size:.78rem; font-weight:700; cursor:pointer; }
.opp-seeall:hover { background:rgba(63,208,196,.2); }
.opp-band-track { height:10px; border-radius:5px; background:#0f1626; overflow:hidden; }
.opp-band-fill { height:100%; border-radius:5px; transition:width .5s ease; }
.opp-slayer { display:flex; align-items:center; gap:7px; margin-top:14px; font-size:.78rem; color:#FDBE1A; background:rgba(253,190,26,.08); border:1px solid rgba(253,190,26,.2); border-radius:11px; padding:9px 12px; }
.opp-slayer .icn { width:14px; height:14px; }
.opp-giant-ctl { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.opp-gc-lbl { font-size:.78rem; color:var(--muted); }
.opp-gc-btn { width:28px; height:28px; border-radius:8px; background:rgba(255,94,168,.12); border:1px solid rgba(255,94,168,.4); color:#FF5EA8; font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.opp-gc-btn:active { transform:scale(.94); }
.opp-gc-val { font-family:'Barlow Condensed',sans-serif; font-size:1.4rem; font-weight:700; color:#FF5EA8; min-width:48px; text-align:center; }
.opp-gc-n { font-size:.74rem; color:var(--muted); }

/* TOURNAMENTS v2 */
.trn-jscroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#2d3a4a transparent; padding-bottom:4px; }
.trn-row { display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.trn-medal { width:40px; height:40px; flex:0 0 40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; border:1.5px solid; }
.trn-medal-up { color:var(--muted); border-color:#283353; background:#141c2e; }
.trn-medal-up .icn, .trn-medal-q .icn { width:18px; height:18px; }
.trn-main { flex:1; min-width:0; }
.trn-nm { font-size:.92rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trn-sub { font-size:.72rem; color:var(--muted); }
.trn-livepill { display:flex; align-items:center; gap:8px; background:#E0453A; border-radius:12px; padding:9px 13px; margin-bottom:.7rem; cursor:pointer; }
.trn-live-tag { font-size:12px; font-weight:600; letter-spacing:.06em; color:#fff; }
.trn-live-nm { flex:1; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trn-livepill .icn { width:16px; height:16px; color:#fff; }
.trn-pulse { width:8px; height:8px; border-radius:50%; background:#fff; animation:trnpulse 1.2s ease-in-out infinite; flex:0 0 8px; }
@keyframes trnpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.trn-detail-wrap { position:fixed; inset:0; z-index:120; background:var(--bg); transform:translateY(100%); transition:transform .58s cubic-bezier(.32,.72,0,1), visibility 0s linear .58s; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 44px; will-change:transform; pointer-events:none; visibility:hidden; }
.trn-detail-wrap.open { transform:translateY(0); transition:transform .58s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s; pointer-events:auto; visibility:visible; }
#trnFullWrap { z-index:130; }
body.trn-detail-open { overflow:hidden; }
.trn-back { position:sticky; top:0; z-index:2; background:var(--bg); display:flex; align-items:center; gap:5px; width:100%; text-align:left; border:none; border-bottom:1px solid rgba(255,255,255,.05); color:var(--muted); font-size:.9rem; font-weight:600; cursor:pointer; padding:15px 0 12px; }
.trn-back-top { color:#FDBE1A; }
.trn-back-draw { color:#3FD0C4; }
.trn-legend { display:flex; flex-wrap:wrap; gap:9px 12px; margin-top:9px; font-size:11px; color:#8a95ab; }
.trn-legend span { display:inline-flex; align-items:center; }
.trn-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; }
.trn-legend .trn-lg-ic { width:12px; height:12px; margin-right:3px; }
.trn-date-custom { padding:10px 14px 14px; border-top:1px solid var(--border); }
.trn-date-lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:7px; }
.trn-date-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.trn-date-row input { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:7px 9px; font-size:13px; color-scheme:dark; }
.trn-fulldraw { display:flex; align-items:center; gap:6px; width:fit-content; margin:18px auto 4px; padding:9px 18px; background:rgba(253,190,26,.13); border:1px solid rgba(253,190,26,.42); border-radius:999px; color:#FDBE1A; font-size:.82rem; font-weight:700; cursor:pointer; }
.trn-fulldraw:active { transform:scale(.96); }
.trn-fulldraw span { color:#FDBE1A; margin-left:0; }
/* Vision draw (poules + knockout) — rendered inside the detail drawer, so global vars (not .vis) */
.vd-poules { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.vd-poule { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.vd-poule-mine { border-color:rgba(59,158,255,.4); }
.vd-phead { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.vd-ptag { font-size:.6rem; color:#3B9EFF; background:rgba(59,158,255,.14); border-radius:999px; padding:2px 8px; text-transform:none; letter-spacing:0; font-weight:600; }
.vd-grow { display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:8px; font-size:.88rem; }
.vd-me { background:rgba(59,158,255,.12); }
.vd-rank { width:14px; color:var(--muted); font-weight:600; flex:0 0 auto; text-align:center; }
.vd-tok { width:26px; height:26px; border-radius:50%; background:var(--surface3); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; flex:0 0 auto; }
.vd-nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-you { font-size:.56rem; color:#06182e; background:#3B9EFF; border-radius:4px; padding:1px 5px; vertical-align:1px; font-weight:700; }
.vd-wl { font-weight:600; flex:0 0 auto; }
.vd-fr { font-size:.74rem; color:var(--muted); width:42px; text-align:right; flex:0 0 auto; }
.vd-koround { margin-bottom:12px; }
.vd-krhead { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.vd-komatch { background:var(--surface2); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:6px; }
.vd-komatch-mine { border-color:rgba(59,158,255,.45); }
.vd-koside { display:flex; justify-content:space-between; align-items:center; padding:7px 11px; font-size:.86rem; color:var(--muted); gap:8px; }
.vd-koside + .vd-koside { border-top:1px solid var(--border); }
.vd-kowin { color:var(--text); }
.vd-kowin .vd-kosc { color:#1D9E75; font-weight:700; }
.vd-komine .vd-konm { color:#3B9EFF; font-weight:600; }
.vd-konm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-kosc { flex:0 0 auto; }
.vis .ev-live { display:flex; align-items:center; gap:9px; margin-top:18px; padding:12px 14px; border-radius:13px; background:rgba(29,158,117,.12); border:1px solid rgba(29,158,117,.4); cursor:pointer; }
.vis .ev-live-dot { width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 0 rgba(255,59,48,.6); animation:evLivePulse 1.6s infinite; flex:0 0 auto; }
.vis .ev-live-tag { font-size:.66rem; font-weight:800; letter-spacing:.08em; color:#ff5d52; flex:0 0 auto; }
.vis .ev-live-nm { flex:1; min-width:0; font-size:.96rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vis .ev-live-go { font-size:.8rem; font-weight:600; color:#3fd49a; flex:0 0 auto; }
@keyframes evLivePulse { 0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)} 70%{box-shadow:0 0 0 7px rgba(255,59,48,0)} 100%{box-shadow:0 0 0 0 rgba(255,59,48,0)} }
.vd-bracket { overflow-x:auto; padding-bottom:6px; margin-bottom:6px; -webkit-overflow-scrolling:touch; }
.vd-bracket svg { display:block; }
/* Double-elim bracket — stacked Winners / Losers / Finals lanes */
.vd-dko { display:flex; flex-direction:column; gap:12px; }
.vd-dko-sec { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.012); }
.vd-dko-head { font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:8px 12px; background:var(--surface2); border-bottom:1px solid var(--border); }
.vd-dko-scroll { overflow-x:auto; padding:8px 10px; -webkit-overflow-scrolling:touch; }
.vd-dko-scroll svg { display:block; }
/* Training tab — drill library */
.drill-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.drill-card { background:rgba(255,255,255,.015); border:1px solid var(--border); border-radius:12px; padding:9px; text-align:left; color:var(--text); font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.drill-card:active { transform:scale(.985); }
.drill-card .dc-nm { font-size:.82rem; font-weight:700; margin-top:8px; line-height:1.2; }
.drill-card .dc-sub { font-size:.67rem; color:var(--muted); margin-top:2px; }
.drill-card .dc-by { font-size:.62rem; color:var(--ball-pink); margin-top:3px; opacity:.85; }
/* Drill editor (drag-drop) */
.de-tableview { position:relative; width:100%; overflow:hidden; border-radius:9px; touch-action:none; }
.de-tablewrap { position:relative; width:100%; transform-origin:0 0; will-change:transform; }
.de-tablewrap svg { display:block; width:100%; height:auto; }
.de-cloth { position:absolute; left:6.9%; top:12.12%; width:86.21%; height:75.76%; }
.de-ball { position:absolute; width:26px; height:26px; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.de-ballv { width:14px; height:14px; border-radius:50%; overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,.5), inset -1px -1px 2px rgba(0,0,0,.4); pointer-events:none; position:relative; }
.de-ctr { position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; background:#f4f1e6; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; font-size:5px; font-weight:800; color:#14181f; }
.de-band { position:absolute; left:-1px; right:-1px; top:30%; height:40%; }
.de-tray { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0 4px; padding:10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.015); }
.de-tray .de-ball { position:relative; transform:none; width:22px; height:22px; }
.de-tray .de-ballv { width:20px; height:20px; }
.de-tray .de-ctr { width:10px; height:10px; font-size:7px; }
.de-input { width:100%; box-sizing:border-box; background:var(--surface2); border:1px solid var(--border); border-radius:9px; color:var(--text); font-family:inherit; font-size:16px; padding:9px 11px; }
.de-btn { flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:.84rem; font-weight:700; font-family:inherit; cursor:pointer; }
.de-btn-pk { background:var(--ball-pink); color:#1a0510; border-color:var(--ball-pink); }
/* full drill editor (SVG overlay) */
#deOverlay { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
#deOverlay.de-sel { cursor:default; }
/* A press-and-hold on anything draggable was raising the native text selection / iOS callout, so a
   careful slow drag turned into "part of the screen is highlighted" instead of moving the ball. */
.de-tableview, #deOverlay, #csAimCue, #deAimJog, .de-tray2, .de-aimpanel {
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
#deOverlay, #csAimCue, #deAimJog { touch-action:none; }
.de-handle { cursor:grab; }
.de-toolbar { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.de-tool { padding:8px 11px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:.8rem; font-weight:700; font-family:inherit; cursor:pointer; transition:.12s; }
.de-tool.on { background:var(--ball-pink); color:#1a0510; border-color:var(--ball-pink); }
.de-tool.de-toggle.on { background:#FDE68A; color:#231a04; border-color:#FDE68A; }
.de-tool:disabled { opacity:.38; cursor:default; }
.de-toolbar2 { align-items:center; margin-top:-4px; }
/* The drawing tools are a drawer under the Draw button. It stays in the DOM and only hides, so
   opening it never costs a re-render (which would wipe the half-typed name and purpose). */
.de-drawnote { font-size:.66rem; color:var(--muted); line-height:1.45; margin:2px 0 10px; }
.de-drawnote.de-hide { display:none; }
/* The help is one word and a dot under the table now, not three lines above it — on a phone that
   paragraph was pushing the table halfway down the screen. */
/* Nudge: drag gets you across the table, these land the last quarter-inch — and the thing you are
   moving stays in plain sight instead of under a fingertip. */
.de-nudge { display:flex; align-items:center; justify-content:center; gap:6px; margin:2px 0 8px; }
.de-nudge.de-hide { display:none; }
.de-nudge button { width:40px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-family:inherit; font-size:1rem; line-height:1; cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:none; }
.de-nudge button:active { background:var(--ball-pink); color:#1a0510; border-color:var(--ball-pink); }
.de-nudge .de-nstep { width:auto; padding:0 12px; font-size:.66rem; font-weight:700; color:var(--muted); margin-left:4px; }
.de-tipnudge { display:flex; justify-content:center; gap:3px; margin-top:5px; }
/* The power readout was running off the right edge on a phone once the tip arrows widened the panel. */
.de-pwrow { flex-wrap:wrap; }
/* .de-toolbar2's -4px tuck is for a toolbar following another toolbar; after the aim panel it pulled
   the Undo/Delete/diamonds row up UNDER the panel. */
.de-aimpanel + .de-toolbar2 { margin-top:10px; }
.de-pwrow #csAimPwRead { min-width:0 !important; }
.de-tipnudge button { width:26px; height:24px; border-radius:7px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-family:inherit; font-size:.72rem; line-height:1; cursor:pointer; padding:0; -webkit-user-select:none; user-select:none; touch-action:none; }
.de-tipnudge button:active { background:var(--ball-pink); color:#1a0510; border-color:var(--ball-pink); }
.de-toolbar2.de-hide, .de-sw-row.de-hide, .de-w-row.de-hide, .de-styarrow.de-hide { display:none; }
.de-hintrow { display:flex; align-items:center; justify-content:center; gap:8px; }
.de-hintrow .de-hint { margin:8px 0 4px; }
.de-info { width:17px; height:17px; flex:0 0 auto; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--muted); font-family:inherit; font-weight:800; font-size:.66rem; line-height:1; cursor:pointer; padding:0; }
.de-info.on { border-color:#6ea8e6; color:#6ea8e6; }
/* Two steps, but only where the screen is too small for one. The step bar and its buttons simply
   are not there on a wide screen, where the whole editor fits at once. */
#deSteps, .de-stepnav { display:none; }
/* The step bar wants the app's segmented-control look, but `.seg` is scoped to `.vis` and the
   Training tab isn't — the same trap as `.mf-chip`. So restate it here, id-scoped. */
#deSteps { background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:5px; }
#deSteps button { flex:1; border:none; background:transparent; color:var(--muted); font-weight:700; font-size:.9rem; padding:10px 6px; border-radius:10px; cursor:pointer; font-family:inherit; }
#deSteps button.on { background:#222c40; color:#fff; }
@media (max-width: 760px) {
  #deSteps { display:flex; margin:0 0 12px; }
  .de-stepnav { display:block; }
  .de-btn.de-stepnav { margin-top:14px; }
  .de-editor.de-step-table #deDetails { display:none; }
  .de-editor.de-step-details #deTableStep { display:none; }
}
/* The aim controls, under the table rather than on a screen of their own. */
/* The fine-aim jog: a vertical strip beside the table. Coarse aiming is a finger on the cloth;
   this is for the last degree, and it has to be tall enough to be worth dragging. */
#deAimJog { width:34px; flex:0 0 auto; background:#141a24; border:1px solid #2a3340; border-radius:14px; position:relative; touch-action:none; cursor:ns-resize; overflow:hidden; }
.de-jogtrack { position:absolute; left:50%; top:12px; bottom:12px; width:2px; transform:translateX(-50%); background:repeating-linear-gradient(rgba(120,140,170,.25) 0 2px, transparent 2px 7px); }
.de-jogline { position:absolute; left:7px; right:7px; top:50%; height:1px; background:#2a3340; }
#deAimJogRing { position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:rgba(61,242,255,.16); border:2px solid #3df2ff; }
.de-aimpanel { margin-top:10px; padding:10px; border-radius:12px; background:rgba(61,242,255,.05); border:1px solid rgba(61,242,255,.16); }
#tab-training .de-aimpanel .mf-chip { font-size:.78rem; padding:6px 12px; }
.de-drawnote b { color:#6ea8e6; }
.de-sw-row { display:inline-flex; gap:5px; align-items:center; margin-left:2px; }
.de-sw { width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); padding:0; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.de-sw:hover { transform:scale(1.12); }
.de-w-row { display:inline-flex; gap:4px; align-items:center; margin-left:6px; }
.de-w { display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 6px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; }
.de-w.on { border-color:var(--ball-pink); color:var(--ball-pink); }
/* THE MATCH / RACK VERDICT — one row per area, two answers. Sized for a thumb first: the buttons are
   44px tall on a phone, which is the whole point of the row layout over a grid of chips. On a wide
   screen the list is capped and centred rather than stretched into a thin ribbon of tiny controls. */
.cs-areas { width:100%; max-width:440px; margin:0 auto; }
.cs-arow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.cs-arow:last-child { border-bottom:0; }
.cs-aname { font-size:.95rem; font-weight:600; }
.cs-abtns { display:flex; gap:8px; flex:0 0 auto; }
.cs-abtns > button { width:72px; min-height:44px; border-radius:10px; font-family:inherit; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.cs-tagopt.cs-awell.on { background:rgba(67,196,121,.18); border-color:#43c479; color:#43c479; }
.cs-tagopt.cs-awrong.on { background:rgba(239,95,83,.18); border-color:#ef5f53; color:#ef5f53; }
@media (min-width:760px) { .cs-aname { font-size:1rem; } .cs-abtns > button { width:84px; min-height:40px; } }
/* Training tab chips (mf-chip is otherwise scoped to #csHtmlSheet) */
#tab-training .mf-chips { display:flex; gap:8px; overflow-x:auto; flex-wrap:wrap; scrollbar-width:none; padding-bottom:2px; }
#tab-training .mf-chips::-webkit-scrollbar { display:none; }
#tab-training .mf-chip { flex:0 0 auto; background:var(--surface3); border:1px solid var(--border); color:var(--muted); font-family:inherit; font-weight:600; font-size:.88rem; padding:8px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; }
#tab-training .mf-chip.on { background:var(--ball-pink); border-color:var(--ball-pink); color:#fff; }
.de-textinput { z-index:9999; background:var(--surface2); border:1px solid var(--ball-pink); border-radius:8px; color:var(--text); font-family:inherit; font-size:16px; padding:8px 10px; width:140px; outline:none; box-shadow:0 6px 20px rgba(0,0,0,.5); }
/* Section headings in the editor. They were the same muted grey as the helper text under them, so
   the page read as one flat wall — these are signposts and should carry a little colour. */
.de-sec { font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#6ea8e6; }
.de-hint { font-size:.7rem; color:var(--muted); text-align:center; margin:8px 0 4px; line-height:1.4; }
/* The hint is a live instruction ("now tap a pocket"), so it lights up while it's telling you to do
   something and drops back to muted once it's just describing the tool you're holding. */
.de-hint#gdHint { min-height:2.4em; font-size:.78rem; }
.de-hint.de-hint-on { color:var(--ball-yellow); font-weight:600; }
.de-gdctx { justify-content:center; margin:2px 0 4px; min-height:0; }
.de-gdctx:empty { display:none; }
#tab-training .de-gdctx .mf-chip.gd-danger { color:var(--ball-red); }
.de-tray2 { display:flex; flex-wrap:wrap; gap:9px 8px; justify-content:center; margin:10px 0 4px; padding:11px 11px 15px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.015); }
.de-chip { position:relative; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.de-chip svg { width:22px; height:22px; overflow:visible; pointer-events:none; }
.de-clbl { position:absolute; bottom:-10px; left:0; right:0; text-align:center; font-size:7px; color:var(--muted); letter-spacing:.02em; }
#tab-performance .home-pager { max-width:var(--col); }
#tab-performance .metrics-grid { grid-template-columns:repeat(2,1fr); }
#tab-performance .charts-grid { display:flex; flex-direction:column; gap:1.4rem; }
#tab-performance .charts-grid > .chart-card { width:100%; }
.home-spark-wrap { display:flex; align-items:center; gap:8px; }
.home-spark { display:block; }
.home-spark-wl { font-family:'Barlow Condensed', sans-serif; font-size:1.4rem; font-weight:700; color:var(--green); }
.home-hon-form .home-hon-top { align-items:center; }
.home-swipe-hint { display:flex; align-items:center; justify-content:center; gap:6px; font-size:0.72rem; color:var(--muted); margin-top:1rem; cursor:pointer; }
.home-swipe-hint:hover { color:#FF5EA8; }
.home-flip-row { display:flex; align-items:center; gap:12px; margin-top:0.7rem; }
.home-flip-stack { position:relative; flex:1; }
.home-flip-stack.is-multi { height:96px; touch-action:none; overflow:hidden; }
.home-flip-card { box-sizing:border-box; border-left:3px solid var(--green); padding-left:13px; }
.home-flip-stack.is-multi .home-flip-card { position:absolute; inset:0; transition:transform .46s cubic-bezier(.32,.72,.3,1), opacity .3s ease; }
.home-flip-card.is-link { cursor:pointer; }
.home-flip-dots { display:flex; flex-direction:column; gap:9px; align-items:center; }
.home-flip-dot { width:7px; height:7px; border-radius:50%; background:#2b3543; cursor:pointer; border:none; padding:0; transition:background .2s, transform .2s; }
.home-flip-dot.on { background:var(--green); transform:scale(1.35); }
.home-pager { max-width:var(--col); margin:1.4rem auto 0; }
.home-pg-vp { overflow:hidden; transition:height .3s ease; }
.home-pg-track { display:flex; width:200%; height:100%; transition:transform .36s cubic-bezier(.3,.7,.3,1); }
.home-pg-page { width:50%; box-sizing:border-box; height:100%; overflow-y:auto; scrollbar-width:none; }
.home-pg-page::-webkit-scrollbar { width:0; }
.home-pg-dots { display:flex; justify-content:center; gap:10px; padding:13px 0 9px; }
.home-pg-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,94,168,.32); border:none; padding:0; cursor:pointer; transition:width .2s, background .2s; }
.home-pg-dot.on { background:#FF5EA8; width:18px; border-radius:3px; }
.home-graph { position:relative; padding-bottom:1rem; }
.home-graph.editing { border:1px dashed var(--border); border-radius:12px; padding:8px 8px 1rem; }
.home-graph-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; margin-bottom:8px; }
.home-graph-add { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; box-sizing:border-box; padding:0.8rem; border:1px dashed var(--border); border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; margin-top:0.7rem; }
.home-nu-head { display:flex; align-items:center; gap:8px; }
.home-nu-ic { width:20px; height:20px; flex-shrink:0; }
.home-nu-type { font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted); flex:1; }
.home-nu-name { font-weight:700; font-size:0.95rem; color:var(--text); margin-top:6px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-nu-meta { font-size:12px; color:var(--muted); margin-top:4px; }
.home-nu-days { font-size:10px; font-weight:700; border-radius:6px; padding:2px 7px; white-space:nowrap; flex-shrink:0; }
.nu-today { color:var(--green); background:rgba(29,158,117,.16); }
.nu-soon { color:#FDBE1A; background:rgba(253,190,26,.14); }
.nu-far { color:var(--muted); background:var(--surface3); }
.home-radar { grid-column:1 / -1; position:relative; margin-top:10px; }
.home-radar.editing { border:1px dashed var(--border); border-radius:12px; padding:8px; }
.home-radar-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; margin-bottom:8px; }
.home-radar-cv { position:relative; height:250px; }
.home-radar-note { font-size:12px; color:var(--muted); text-align:center; padding:2rem 0; }
.home-pal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; }
.home-pal-head .home-pal-title { margin-bottom:0; }
.home-edit-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:7px; padding:4px 10px; cursor:pointer; }
.home-edit-btn .icn { width:14px; height:14px; }
.home-edit-btn.active { color:var(--green); border-color:var(--green); }
.home-hon { position:relative; }
.home-hon.editing { padding:8px 6px; border:1px dashed var(--border); border-radius:10px; touch-action:none; cursor:grab; }
.home-hon.editing .home-hon-u { width:40%; }
.home-hon.dragging { opacity:.28; }
.home-hon-x { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:#e0453a; color:#fff; border:none; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; padding:0; }
.home-hon-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:64px; border:1px dashed var(--border); border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.home-add-plus { font-size:20px; line-height:1; }
.home-add-pop { margin-top:0.8rem; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:7px; display:flex; flex-wrap:wrap; gap:7px; }
.home-add-it { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text); background:var(--surface3); border:none; border-radius:8px; padding:6px 11px; cursor:pointer; }
.home-add-dot { width:10px; height:10px; border-radius:3px; }
.home-add-empty { font-size:12px; color:var(--muted); padding:6px; }
@keyframes homeRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.home-rise { animation:homeRise .5s ease both; }
@media (min-width:769px) { .home-ring { width:74px; height:74px; } }
.tab-group-btn .tabicon { width:15px; height:15px; }
.tab-group-btn.active .tabicon, .tab-group-btn:hover .tabicon { color: var(--tc, var(--green)); }
.tab-group-btn.active { box-shadow: inset 0 2px 0 var(--tc, var(--green)); }
.tab-btn.active, .et-sub-btn.active { border-bottom-color:var(--tc, var(--green)); }
.tab-btn.active .tabicon, .et-sub-btn.active .tabicon { color:var(--tc, var(--green)); }
.tab-btn:hover .tabicon, .et-sub-btn:hover .tabicon { color:var(--tc, var(--green)); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* PLACEHOLDER */
.placeholder-card { background:var(--surface); border:1px dashed var(--border2); border-radius:var(--radius); padding:3rem 2rem; text-align:center; margin-top:1rem; }
.placeholder-icon { font-size:3rem; margin-bottom:1rem; }
.placeholder-title { font-family:'Barlow Condensed', sans-serif; font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; }
.placeholder-text { font-size:0.9rem; color:var(--muted); max-width:400px; margin:0 auto; line-height:1.6; }

/* RESPONSIVE TABS */
@media (max-width:600px) {
  .tab-btn { font-size:0.78rem; padding:0.5rem 0.6rem; }
  .tabs-nav { gap:0; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs-nav::-webkit-scrollbar { display:none; }
  .tab-group-btn { font-size:0.72rem; padding:0.3rem 0.7rem 0.4rem; }
}

/* MOBILE HAMBURGER NAV (P69) — desktop keeps the tab bar; below 768px the two tab
   rows become a fade-in overlay drawer toggled by the navbar hamburger. */
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; padding:0; background:transparent; border:1px solid var(--border); border-radius:8px; cursor:pointer; flex-shrink:0; }
.nav-hb-bar { display:block; width:18px; height:2px; margin:0 auto; background:var(--text); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav-hamburger.open .nav-hb-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open .nav-hb-bar:nth-child(2) { opacity:0; }
.nav-hamburger.open .nav-hb-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-acct-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); color:var(--text); cursor:pointer; flex-shrink:0; }
.nav-acct-btn .icn { width:18px; height:18px; }
.nav-acct-menu { position:fixed; z-index:200; width:244px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:0 14px 36px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:3px; }
.nav-acct-menu[hidden] { display:none; }
.nav-acct-email { font-size:12px; color:var(--muted); padding:6px 10px 8px; word-break:break-all; border-bottom:1px solid var(--border); margin-bottom:4px; }
.nav-acct-viewas { padding:2px 2px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.nav-acct-viewas input { width:100%; box-sizing:border-box; }
.nav-acct-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:transparent; border:none; border-radius:8px; padding:9px 10px; font-size:14px; color:var(--text); cursor:pointer; }
.nav-acct-item:hover { background:var(--surface3); }
.nav-acct-item .icn { width:16px; height:16px; color:var(--muted); }
.nav-acct-item .sync-ago { margin-left:auto; font-size:11px; color:var(--muted); }
/* ── READ-ONLY DEMO ACCOUNT ────────────────────────────────────────────────────────────────────
   Cosmetic only. The real lock is the demo_no_* restrictive RLS policies in Postgres — see
   csIsDemo() in dashboard2.js. These rules just stop a reviewer clicking things that would look
   broken, since a blocked UPDATE silently changes nothing rather than erroring. */
body.is-demo #homeEditBtn,
body.is-demo .home-edit-btn,
body.is-demo .vis-edit-btn,
body.is-demo .cs-ttag-btn,
body.is-demo .cs-ttag-editor,
body.is-demo .cs-drawpos,
body.is-demo .cs-posrow,
body.is-demo #drillLog,
body.is-demo #drillEdit,
body.is-demo #drillDup,
body.is-demo #drillDel,
body.is-demo #deSave,
body.is-demo #deClear,
body.is-demo #tgSave,
body.is-demo .mf-clear,
body.is-demo #feedbackBtn { display: none !important; }

/* Says why the edit controls are absent, so it reads as deliberate rather than half-built.
   The ROW is hidden too, not just the chip, or a normal account gets a blank gap in the menu. */
.demo-row { display: none; }
body.is-demo .demo-row { display: flex; padding-top: 2px; padding-bottom: 2px; cursor: default; }
body.is-demo .demo-row:hover { background: transparent; }
body.is-demo .demo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(22,104,255,0.14); border: 1px solid rgba(22,104,255,0.35);
  color: #7fb0ff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

/* Sync is a STATUS line now, not a button — it must not invite a click it cannot answer. */
.nav-acct-status { cursor:default; color:var(--muted); font-size:12.5px; }
.nav-acct-status:hover { background:transparent; }
.nav-acct-status .sync-ago { margin-left:0; }
.nav-acct-danger, .nav-acct-danger .icn { color:#e0716b; }
@media (max-width:768px) {
  .nav-hamburger { display:flex; }
  .tabs-wrapper { position:fixed; inset:0; z-index:90; margin-bottom:0; padding:4.75rem 1.25rem 1.5rem; background:rgba(10,15,26,0.985); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s ease .42s, transform .4s ease, visibility 0s linear .72s; overflow-y:auto; }
  .tabs-wrapper.open { opacity:1; visibility:visible; transform:none; transition:opacity .32s ease, transform .35s ease, visibility 0s linear 0s; }
  .tabs-wrapper .tabs-group-row { gap:6px; border-bottom:none; padding-bottom:0; margin-bottom:1rem; }
  .tabs-wrapper .tab-group-btn { flex:1; text-align:center; border:1px solid var(--border); border-radius:8px; margin-bottom:0; padding:0.55rem 0; font-size:0.78rem; }
  .tabs-wrapper .tabs-nav { flex-direction:column; gap:4px; border-bottom:none; overflow:visible; margin-bottom:0; }
  .tabs-wrapper .tab-btn, .tabs-wrapper .et-sub-btn { width:100%; text-align:left; font-size:1.05rem; padding:0.85rem 1rem; border:none; border-left:3px solid transparent; border-radius:9px; margin-bottom:0; opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease, color .2s, background .2s; }
  .tabs-wrapper.open .tab-btn, .tabs-wrapper.open .et-sub-btn { opacity:1; transform:none; }
  .tabs-wrapper .tab-btn.active, .tabs-wrapper .et-sub-btn.active { background:var(--surface2); border-left-color:var(--tc, var(--green)); color:var(--text); }
  .tabs-wrapper .tabicon { width:21px; height:21px; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(1), .tabs-wrapper.open .tabs-nav .et-sub-btn:nth-child(1) { transition-delay:.05s; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(2), .tabs-wrapper.open .tabs-nav .et-sub-btn:nth-child(2) { transition-delay:.09s; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(3), .tabs-wrapper.open .tabs-nav .et-sub-btn:nth-child(3) { transition-delay:.13s; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(4), .tabs-wrapper.open .tabs-nav .et-sub-btn:nth-child(4) { transition-delay:.17s; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(5), .tabs-wrapper.open .tabs-nav .et-sub-btn:nth-child(5) { transition-delay:.21s; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(6) { transition-delay:.25s; }
  .tabs-wrapper.open .tabs-nav .tab-btn:nth-child(7) { transition-delay:.29s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(1), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(1) { transition-delay:.05s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(2), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(2) { transition-delay:.09s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(3), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(3) { transition-delay:.13s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(4), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(4) { transition-delay:.17s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(5), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(5) { transition-delay:.21s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(6), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(6) { transition-delay:.25s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(7), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(7) { transition-delay:.29s; }
  .tabs-wrapper:not(.open) .tabs-nav .tab-btn:nth-last-child(8), .tabs-wrapper:not(.open) .tabs-nav .et-sub-btn:nth-last-child(8) { transition-delay:.33s; }
  body.nav-open { overflow:hidden; }
}

/* FEEDBACK BUTTON & MODAL */
.feedback-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.6rem 1.1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(29,158,117,0.4);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.feedback-btn:hover { background: var(--green-dark); transform: translateY(-2px); }
/* P80: auto-hide on scroll-down, reveal on scroll-up / at top */
.feedback-btn.is-tucked { transform: translateY(120px); opacity: 0; pointer-events: none; }

.feedback-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.feedback-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 1.75rem;
  width: 100%;
  max-width: 440px;
}
.feedback-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.feedback-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.feedback-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
  display: block;
}
.feedback-select, .feedback-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 1rem;
}
.feedback-select:focus, .feedback-textarea:focus { border-color: var(--green); }
.feedback-select option { background: var(--surface); }
.feedback-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.feedback-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; }
.feedback-msg { font-size: 0.82rem; margin-top: 0.5rem; min-height: 1.2em; }
.feedback-msg.success { color: var(--green); }
.feedback-msg.error { color: var(--red); }

/* ADMIN FEEDBACK VIEWER */
.feedback-viewer { margin-top: 1rem; }
.feedback-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}
.feedback-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; gap: 0.4rem; }
.feedback-item-name { font-size: 0.82rem; font-weight: 500; color: var(--text); }
.feedback-item-date { font-size: 0.75rem; color: var(--muted); }
.feedback-item-cat { font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; background: rgba(29,158,117,0.15); color: var(--green); font-weight: 500; }
.feedback-item-msg { font-size: 0.85rem; color: var(--text); line-height: 1.5; }

/* ── STEP 6: Admin player selector ── */



.view-as-group {
  padding: 0.3rem 0.75rem 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
.view-as-group:first-child { border-top: none; margin-top: 0; }

.view-as-option {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-as-option:hover,
.view-as-option.focused { background: var(--surface3); }
.view-as-option .opt-rating {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.4rem;
}

/* Viewing-as banner */
.view-as-label { color: var(--muted); }
.view-as-label strong { color: var(--green); font-weight: 600; }
.view-as-exit {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.view-as-exit:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }

/* ── Expandable opponent rows ── */
.opp-row:hover { background: rgba(255,255,255,0.03); }
.expand-arrow {
  font-size: 0.65rem;
  color: var(--muted);
  margin-left: 6px;
  transition: transform 0.15s;
  display: inline-block;
}
.opp-detail-row td { padding: 0; }
.opp-sub-row td {
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.opp-sub-row:last-child td { border-bottom: none; }
.opp-detail-row { background: rgba(0,0,0,0.15); }
/* Portrait mode — narrower charts */
@media (max-width: 768px) and (orientation: portrait) {
  .chart-wrap canvas { min-width: 340px; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .chart-wrap canvas { min-width: 300px; }
}
/* ── Table search bar ── */
.table-search {
  background: rgba(255,255,255,0.07);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.table-search::placeholder { color: var(--muted); }
.table-search:focus { border-color: var(--green); }

/* ── Scrollable table wrapper ── */
.table-scroll {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 1;
}
/* ── Form dot tap tooltip ── */
.form-dot { position: relative; }
.form-dot-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  color: var(--text);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.form-dot:hover .form-dot-tip,
.form-dot.active .form-dot-tip,
.form-dot:focus .form-dot-tip { display: block !important; }
.form-dot:focus { outline: none; }

/* ── Expandable opponent rows ── */
.opp-row:hover { background: rgba(255,255,255,0.03); }
.expand-arrow {
  font-size: 0.65rem;
  color: var(--muted);
  margin-left: 6px;
  display: inline-block;
}
.opp-detail-row td { padding: 0; }
.opp-sub-row td {
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.opp-sub-row:last-child td { border-bottom: none; }
.opp-detail-row { background: rgba(0,0,0,0.15); }

/* ── Portrait mode — narrower charts ── */
@media (max-width: 768px) and (orientation: portrait) {
  .chart-wrap canvas { min-width: 340px; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .chart-wrap canvas { min-width: 300px; }
}

/* ── Table search bar ── */
.table-search {
  background: rgba(255,255,255,0.07);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.table-search::placeholder { color: var(--muted); }
.table-search:focus { border-color: var(--green); }

/* ── Scrollable table wrapper ── */
.table-scroll {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 1;
}
/* ── Costs Tab ── */
.cost-input {
  width: 100%;
  background: var(--surface3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 16px;   /* >=16px so iOS Safari doesn't auto-zoom the field on focus */
  font-family: inherit;
  outline: none;
  display: block;
  transition: border-color 0.15s;
}
.cost-input:focus { border-color: var(--green); }
.cost-input option { background: var(--surface2); }
/* Hide-money toggle: mask amounts wrapped in .cs-money when body.hide-money is on (peek protection). */
.cs-money { position: relative; }
body.hide-money .cs-money { color: transparent !important; }
body.hide-money .cs-money::after { content: '•••'; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--muted); letter-spacing: 2px; font-weight: 800; }
.cs-money-eye { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: 6px; }
.cs-money-eye:hover { color: var(--text); }
.cs-money-eye .eye-off { display: none; }
body.hide-money .cs-money-eye .eye-on { display: none; }
body.hide-money .cs-money-eye .eye-off { display: inline; }

.cost-label {
  display: block;
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.cost-btn-primary {
  -webkit-appearance: none;
  appearance: none;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cost-btn-primary:hover { opacity: 0.85; }
.cost-btn-primary:disabled { opacity: 0.5; cursor: default; }

.cost-btn-secondary {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cost-btn-secondary:hover { border-color: var(--green); }

.cost-period-btn {
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.cost-period-btn.active, .cost-period-btn:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.cost-tile {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  text-align: center;
}
.cost-tile-val {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.cost-tile-lbl {
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cost-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
}
.cost-entry-row:last-child { border-bottom: none; }
.cost-entry-row:hover { background: var(--surface3); }

.cost-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.4;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.cost-del-btn:hover { opacity: 1; }

.cost-info-btn {
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.cost-info-btn:hover { opacity: 1; }

/* ── Global green scrollbar pill (all scrollable areas) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #17845f; }
/* Keep nav tabs scrollbar hidden on mobile */
.tabs-nav::-webkit-scrollbar { display: none; }

/* FLATPICKR — green accent override (dark theme loaded from CDN) */
.flatpickr-calendar { border-radius: 12px; font-family: 'Inter', sans-serif; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange:hover { background: #1D9E75 !important; border-color: #1D9E75 !important; }
.flatpickr-day.today { border-color: #1D9E75 !important; color: #1D9E75 !important; }
.flatpickr-day.today.selected { color: #fff !important; }
.flatpickr-day:hover { background: #1a2235 !important; border-color: transparent !important; }
/* played-day dot */
.flatpickr-day.has-event { position: relative; font-weight: 600; }
.flatpickr-day.has-event::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#1D9E75; }
.flatpickr-day.has-event.selected::after,
.flatpickr-day.has-event.startRange::after,
.flatpickr-day.has-event.endRange::after { background:#fff; }

/* ── SCOUTING TAB ─────────────────────────────────────────────────────── */
.scout-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.scout-vs {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2.2rem;
  letter-spacing: 0.05em;
}
.scout-search-wrap { position: relative; margin-bottom: 0; }
.scout-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.scout-input:focus { border-color: var(--green); }
.scout-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #1a2235;
  border: 1px solid var(--border2);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.scout-drop.open { display: block; }
.scout-drop-item {
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.scout-drop-item:last-child { border-bottom: none; }
.scout-drop-item:hover { background: rgba(255,255,255,0.05); }
.scout-drop-flag { font-size: 0.75rem; color: var(--muted); min-width: 28px; }
.scout-card {
  margin-top: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.scout-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.scout-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green);
  flex-shrink: 0;
}
.scout-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.scout-card-meta { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
.scout-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--border);
}
.scout-stat-row:last-child { border-bottom: none; }
.scout-stats-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0 0.75rem;
  font-size: 0.8rem;
  align-items: center;
}
.scout-stats-grid > div {
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--border);
}
.scout-stats-grid > div:nth-last-child(-n+3) { border-bottom: none; }
.scout-stat-label { color: var(--muted); }
.scout-stat-val { font-weight: 600; color: var(--text); text-align: right; }
.scout-stat-val.green { color: var(--green); }
.scout-stat-val.red { color: var(--red); }
.scout-form-title {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0.75rem 0 0.35rem;
}
.scout-match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}
.scout-match-row:last-child { border-bottom: none; }
.scout-reset-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.scout-reset-btn:hover { color: var(--text); }
.scout-h2h-list {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 6px;
  margin-top: 0.25rem;
}
.scout-h2h-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.scout-h2h-row:last-child { border-bottom: none; }
.scout-h2h-row.win  { background: rgba(29,158,117,0.06); }
.scout-h2h-row.loss { background: rgba(216,90,48,0.06); }

/* Probability */
.scout-prob-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.scout-section-title {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.75rem;
}
.scout-prob-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.scout-prob-side {
  min-width: 70px;
  text-align: center;
}
.scout-prob-side--right { text-align: center; }
.scout-prob-pct {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.scout-prob-name {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 3px;
  word-break: break-word;
}
.scout-prob-track {
  flex: 1;
  height: 16px;
  background: rgba(216,90,48,0.25);
  border-radius: 8px;
  overflow: hidden;
}
.scout-prob-fill {
  height: 100%;
  background: var(--green);
  border-radius: 8px;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

/* H2H */
.scout-h2h-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.scout-h2h-score {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0.25rem 0 0.5rem;
}

@media (max-width: 600px) {
  .scout-row { grid-template-columns: 1fr; }
  .scout-vs { padding-top: 0; font-size: 1.2rem; }
}

/* ── Tournament Achievements: progress (left) + career highlights (right) ── */
.cs-prog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 440px);
  grid-template-areas: "trend hl" "tiermix hl";
  gap: 1.3rem 2rem;
  align-items: start;
}
.cs-prog-trend   { grid-area: trend; }
.cs-prog-tiermix { grid-area: tiermix; }
.cs-prog-hl      { grid-area: hl; }
.cs-prog-dots    { display: none; }

/* Mobile: the three blocks become swipeable pages with dot indicators */
@media (max-width: 760px) {
  .cs-prog-grid {
    display: flex;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cs-prog-grid::-webkit-scrollbar { display: none; }
  .cs-prog-grid > .cs-prog-pg {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    padding: 0 3px;
  }
  .cs-prog-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
  }
  .cs-prog-dots > span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--surface3); cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .cs-prog-dots > span.active { background: var(--green); transform: scale(1.3); }
}

/* ── Bottom toast (live-finish nudge) ── */
#csToast {
  position: fixed; left: 50%; bottom: -120px; transform: translateX(-50%);
  z-index: 1300; max-width: 90vw;
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 10px; padding: 10px 34px 10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0; cursor: pointer; transition: bottom .3s ease, opacity .3s ease;
}
#csToast.show { bottom: 20px; opacity: 1; }
#csToast .cs-toast-title { font-size: 0.82rem; font-weight: 700; color: var(--text); }
#csToast .cs-toast-sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
#csToast .cs-toast-x { position: absolute; top: 8px; right: 11px; font-size: 0.7rem; color: var(--muted); }

/* ── "Synced Xh ago" freshness label next to the Sync button (desktop) ── */
.sync-ago { font-size: 0.72rem; color: var(--muted); white-space: nowrap; align-self: center; }
@media (max-width: 600px) { .sync-ago { display: none !important; } }

/* ── Mobile pull-to-refresh indicator ── */
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ── Competition tab (P68) ── */
.cs-season-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.85rem; }
.cs-season-pill { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); border-radius: 20px; padding: 4px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: 0.15s; }
.cs-season-pill.active { background: var(--green); color: #fff; border-color: var(--green); }
.cs-season-summary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; padding: 0.6rem 0.9rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; }
.cs-season-summary b { color: var(--text); }
.cs-comp-block { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-bottom: 0.7rem; }
.cs-comp-hdr { display: flex; align-items: center; gap: 8px; padding: 0.55rem 0.85rem; background: var(--surface2); cursor: pointer; }
.cs-comp-hdr .cs-chev { color: var(--muted); font-size: 0.7rem; }
.cs-comp-name { flex: 1; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.cs-comp-wl { font-size: 0.78rem; color: var(--muted); }
.cs-comp-body { padding: 0.4rem 0.6rem; }
.cs-cmatch { padding: 0.4rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.cs-cmatch:last-child { border-bottom: none; }
.cs-cmatch-row { display: grid; grid-template-columns: 52px 1fr auto auto auto; align-items: center; gap: 8px; }
.cs-cmatch-date { font-size: 0.72rem; color: var(--muted); }
.cs-cmatch-opp { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cmatch-disc { font-size: 0.68rem; color: var(--muted); }
.cs-cmatch-score { font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-tag-btn { background: rgba(255,94,168,.16); border: 1px solid rgba(255,94,168,.7); color: #ff5ea8; border-radius: 8px; cursor: pointer; font-size: 0.74rem; font-weight: 600; padding: 4px 11px; line-height: 1.2; white-space: nowrap; }
.cs-tag-btn:active { transform: scale(.96); }
.cs-cmatch-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 52px; }
.cs-cmatch-tags:empty { margin: 0; }
.cs-tag-chip { font-size: 0.66rem; background: var(--surface3); color: var(--text); border-radius: 10px; padding: 1px 8px; }
.cs-vchip { display:inline-flex; align-items:center; gap:3px; }
.cs-cmatch-editor { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 4px 52px; }
.cs-tagopt { font-size: 0.7rem; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); border-radius: 14px; padding: 3px 9px; cursor: pointer; transition: 0.12s; }
.cs-tagopt.on { background: rgba(29,158,117,0.18); border-color: var(--green); color: var(--text); }
@media (max-width: 600px) { .cs-cmatch-row { grid-template-columns: 46px 1fr auto auto; } .cs-cmatch-disc { display: none; } .cs-cmatch-tags, .cs-cmatch-editor { margin-left: 46px; } }

/* ── Responsive scaling for large displays ── */
@media (min-width: 1400px) { body { font-size: 16px; } }
@media (min-width: 1700px) { body { font-size: 17px; } }
@media (min-width: 1900px) { body { font-size: 19px; } }

/* ── Performance "Charts" pane — six custom visualisations (horizontal swiper) ── */
.bc { font-family: 'Barlow Condensed', sans-serif; }
.cv-vp { overflow: hidden; transition: height .38s ease; }
.cv-track { display: flex; transition: transform .42s cubic-bezier(.22,.61,.36,1); }
.cv-page { flex: 0 0 auto; box-sizing: border-box; padding: 4px 4px 6px; }
.cv-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.cv-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.18); cursor: pointer; transition: all .3s; }
.cv-dot.on { width: 22px; border-radius: 4px; background: var(--ball-pink, #FF5EA8); }
.pv-card { min-height: 312px; display: flex; flex-direction: column; }
.pv-eye { font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); font-weight: 700; }
.pv-sub { font-size: 12px; color: #7d8aa3; margin-top: 4px; }
/* --- Shots drawn from a real match ("Practise this shot") --- */
.cs-shotlist { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.cs-shotlist:empty { display: none; }
.cs-shotlbl { font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted,#8b97ab); width: 100%; margin-top: 10px; }
.cs-shotchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,94,168,.34); color: var(--text,#e9eef7); border-radius: 8px; padding: 5px 10px;
  font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; max-width: 100%; }
.cs-shotchip:active { background: rgba(255,94,168,.16); }
.cs-shotrack { font-size: .6rem; font-weight: 500; color: var(--muted,#8b97ab); }
/* The header mark doubles as Home (see csHeaderMarkHtml) — a button, but it must look exactly like
   the image it replaced. */
.cs-hdr-home { background: none; border: 0; padding: 0; margin: 0; display: flex; align-items: center;
  flex: 0 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cs-hdr-home:active { opacity: .7; }
.cs-hdr-home:focus-visible { outline: 2px solid var(--ball-pink, #FF5EA8); outline-offset: 3px; border-radius: 6px; }
.cs-posrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; width: 100%; }
.cs-drawpos { flex: 0 0 auto; background: rgba(255,94,168,.14); border: 1px solid var(--ball-pink,#FF5EA8); color: #ff8fc4;
  border-radius: 8px; padding: 7px 13px; font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.cs-drawpos:active { background: rgba(255,94,168,.26); }
.cs-poshint { flex: 1 1 170px; min-width: 0; font-size: .64rem; line-height: 1.35; color: var(--muted,#8b97ab); }
.drill-card.drill-pos { border-color: rgba(255,94,168,.4); }
.de-posfrom { margin-top: 12px; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255,94,168,.3);
  background: rgba(255,94,168,.08); font-size: .74rem; line-height: 1.45; color: var(--text,#e9eef7); }
.de-posfrom-e { display: block; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ball-pink,#FF5EA8); font-weight: 700; }
.de-posfrom-p { color: var(--muted,#8b97ab); font-size: .68rem; }
.mb-grid { display: grid; align-items: center; gap: 4px; margin: 14px 0 auto; }
.mb-mh { font-size: 10px; color: #9aa6b6; text-align: center; padding-bottom: 2px; }
.mb-cat { grid-column: 1 / -1; font-size: 10px; letter-spacing: .09em; color: var(--ball-pink, #FF5EA8); text-transform: uppercase; font-weight: 700; margin: 11px 0 1px; }
.mb-cat-h { grid-column: auto; margin: 10px 0 1px; line-height: 1.15; overflow-wrap: anywhere; }
.mb-th { height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: rgba(255,255,255,.82); margin: 10px 0 1px; font-variant-numeric: tabular-nums; }
.mb-th.mb-e { background: rgba(255,255,255,.03); }
.mb-lbl { font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 5px; cursor: pointer; }
.mb-c { height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.mb-c.mb-e { background: rgba(255,255,255,.03); }
.mb-read { font-size: .74rem; color: #8b97ab; margin-top: 11px; line-height: 1.4; }
.mb-leg { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #8b97ab; margin-top: 8px; }
.mb-lg { width: 15px; height: 11px; border-radius: 3px; display: inline-block; margin-left: 4px; }
.mb-leg .mb-lg:first-child { margin-left: 0; }
.pv-ring-wrap { position: relative; width: 220px; height: 220px; margin: auto; }
.pv-ring { width: 220px; height: 220px; border-radius: 50%; }
.pv-ring-c { position: absolute; inset: 26px; border-radius: 50%; background: var(--bg, #05080f); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-ring-n { font-size: 3.4rem; font-weight: 700; line-height: .85; color: #fff; }
.pv-ring-n span { font-size: 1.5rem; color: var(--muted); }
.pv-ring-s { font-size: 12px; color: var(--muted); margin-top: 6px; }
.pv-ring-b { font-size: 11px; color: #FDBE1A; font-weight: 600; margin-top: 4px; }
.pv-arsenal { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 22px 8px; margin: auto 0; padding: 18px 0; }
.pv-gauge { text-align: center; }
.pv-gw { font-size: 1.2rem; font-weight: 700; margin-top: 5px; }
.pv-gname { font-size: 10px; color: var(--muted); margin-top: 2px; }
.pv-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: auto 0; padding: 16px 0; }
.pv-vtile { border-radius: 14px; padding: 15px 14px; border: 1px solid rgba(255,255,255,.08); }
.pv-vw { font-size: 1.6rem; font-weight: 700; }
.pv-vname { font-size: 12px; color: #cdd5e6; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-vn { font-size: 10px; color: var(--muted); margin-top: 1px; }
.pv-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin: auto 0; padding: 18px 0; }
.pv-dl { font-size: 11px; color: var(--muted); }
.pv-dv { display: flex; align-items: baseline; gap: 8px; }
.pv-dv .bc { font-size: 2.1rem; font-weight: 700; }
.pv-du { height: 3px; border-radius: 3px; margin-top: 8px; }
.pv-arc { animation: pvdraw 1.5s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes pvdraw { to { stroke-dashoffset: 0; } }

/* ── Home rating ring (pool-ball ladder) + rating page ── */
.home-rr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: .2rem 0 1.3rem; cursor: pointer; }
.home-rr-svg { width: 152px; height: 152px; }
.home-rr-fg { transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.3,1); }
.home-rr-num { font-size: 34px; font-weight: 700; fill: #fff; }
.home-rr-sub { font-size: 10px; fill: var(--muted); letter-spacing: 1.5px; }
.home-rr-row { display: flex; align-items: center; gap: 10px; }
.home-rr-ball { width: 26px; height: 26px; border-radius: 50%; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.home-rr-trend { font-size: 12px; font-weight: 600; }
.home-rr-trend.up { color: #FDBE1A; }
.home-rr-trend.dn { color: #3B9EFF; }
.home-rr-reveal { font-size: 11px; color: #a78bff; }
.home-rr-none { font-size: 12px; color: var(--muted); text-align: center; padding: 1rem 1.2rem; }
.home-rr-ringwrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.home-rr-rank { position: absolute; top: 6px; right: calc(50% - 72px); background: #3B9EFF; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.home-rr-toggle { display: inline-flex; margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.home-rr-tg { background: transparent; border: none; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 6px 16px; cursor: pointer; }
.home-rr-tg.on { background: rgba(255,255,255,.09); color: var(--text); }
.home-form-wl { display: inline-flex; align-items: flex-start; gap: 9px; }
.fwl { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fwl b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; font-weight: 700; }
.fwl small { font-size: 9px; color: var(--muted); margin-top: 1px; letter-spacing: .05em; }

/* ── Rating-history restyle: gold journey line + card-less match rows (no photos) ── */
.cs-rj { margin: 4px 0 2px; }
.cs-rj-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 1rem 0; }
.cs-mr-list { display: flex; flex-direction: column; }
.cs-mr { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cs-mr-tok { flex: 0 0 auto; }
.cs-mr-ball { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; line-height: 1; }
.cs-mr-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; }
.cs-mr-dot.w { background: #FDBE1A; color: #14181f; }
.cs-mr-dot.l { background: #3B9EFF; color: #14181f; }
.cs-mr-main { flex: 1 1 auto; min-width: 0; }
.cs-mr-name { display: block; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-mr-sub { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-mr-right { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.cs-mr-chg { font-size: 11px; font-weight: 600; }
.cs-mr-chg.up { color: #FDBE1A; }
.cs-mr-chg.dn { color: #3B9EFF; }
.cs-mr-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; }
.cs-mr-score.w { color: #FDBE1A; }
.cs-mr-score.l { color: #3B9EFF; }
.home-rating-page { padding-top: .2rem; }

/* ── Account icon = avatar + W/L streak ring (moved off Home, +20%) ── */
.nav-acct-btn.has-avatar { width: 43px; height: 43px; background: none; border: none; padding: 0; }
.nav-acct-ring { width: 43px; height: 43px; border-radius: 50%; padding: 3px; display: inline-flex; box-sizing: border-box; }
.nav-acct-av { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--text); box-sizing: border-box; }
.nav-acct-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.nav-acct-name { font-size: 14px; font-weight: 700; color: var(--text); padding: 6px 10px 2px; }
.nav-acct-ring.acct-ring-edge { box-shadow: inset 0 0 0 1.5px rgba(232,234,240,.6); }   /* 8-ball band: keep the near-black ring visible */

/* ── Next-match drawer (navbar pill → slides down beneath navbar, pushes page) ── */
.nav-nm-pill { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 18px; border-radius:21px; background:#E0453A; border:none; color:#fff; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:0 2px 10px rgba(224,69,58,.35); }
.nav-nm-pill .icn { width:17px; height:17px; color:#fff; }
@media (max-width: 600px) { .nav-nm-pill { position:static; transform:none; height:36px; padding:0 13px; font-size:13px; } }
.nav-nm-pill.active { background:#c23a30; }
.nav-nm-pill.live { background:#E0453A; }
.nm-backdrop { position:fixed; inset:0; background:transparent; pointer-events:none; z-index:94; }
.nm-backdrop.open { pointer-events:auto; }
.nm-drawer { position:fixed; top:var(--navh,56px); left:0; right:0; z-index:95; transform:translateY(-130%); transition:transform .42s cubic-bezier(.3,.7,.3,1); max-height:calc(100dvh - var(--navh,56px)); overflow-y:auto; pointer-events:none; }
.nm-drawer.open { transform:translateY(0); }
.nm-drawer-inner { padding:10px 16px 12px; max-width:560px; margin:0 auto; }
.nm-drawer-inner > * { pointer-events:auto; }
.nm-drawer-close { display:block; margin:10px auto 2px; background:transparent; border:none; color:#cfd6e6; font-size:12px; font-weight:600; cursor:pointer; letter-spacing:.05em; text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* ===== VISION SHELL — bottom nav (Phase 3 step 1) ===== */
.bsub {
  position: fixed; left: 0; right: 0; bottom: 64px; z-index: 199;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px;
  background: rgba(12,18,30,0.98);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  scrollbar-width: none;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.bsub::-webkit-scrollbar { display: none; }
.bsub.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bsub button {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; font-weight: 600; font-size: 0.84rem; white-space: nowrap; cursor: pointer;
}
.bsub button.on { background: var(--ball-pink); color: #1a0510; border-color: var(--ball-pink); }
/* Instagram-style floating pill: transparent, centred, icon-only; shrinks while scrolling down. */
.bnav {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px;
  background: rgba(16,22,34,0.60);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);
  transition: padding .3s cubic-bezier(.4,.15,.2,1), gap .3s;
}
.bnav button {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); padding: 9px; border-radius: 999px;
  transition: padding .3s cubic-bezier(.4,.15,.2,1);
}
.bnav button .ic { width: 25px; height: 25px; transition: width .3s cubic-bezier(.4,.15,.2,1), height .3s cubic-bezier(.4,.15,.2,1); }
/* Shrunk state (scrolling down) — tighter, smaller icons, out of the way */
.bnav.shrink { padding: 5px 7px; gap: 2px; }
.bnav.shrink button { padding: 7px; }
.bnav.shrink button .ic { width: 21px; height: 21px; }
/* Active tab glows in its screen's signature pool-ball colour (inactive = muted) */
.bnav button.on { color: #fff; }
.bnav button.on[data-nav="home"]    { color: var(--ball-yellow); }
.bnav button.on[data-nav="matches"] { color: var(--ball-green); }
.bnav button.on[data-nav="stats"]   { color: var(--ball-blue); }
.bnav button.on[data-nav="events"]  { color: var(--ball-pink); }
.bnav button.on[data-nav="team"]    { color: var(--ball-orange); }
.bnav button.on[data-nav="training"] { color: var(--ball-red); }
.bnav button.on[data-nav="world"]    { color: var(--ball-purple); }
/* Retire the old top-tab rows + hamburger (replaced by the bottom nav) */
.tabs-wrapper { display: none !important; }
.nav-hamburger { display: none !important; }
/* Reserve space so content clears the fixed bottom nav */
.main { padding-bottom: 6.5rem; }

/* =======================================================================
   VISION DESIGN SYSTEM (Phase 3) — shared components, scoped under .vis
   so redesigned screens don't collide with the legacy screens. The vision
   palette is redeclared as local custom props so the prototype CSS ports
   verbatim. Each redesigned screen wraps its content in a .vis container.
   ======================================================================= */
.vis {
  --surf:#121826; --surf2:#161e2e; --surf3:#1b2436;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --tx:#e9eef7; --mut:#7b889f; --mut2:#5d6985;
  --green:#43c479; --red:#ef5f53; --gold:#FDBE1A; --blue:#3b9eff;
  --purple:#9b6dff; --orange:#f5912b; --pink:#ff5ea8; --teal:#3fd0c4;
  color:var(--tx);
}
.vis .num{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.01em}
.vis .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.vis .h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:.1rem 0 0}
.vis .muted{color:var(--mut)}
.vis .row-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* avatar / token */
.vis .tok{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex:0 0 auto}
.vis .tok.sq{border-radius:14px}
.vis .tok.sm{width:46px;height:46px;font-size:.92rem}
.vis .tok.ring{box-shadow:0 0 0 2px var(--gold),0 0 0 4px var(--bg)}
.vis .ic-btn{width:46px;height:46px;border-radius:13px;background:var(--surf);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.vis .icx{width:34px;height:34px;color:var(--mut)}

/* sub tabs */
.vis .tabs{display:flex;gap:26px;margin:18px 0 4px;border-bottom:1px solid var(--line);padding-bottom:0}
.vis .tab{font-size:1.05rem;font-weight:600;color:var(--mut);padding-bottom:12px;position:relative;cursor:pointer;background:none;border:none;font-family:inherit}
.vis .tab.on{color:#fff}
.vis .tab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--pink)}

/* pills */
.vis .pills{display:flex;gap:10px;margin:18px 0 6px;align-items:center;flex-wrap:wrap}
.vis .pill{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:999px;background:var(--surf);border:1px solid var(--line);color:var(--mut);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap}
.vis .pill.on{background:#fff;color:#0a0e15;border-color:#fff}
.vis .pill.icoonly{padding:11px;width:44px;justify-content:center}
.vis .pill .ic{width:17px;height:17px}

/* seg toggle */
.vis .seg{display:flex;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:5px;margin:18px 0 8px}
.vis .seg button{flex:1;border:none;background:transparent;color:var(--mut);font-weight:600;font-size:.98rem;padding:11px 6px;border-radius:10px;cursor:pointer;font-family:inherit}
.vis .seg button.on{background:#222c40;color:#fff}

/* insight */
.vis .insight{display:flex;gap:12px;align-items:flex-start;background:var(--surf);border-radius:14px;padding:15px 16px;margin:18px 0;font-size:1.02rem;line-height:1.45}
.vis .insight.bar{background:transparent;border-left:3px solid var(--purple);border-radius:0;padding:4px 0 4px 15px}
.vis .insight.bar.pink{border-color:var(--pink)}
.vis .insight .ic{flex:0 0 auto;margin-top:1px}
.vis .insight b{color:#fff;font-weight:700}
.vis .insight.bar.ins-live .ins-deeper{flex:0 0 auto;align-self:flex-start;background:transparent;border:none;color:var(--muted,#8a93a6);font-size:.72rem;font-weight:600;display:inline-flex;align-items:center;cursor:pointer;padding:2px;white-space:nowrap;opacity:.8;touch-action:manipulation}
.vis .insight.bar.ins-live .ins-deeper:hover{color:var(--gold,#F5C542);opacity:1}
.vis .insight.bar.ins-live .ins-deeper:disabled{opacity:.5;cursor:default}
.vis .insight.bar.ins-live .ins-ai{color:var(--muted,#8a93a6);font-size:.86em}
.vis .insight.bar.ins-live .ins-ai-txt{color:#c9d2e2;line-height:1.5;border-top:1px solid rgba(255,255,255,.09);padding-top:7px}

/* tiles */
.vis .tiles{display:grid;grid-template-columns:1fr 1fr;gap:30px 22px;margin-top:8px}
.vis .tile .lbl{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.vis .tile .v{font-size:3rem;line-height:1;margin:6px 0 4px}
.vis .tile .v small{font-size:1.5rem;font-weight:600}
.vis .tile .sub{font-size:.85rem;color:var(--mut)}
.vis .tile .ul{height:3px;border-radius:3px;margin-top:11px;width:64px}
.vis .tile.box{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:16px;gap:0}
.vis .tile.box .v{font-size:2.3rem;margin:2px 0 6px}
.vis .bar2{height:4px;border-radius:3px;background:#27314a;overflow:hidden;margin-top:10px}
.vis .bar2 i{display:block;height:100%;border-radius:3px}

/* card-less rows */
.vis .seghead{display:flex;align-items:center;justify-content:space-between;margin:26px 0 4px}
.vis .seghead .l{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.vis .seghead .r{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.vis .lrow{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);position:relative;cursor:pointer}
.vis .lrow .accent{position:absolute;left:-20px;top:0;bottom:0;width:4px;border-radius:0 3px 3px 0}
.vis .lrow .main{flex:1;min-width:0}
.vis .lrow .nm{font-size:1.08rem;font-weight:700;display:flex;align-items:center;gap:9px}
.vis .lrow .sub{font-size:.9rem;color:var(--mut);margin-top:3px}
.vis .lrow .sub .tag{font-weight:600}
.vis .lrow .rt{text-align:right;flex:0 0 auto}
.vis .lrow .score{font-size:1.5rem}
.vis .lrow .res{font-size:.72rem;font-weight:700;letter-spacing:.08em}
.vis .badge{font-size:.66rem;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px}
.vis .bdg-epbf{background:rgba(59,158,255,.16);color:var(--blue)}
.vis .bdg-knbb{background:rgba(253,190,26,.16);color:var(--gold)}
.vis .chev{color:var(--mut2);font-size:1.3rem}

/* h2h drawer */
.vis .h2h{background:var(--surf2);border-left:3px solid var(--purple);border-radius:0 14px 14px 0;padding:16px;margin:6px 0 4px}
.vis .h2h .hd{display:flex;align-items:center;justify-content:space-between;color:#fff;font-weight:600;font-size:.98rem;margin-bottom:14px}
.vis .h2h .hd .ic{color:var(--purple);margin-right:8px}
.vis .h2h .mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.vis .h2h .mc{background:var(--surf3);border-radius:12px;padding:13px 12px}
.vis .h2h .mc .v{font-size:1.5rem}.vis .h2h .mc .l{font-size:.78rem;color:var(--mut);margin-top:3px}
.vis .h2h .tell{display:flex;gap:9px;margin-top:14px;font-size:.95rem;line-height:1.45;color:#c9d3e6}
.vis .h2h .tell .ic{color:var(--purple);flex:0 0 auto}

/* rating ring */
.vis .ringwrap{position:relative;width:280px;max-width:80%;margin:14px auto 6px;aspect-ratio:1}
.vis .ringwrap .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.vis .ringwrap .big{font-size:5.4rem;line-height:.8;color:#fff}
.vis .ringwrap .meta{font-size:.82rem;color:var(--mut);letter-spacing:.04em}

/* standings */
.vis .stand{display:flex;align-items:center;gap:14px;padding:15px 12px;border-bottom:1px solid var(--line)}
.vis .stand .pos{font-size:1.05rem;color:var(--mut);width:14px;font-weight:600}
.vis .stand .nm{flex:1;font-size:1.05rem;color:#cdd6e8}
.vis .stand .pt{font-weight:700}
.vis .stand.me{background:var(--surf2);border-radius:12px;border-bottom:1px solid transparent;margin:0 -8px;padding:15px 20px}
.vis .stand.me .pos{color:var(--pink)}.vis .stand.me .nm{color:#fff;font-weight:700}.vis .stand.me .pt{color:var(--gold)}

/* roster */
.vis .ros{display:flex;align-items:center;gap:14px;margin:18px 0}
.vis .ros .main{flex:1}
.vis .ros .nm{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.vis .ros .w{font-weight:700}.vis .ros .w small{color:var(--mut);font-weight:600;font-size:.7em}
.vis .you{font-size:.6rem;font-weight:700;letter-spacing:.06em;background:rgba(59,158,255,.18);color:var(--blue);padding:3px 7px;border-radius:5px}

/* mvp */
.vis .mvp{background:var(--surf);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:10px}
.vis .mvp .felt{background:linear-gradient(160deg,#1d3a2f,#13251f);padding:18px;position:relative}
.vis .mvp .gtag{font-size:.66rem;font-weight:700;letter-spacing:.08em;background:rgba(0,0,0,.4);color:var(--gold);padding:5px 10px;border-radius:7px;display:inline-block}
.vis .mvp .body{padding:16px}
.vis .mvp .who{display:flex;align-items:center;gap:13px}
.vis .mvp .who .nm{font-weight:700;font-size:1.12rem}.vis .mvp .who .ds{color:var(--mut);font-size:.92rem;margin-top:2px}
.vis .mvp .stats{display:flex;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.vis .mvp .stats div{flex:1;text-align:center}
.vis .mvp .stats .v{font-size:1.4rem}.vis .mvp .stats .l{font-size:.76rem;color:var(--mut);margin-top:2px}

/* dots pager */
.vis .dots{display:flex;justify-content:center;gap:11px;padding:24px 0 6px}
.vis .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,94,168,.3)}
.vis .dots i.on{width:24px;border-radius:4px;background:var(--pink)}

/* legend */
.vis .legend{display:flex;flex-direction:column;gap:13px}
.vis .legend .lg{display:flex;align-items:center;gap:12px;font-size:1rem}
.vis .legend .lg i{width:9px;height:9px;border-radius:50%}
.vis .legend .lg .nm{flex:1;color:#cdd6e8}.vis .legend .lg .v{font-weight:700}
.vis a{color:var(--blue);text-decoration:none;font-weight:600;font-size:.86rem}

/* next-match vertical carousel (Home) — cards stack, pink dots rail on the right */
.vis .vis-nm-wrap{display:flex;align-items:stretch;gap:12px}
.vis .vis-nm-stage{flex:1;min-width:0;position:relative}
.vis .vis-nm-stage.is-multi .vis-nm-card{position:absolute;left:0;right:0;top:0;will-change:transform,opacity;transition:transform .42s cubic-bezier(.3,.7,.3,1),opacity .42s ease}
.vis .vis-nm-dots{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;flex:0 0 auto}
.vis .vis-nm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,94,168,.3);border:none;padding:0;cursor:pointer;transition:height .3s ease,background .3s ease}
.vis .vis-nm-dot.on{height:24px;border-radius:5px;background:var(--pink)}

/* Home account button — pill (avatar + rating-band ring + chevron) opening the account menu */
.vis .vis-acct-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px 5px 5px;border-radius:999px;background:var(--surf);border:1px solid var(--line);cursor:pointer;font-family:inherit;flex:0 0 auto}
.vis .vis-acct-pill .vis-acct-av{width:42px;height:42px;border-radius:50%;background:#1c2333;color:var(--tx);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px var(--ring,var(--gold))}
.vis .vis-acct-pill .vis-acct-chev{width:18px;height:18px;color:var(--mut);flex:0 0 auto}
/* Navbar removed (Phase 3): reserve the status-bar gap the sticky navbar used to provide */
.main{padding-top:calc(1rem + env(safe-area-inset-top))}

/* Editable Home stat tiles — drag-reorder, add/remove (max 6) */
.vis .vis-tiles-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 2px}
.vis .vis-edit-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surf);border:1px solid var(--line);color:var(--mut);font-family:inherit;font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer}
.vis .vis-edit-btn .icn{width:14px;height:14px}
.vis .vis-edit-btn.active{background:var(--pink);border-color:var(--pink);color:#fff}
.vis .vis-tiles{margin-top:8px}
/* 5–6 tiles → 3 columns (2 rows). Barlow Condensed is narrow, so keep the numbers big */
.vis .tiles.cols3{grid-template-columns:1fr 1fr 1fr;gap:18px 10px}
.vis .tiles.cols3 .tile .v{font-size:2.15rem}
.vis .tiles.cols3 .tile .v small{font-size:1rem}
.vis .tiles.cols3 .tile .lbl{font-size:.58rem;letter-spacing:.03em}
.vis .tiles.cols3 .tile .sub{font-size:.66rem;line-height:1.25}
.vis .tiles.cols3 .tile .ul{width:34px;margin-top:7px}
.vis .tiles.cols3 .tile.editing{padding:10px 9px}

/* Name colour personalisation — tappable name + ball picker */
.vis .vis-name-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:none;padding:0;margin:.1rem 0 0;font-family:inherit;cursor:pointer;font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--tx)}
.vis .vis-name-btn.ball8{-webkit-text-stroke:1.4px #fff;text-stroke:1.4px #fff}
.vis .vis-name-btn.ball9{-webkit-text-stroke:1px #fff;text-stroke:1px #fff}
.vis .vis-name-edit{width:16px;height:16px;color:var(--mut);flex:0 0 auto}
@media (max-width:600px){.vis .vis-name-btn{font-size:1rem}.vis .vis-name-edit{width:13px;height:13px}}
.vis .vis-acct-av.ball8{-webkit-text-stroke:.7px #fff;text-stroke:.7px #fff}
.vis .vis-acct-av.ball9{-webkit-text-stroke:.6px #fff;text-stroke:.6px #fff}
#csNameSheet{display:none}
#csNameSheet.open{display:block}

/* Vision Stats screen */
.vis .stats-kebab{background:none;border:none;color:var(--mut);cursor:pointer;padding:6px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vis .stats-kebab svg{width:22px;height:22px}
.vis .stats-ring{display:flex;justify-content:center;margin-top:2px}
.vis .stats-ring .home-rr{width:100%;margin:.1rem 0 .5rem}
.vis .stats-ring .home-rr-svg{width:140px;height:140px}
.vis #statsTiles .tiles{gap:20px 22px}
.vis #statsTiles .vis-tiles-head{margin:18px 0 2px}
#statsVis .home-rr-toggle{display:none}   /* KNBB/EPBF handled by the .seg instead */
/* Charts sub-tab — season filter pills (horizontal scroll) + stacked SVG perf-viz cards */
.vis .chart-seasons{margin:10px 0 4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vis .chart-seasons::-webkit-scrollbar{display:none}
.vis .chart-seasons .pill{padding:8px 15px;font-size:.88rem}
.vis .stats-charts{margin-top:10px}
.vis .stats-charts .pv-card{min-height:auto;margin-bottom:30px}
/* CH2 — Charts filter rail: sticky horizontal chip row; only the selected card renders below it. */
.vis .cs-chart-rail{position:sticky;top:0;z-index:6;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:9px 0;margin-top:6px;background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vis .cs-chart-rail::-webkit-scrollbar{display:none}
.vis .cs-chart-rail .pill{flex:0 0 auto;padding:8px 14px;font-size:.86rem}

/* Matches — month-grouped list rows are tappable → H2H sheet */
.vis .opp-tok{width:38px;height:38px;border-radius:50%;background:var(--surf3);color:var(--mut);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:0 0 auto}
.vis .lrow .omn{flex:1;min-width:0}
.vis .ic-btn{cursor:pointer}
/* Vision Events screen */
/* Collapsible month/year groups (Matches + Events standard) */
.vis .cgrp-bar{display:flex;justify-content:flex-end;margin-top:6px}
.vis .cgrp-all{background:none;border:none;color:var(--mut);font-size:.78rem;font-weight:600;cursor:pointer;padding:4px 2px;letter-spacing:.02em}
.vis .cgrp-all:hover{color:var(--text)}
.vis .cgrp-head{cursor:pointer;user-select:none}
.vis .cgrp-r{display:inline-flex;align-items:center;gap:7px}
.vis .cgrp-chev{color:var(--mut);transition:transform .2s;flex:0 0 auto}
.vis .cgrp.open .cgrp-chev{transform:rotate(180deg)}
.vis .ev-row{cursor:pointer}
.vis .ev-tokwrap{flex:0 0 auto}
.vis .ev-tok{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;line-height:1}
.vis .ev-tok small{font-size:.58em;font-weight:700;margin-left:1px}
.vis .ev-tok-up{background:rgba(59,158,255,.14);color:var(--blue);font-size:1rem}
.vis .ev-tok-q{font-size:1.15rem;font-weight:700}
.vis .ev-rt{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.vis .ev-prize{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:var(--green)}
.vis .ev-legend{background:var(--surf);border:1px solid var(--line);color:var(--mut);font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:5px 12px;cursor:pointer}
.ev-lg{display:flex;flex-direction:column;gap:11px;padding:4px 2px 2px}
.ev-lg-row{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--text)}
.ev-lg-dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto}
.ev-lg-foot{font-size:.8rem;color:var(--mut);line-height:1.45;margin-top:14px}
/* Vision Team screen */
.vis .team-row{cursor:pointer}
.vis .team-tokwrap{flex:0 0 auto}
.vis .team-tok{width:44px;height:44px;border-radius:12px;object-fit:cover;display:block;flex:0 0 auto}
.vis .team-tok-i{display:flex;align-items:center;justify-content:center;background:var(--surf3);color:var(--mut);font-weight:700;font-size:.92rem}
.vis .team-subrow{display:flex;align-items:center;gap:9px;margin-top:5px}
.vis .team-type-chip{border:none;border-radius:7px;padding:3px 9px;font-weight:700;font-size:.72rem;cursor:pointer;line-height:1.3}
.vis .team-chev{transition:transform .2s}
.vis .team-chev.open{transform:rotate(90deg)}
.vis .team-members{padding:4px 2px 14px 57px}
.vis .team-mem{display:flex;align-items:center;gap:9px;padding:5px 0}
.vis .team-mem-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.vis .team-mem-av-i{display:flex;align-items:center;justify-content:center;background:var(--surf3);color:var(--mut);font-size:.66rem;font-weight:700}
.vis .team-mem-nm{font-size:.92rem;flex:1;min-width:0}
.vis .team-mem-cap{font-size:.68rem;color:var(--mut)}
.vis .team-mem-flag{width:18px;height:12px;object-fit:cover;border-radius:2px}
.vis .team-mem-empty{font-size:.85rem;color:var(--mut);padding:4px 0}
.vis .team-loc{display:inline-flex;align-items:center;gap:3px;color:var(--mut);font-size:.82rem;white-space:nowrap}
.vis .team-loc-ic{width:12px;height:12px;color:var(--ball-pink);opacity:.85;flex:0 0 auto}
.vis .team-venue{display:flex;align-items:flex-start;gap:8px;padding:0 0 10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.vis .team-venue-ic{width:16px;height:16px;color:var(--ball-pink);flex:0 0 auto;margin-top:2px}
.vis .team-venue-txt{min-width:0}
.vis .team-venue-nm{font-size:.92rem;font-weight:600;color:var(--tx,#e9eef7)}
.vis .team-venue-addr{font-size:.78rem;color:var(--mut);margin-top:1px;line-height:1.35}
.tg-home-line{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:var(--col);margin-left:auto;margin-right:auto;background:var(--surf,rgba(255,255,255,.03));border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:10px 13px;color:var(--tx,#e9eef7);cursor:pointer;text-align:left;font-family:inherit}
.tg-home-line:hover{border-color:rgba(255,255,255,.18)}
.vis .team-del{margin-top:10px;background:transparent;border:1px solid rgba(239,95,83,.4);color:#ef5f53;border-radius:9px;padding:7px 14px;font-size:.82rem;font-weight:600;cursor:pointer}
.vis .team-deltoggle{margin-top:14px;background:none;border:none;color:var(--mut);font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.vis .team-deleted{margin-top:10px}
.vis .team-del-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surf2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;opacity:.6}
.vis .team-del-row .nm{flex:1;font-size:.9rem;text-decoration:line-through;color:var(--mut)}
.vis .team-restore{background:var(--surf3);border:1px solid var(--line);color:var(--text);border-radius:7px;font-size:.78rem;font-weight:600;padding:5px 12px;cursor:pointer}
.vis .ic-btn.on{color:var(--pink);border-color:var(--pink)}
#csHtmlSheet .mf-sec{margin-bottom:15px}
#csHtmlSheet .mf-lbl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
#csHtmlSheet .mf-chips{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
#csHtmlSheet .mf-chips::-webkit-scrollbar{display:none}
#csHtmlSheet .mf-chip{flex:0 0 auto;background:var(--surface3);border:1px solid var(--border);color:var(--muted);font-family:inherit;font-weight:600;font-size:.88rem;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
#csHtmlSheet .mf-chip.on{background:var(--ball-pink);border-color:var(--ball-pink);color:#fff}
#csHtmlSheet .mf-clear{width:100%;margin-top:6px;background:transparent;border:1px solid var(--border);border-radius:9px;color:var(--muted);font-family:inherit;font-size:.85rem;font-weight:600;padding:.6rem;cursor:pointer}
.vis .cs-mr-wrap{cursor:pointer;border-radius:10px;transition:background .15s}
.vis .cs-mr-wrap:active{background:rgba(255,255,255,.04)}
/* generic HTML bottom-sheet (H2H) — needs its own display + .in rules (id-scoped, per gotcha) */
#csHtmlSheet{display:none}
#csHtmlSheet.open{display:block}
#csHtmlSheet.in .cs-sheet-backdrop{opacity:1}
#csHtmlSheet.in .cs-sheet{transform:translateY(0)}
#csHtmlSheet .h2h-mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:2px 0 4px}
#csHtmlSheet .h2h-mini .mc{background:var(--surface2);border-radius:12px;padding:13px 12px;text-align:center}
#csHtmlSheet .h2h-mini .v{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.6rem;color:var(--text)}
#csHtmlSheet .h2h-mini .v small{font-size:1rem}
#csHtmlSheet .h2h-mini .l{font-size:.74rem;color:var(--muted);margin-top:2px}
#csHtmlSheet .h2h-eye{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
#csNameSheet.in .cs-sheet-backdrop{opacity:1}
#csNameSheet.in .cs-sheet{transform:translateY(0)}
#csNameSheet .nb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:8px 2px 4px}
#csNameSheet .nb-opt{background:none;border:none;padding:6px;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#csNameSheet .nb-opt.sel{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px var(--ball-pink)}
#csNameSheet .nb-ball{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;font-family:'Barlow Condensed',sans-serif}
#csNameSheet .nb-8{background:#14181f;color:#fff;box-shadow:inset 0 0 0 2px #fff}
#csNameSheet .nb-stripe{background:#fff;position:relative;overflow:hidden}
#csNameSheet .nb-stripe::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:58%;background:var(--bc)}
#csNameSheet .nb-stripe::after{content:"9";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0a0e15;z-index:1}
.vis .tile{position:relative}
.vis .tile.editing{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:13px 14px;animation:visWiggle .42s ease-in-out infinite alternate;touch-action:none;user-select:none}
.vis .tile.editing .ul{display:none}
.vis .tile.dragging{opacity:.22}
@keyframes visWiggle{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}
.vis .vis-tile-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;border:2px solid var(--bg);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;padding:0}
.vis .vis-tile-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:96px;border:1.5px dashed var(--line2);border-radius:14px;background:transparent;color:var(--mut);cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600}
.vis .vis-add-plus{font-size:1.5rem;line-height:1}

/* ── AI Coach screen ─────────────────────────────────────────────── */
.ai-coach-open{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:6px 12px 6px 10px;cursor:pointer;color:var(--text);font-family:inherit;font-weight:700;font-size:.76rem;line-height:1}
.ai-coach-open svg{flex:0 0 auto}
.ai-coach-wrap{position:fixed;inset:0;z-index:200;background:#0d1017;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s;visibility:hidden;pointer-events:none}
.ai-coach-wrap.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
.ac-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--border)}
.ac-back{background:none;border:none;color:var(--text);cursor:pointer;padding:0;display:flex;flex:0 0 auto}
.ac-title{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.ac-sub{font-size:.66rem;color:var(--muted)}
.ac-left{margin-left:auto;font-size:.64rem;font-weight:700;color:#5AA9FF;background:rgba(22,104,255,.14);border:1px solid rgba(22,104,255,.3);padding:5px 9px;border-radius:999px;white-space:nowrap}
.ac-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 8px}
.ac-suggest{display:flex;gap:7px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.ac-suggest::-webkit-scrollbar{display:none}
.ac-chip{flex:0 0 auto;font-size:.72rem;font-weight:600;color:var(--text);background:var(--surface3,#1b2436);border:1px solid var(--border);padding:7px 12px;border-radius:999px;white-space:nowrap;cursor:pointer;font-family:inherit}
.ac-msgs{display:flex;flex-direction:column;gap:16px;padding-bottom:6px}
.ac-q{align-self:flex-end;max-width:82%;background:#1668FF;color:#fff;font-size:.86rem;font-weight:600;padding:9px 13px;border-radius:14px 14px 4px 14px;word-wrap:break-word}
.ac-a{align-self:flex-start;max-width:94%;background:var(--surface2);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:12px 14px}
.ac-a-hd{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ac-b{display:flex;gap:9px;font-size:.85rem;line-height:1.45;color:var(--text);margin-bottom:8px}
.ac-b:last-child{margin-bottom:0}
.ac-b .dot{color:#1668FF;font-weight:800;flex:0 0 auto}
.ac-focus{margin-top:10px;padding-top:9px;border-top:1px solid var(--border);font-size:.8rem;color:var(--text);line-height:1.4}
.ac-focus b{color:var(--gold,#FDBE1A)}
.ac-think{display:flex;gap:5px;padding:3px 0}
.ac-think span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:acPulse 1s infinite ease-in-out}
.ac-think span:nth-child(2){animation-delay:.15s}
.ac-think span:nth-child(3){animation-delay:.3s}
@keyframes acPulse{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ac-input{display:flex;align-items:center;gap:9px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.ac-input input{flex:1;background:var(--surface3,#1b2436);border:1px solid var(--border);border-radius:999px;padding:11px 15px;color:var(--text);font-family:inherit;font-size:16px;outline:none}
.ac-input input:focus{border-color:#1668FF}
.ac-send{width:40px;height:40px;border-radius:50%;background:#1668FF;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.ac-send:disabled{opacity:.5}
.ac-scroll{overflow-x:hidden}
.ac-msgs{min-width:0}
.ac-q,.ac-a{overflow-wrap:anywhere;box-sizing:border-box}
.ac-b>div{min-width:0;overflow-wrap:anywhere}

/* ============================================================================
   DESKTOP PREMIUM — the shell. Additive only; nothing below 1100px changes.
   The nav pill becomes a full-height edge rail (mockup spec, 22 Jul): brand
   mark top, icon column centred, account initials bottom, tinted active pill
   per tab, hover label chips. .bnav-logo/.bnav-acct are injected by
   csRailExtras() and hidden on mobile here.
   ============================================================================ */
.bnav-logo, .bnav button.bnav-logo-btn, .bnav button.bnav-acct, .bnav button.bnav-coach { display: none; }

@media (min-width: 1100px) {
  .main { padding: 1.5rem 2rem 3rem 96px; max-width: none; }   /* clear the rail; desktop content owns the full screen (tabs self-cap where needed) */

  .bnav {
    left: 0; right: auto; top: 0; bottom: 0;
    transform: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 64px; padding: 16px 0;
    border-radius: 0; border: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,15,24,0.72);
    box-shadow: none;
  }
  .bnav.shrink { padding: 16px 0; gap: 8px; }         /* neutralise the scroll-shrink on desktop */
  .bnav button, .bnav.shrink button { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
  .bnav button .ic, .bnav.shrink button .ic { width: 22px; height: 22px; }
  @media (hover: hover) {
    .bnav button:hover { background: rgba(255,255,255,0.05); color: var(--text); }
  }

  /* Active tab = a tinted pill in its ball colour (icon colour rules are global) */
  .bnav button.on[data-nav="home"]     { background: rgba(245,197,66,0.12); }
  .bnav button.on[data-nav="world"]    { background: rgba(155,109,255,0.12); }
  .bnav button.on[data-nav="stats"]    { background: rgba(59,158,255,0.12); }
  .bnav button.on[data-nav="events"]   { background: rgba(255,94,168,0.12); }
  .bnav button.on[data-nav="team"]     { background: rgba(245,145,43,0.12); }
  .bnav button.on[data-nav="training"] { background: rgba(224,69,58,0.12); }

  /* Brand mark pinned top: the real logo mark, sized to the rail (the rail owns
     the brand on desktop — the in-header mark is hidden below) */
  /* MUST be `.bnav button.bnav-logo-btn`, not `.bnav-logo-btn`: further down this same block
     `.bnav button { position: relative }` (the hover-label-chip anchor) is both later AND more
     specific, so a bare `.bnav-logo-btn { position:absolute }` loses — the logo then flows as a
     centred flex item and `top:10px` shoves it into the Home icon. Idris caught exactly that. */
  .bnav button.bnav-logo-btn {
    display: block;
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: auto; height: auto;
    background: none; border: 0; padding: 0; margin: 0; line-height: 0; cursor: pointer;
  }
  .bnav button.bnav-logo-btn::after { display: none; }   /* no hover chip on the brand mark */
  .bnav-logo-btn:active { opacity: .7; }
  .bnav-logo-btn:focus-visible { outline: 2px solid var(--ball-pink, #FF5EA8); outline-offset: 3px; border-radius: 8px; }
  .bnav-logo {
    display: block; width: 52px; height: auto;
  }
  .cs-hdr-mark { display: none !important; }   /* must beat the img inline display:block */

  /* FULL-SCREEN OVERLAYS MUST CLEAR THE RAIL. `.main` gets 96px of left padding on desktop, but a
     position:fixed overlay is not inside `.main` — it starts at x=0 and the rail is drawn on top of
     it, so the first 64px of every line is hidden behind the icons. Idris saw it on the rack-by-rack
     view: "vs Yu-Chi Chang" read "-Chi Chang", "MATCH NOTE" read "NOTE" (6 Aug). Harmless for the
     tournament drawer, which is re-docked static inside #csTournPanel — `left` does nothing there. */
  .trn-detail-wrap, .ai-coach-wrap { left: 64px; }

  /* The rail owns the account + AI Coach on desktop — hide the per-screen header pills
     (every screen renders them; with the rail they are duplicates) */
  .vis .vis-acct-pill, .vis .ai-coach-open, .vis-acct-pill, .ai-coach-open:not(.bnav-coach) { display: none; }

  /* AI Coach icon above the account button */
  .bnav button.bnav-coach {
    display: flex; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 12px; background: none;
    align-items: center; justify-content: center; padding: 0;
  }
  .bnav button.bnav-coach svg { width: 19px; height: 19px; }
  @media (hover: hover) { .bnav button.bnav-coach:hover { background: rgba(22,104,255,0.12); } }

  /* Account initials pinned bottom — ring colour = the rating-band ball colour,
     set by csRailExtras via csRatingBall (same rule as every header account pill) */
  .bnav button.bnav-acct {
    display: flex; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid var(--ball-yellow); background: none;
    color: var(--text); font-size: 0.72rem; font-weight: 700; font-family: inherit;
    align-items: center; justify-content: center;
  }
  @media (hover: hover) { .bnav button.bnav-acct:hover { background: rgba(255,255,255,0.06); } }

  /* Hover label chip from each button's aria-label (no new markup) */
  .bnav button { position: relative; }
  .bnav button::after {
    content: attr(aria-label);
    position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    background: rgba(16,22,34,0.95); color: #e9eef7;
    font-size: 0.76rem; font-weight: 600; letter-spacing: .01em;
    padding: 5px 11px; border-radius: 9px; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.10);
    opacity: 0; pointer-events: none; transition: opacity .14s ease;
    z-index: 250;
  }
  @media (hover: hover) { .bnav button:hover::after { opacity: 1; } }

  /* Pages WITHOUT a desktop composition yet keep a centred, intentional column
     (each page graduates to full width when it gets its own desktop pass) */
  .tab-content:not(#tab-tournaments) { max-width: 900px; margin: 0 auto; }

  /* ---- Tournaments two-pane (master-detail; spike-approved 22 Jul) ----
     The drawers are siblings of #eventsVis inside #csTournPanel, so a live-poll
     list re-render never wipes an open detail. Mobile keeps the slide-up drawer. */
  #csTournPanel { display: flex; align-items: flex-start; gap: 30px; }   /* fluid: list is fixed-width, the detail pane takes everything else */
  #csTournPanel #eventsVis { flex: 1 1 auto; min-width: 0; }
  #csTournPanel:has(.trn-detail-wrap.open) #eventsVis {
    flex: 0 0 375px; max-width: 375px;
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    scrollbar-width: none; padding-bottom: 2rem;
  }
  #csTournPanel .trn-detail-wrap {
    position: static; inset: auto; transform: none; visibility: visible; pointer-events: auto;
    background: transparent; padding: 0.4rem 0 3rem; overflow: visible; transition: none; will-change: auto;
    flex: 1 1 auto; min-width: 0; display: none;
  }
  #csTournPanel .trn-detail-wrap.open { display: block; }
  #csTournPanel:has(#trnFullWrap.open) #trnDetailWrap.open { display: none; }  /* full draw owns the pane */
  #csTournPanel .trn-back { display: none; }        /* two-pane needs no back button */
  body.trn-detail-open { overflow: auto; }          /* the mobile modal scroll-lock is meaningless here */

  /* List density (the anti-mobile-stretch layer) */
  #eventsVis .lrow.ev-row { padding: 8px 8px; gap: 11px; border-radius: 10px; border-bottom: none; }
  @media (hover: hover) { #eventsVis .ev-row:hover { background: rgba(255,255,255,0.035); } }
  #eventsVis .ev-row.sel { background: rgba(255,94,168,0.07); box-shadow: inset 2px 0 0 var(--ball-pink); }
  #eventsVis .ev-tok { width: 34px; height: 34px; border-radius: 9px; font-size: 0.82rem; }
  #eventsVis .omn .nm { font-size: 0.9rem !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #eventsVis .omn .sub { font-size: 0.73rem; }
  #eventsVis .ev-rt .ev-prize { font-size: 0.78rem; }

  /* Detail composition: lift the mobile 600px caps, let the bracket own the pane width */
  .trn-detail-wrap #csGroupBody, .trn-detail-wrap #csSchedBody { max-width: 900px !important; }  /* tables stay readable; the bracket uses the full pane */
  .trn-detail-wrap .vd-dko-scroll { overflow: visible; }
  .trn-detail-wrap .vd-dko-scroll svg { width: 100%; height: auto; min-width: 0 !important; }
  /* The single-elim tree (.cs-ko-bracket wraps csVisBracketSvg) scales like the DKO
     lanes, but capped so cards grow ~1.5x, not comically; app font on the svg text */
  .trn-detail-wrap .cs-ko-bracket { overflow: visible; }
  .trn-detail-wrap .cs-ko-bracket > div { overflow: visible !important; }
  .trn-detail-wrap .cs-ko-bracket svg { width: 100%; max-width: 1080px; height: auto; min-width: 0 !important; display: block; margin: 0 auto; }
  .trn-detail-wrap .cs-ko-bracket svg text { font-family: inherit; }
}



/* ── Legacy (pre-vision) tab markup — belt-and-braces hide ──────────────────────────────────────
   The old Performance/Opponents UI still ships in index.html because live code (renderMilestone,
   setupAISummary, renderMetrics…) reads those elements. Until that coupling is removed, the markup
   was hidden ONLY by a JS line in loadPerformanceTab/loadOpponentsTab that runs on tab open — so its
   DEFAULT state was visible, and any interruption of that path (a render error, a tab shown before
   the loader finishes) painted the old screen. Idris hit exactly that once on mobile (25 Jul 2026).
   Hiding it in CSS makes "not visible" the default; the elements stay in the DOM so the feeders
   still work. The vision hosts (#statsVis / #matchesVis) are excluded and render as normal. */
#tab-performance > *:not(#statsVis),
#tab-opponents   > *:not(#matchesVis) { display: none !important; }
.nav-acct-ver{padding:9px 14px 4px;font-size:.66rem;color:var(--muted,#8a93a6);text-align:center;letter-spacing:.02em}