/* ─── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  /* DARK THEME (default) */
  --bg-primary:     #0A0A0F;
  --bg-card:        #141420;
  --bg-input:       #1E1E2E;
  --border:         #2A2A3A;
  --text-primary:   #FFFFFF;
  --text-secondary: #8888AA;
  --accent-teal:    #00D4C8;
  --accent-brand:   #2B5CE6;
  --accent-gold:    #F5A623;
  --accent-red:     #FF4757;
  --accent-green:   #2ED573;
  --accent-blue:    #1B6CA8;

  /* Design system token layer (Phase 1 compatibility mapping) */
  --surface-base:    var(--bg-primary);
  --surface-card:    var(--bg-card);
  --surface-raised:  var(--bg-input);

  --text-hi:         var(--text-primary);
  --text-body:       var(--text-primary);
  --text-muted:      var(--text-secondary);
  --text-soft:       var(--text-secondary);

  --brand-blue:      var(--accent-brand);
  --brand-teal:      var(--accent-teal);
  --brand-gradient:  linear-gradient(135deg, var(--brand-blue), var(--brand-teal));

  --score-strike:    var(--accent-teal);
  --score-strike-symbol: var(--danger);
  --score-spare:     var(--accent-gold);
  --score-open:      var(--text-secondary);
  --success:         var(--accent-green);
  --danger:          var(--accent-red);
  --warning:         var(--accent-gold);

  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-7:         28px;
  --space-8:         32px;
  --space-9:         36px;
  --space-10:        40px;
  --space-11:        44px;
  --space-12:        48px;

  /* Layout */
  --nav-height:     72px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --header-height:  60px;
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      20px;
  --radius-pill:    999px;
  --screen-pad:     clamp(16px, 4.5vw, 24px);
  --section-gap:    16px;
  --stack-gap:      12px;
  --card-shell-pad-x: 12px;
  --card-shell-pad-y: 12px;

  /* Typography */
  --font-display:   'Bebas Neue', 'Barlow Condensed', sans-serif;
  --font-body:      'IBM Plex Sans', 'Barlow', sans-serif;
  --font-mono:      'DM Mono', monospace;

  /* Transitions */
  --transition:     0.2s ease;
  --motion-fast:     120ms ease-out;
  --motion-standard: 180ms ease-out;
  --motion-slow:     260ms ease-out;

  --shadow-soft:      0 8px 24px rgba(0,0,0,0.16);
  --shadow-raised:    0 16px 40px rgba(0,0,0,0.22);
  --overlay-scrim:    rgba(0,0,0,0.62);
}

body.theme-light {
  --bg-primary:     #F5F5F8;
  --bg-card:        #FFFFFF;
  --bg-input:       #EEEEF5;
  --border:         #DDDDE8;
  --text-primary:   #0A0A0F;
  --text-secondary: #666680;
  --accent-teal:    #00A89E;
  --accent-brand:   #2B5CE6;
  --accent-gold:    #D4880A;
  --accent-red:     #E0313F;
  --accent-green:   #1AB55A;
  --accent-blue:    #1B6CA8;

  --surface-base:    var(--bg-primary);
  --surface-card:    var(--bg-card);
  --surface-raised:  var(--bg-input);

  --text-hi:         var(--text-primary);
  --text-body:       var(--text-primary);
  --text-muted:      var(--text-secondary);
  --text-soft:       var(--text-secondary);

  --brand-blue:      var(--accent-brand);
  --brand-teal:      var(--accent-teal);
  --brand-gradient:  linear-gradient(135deg, var(--brand-blue), var(--brand-teal));

  --score-strike:    var(--accent-teal);
  --score-spare:     var(--accent-gold);
  --score-open:      var(--text-secondary);
  --success:         var(--accent-green);
  --danger:          var(--accent-red);
  --warning:         var(--accent-gold);

  --shadow-soft:      0 8px 24px rgba(16,24,40,0.08);
  --shadow-raised:    0 16px 40px rgba(16,24,40,0.10);
  --overlay-scrim:    rgba(17,19,26,0.42);
}


/* ─── POLISH & ACCESSIBILITY ─────────────────────────────────── */
html {
  color-scheme: dark;
  scrollbar-gutter: stable;
}

body.theme-light {
  color-scheme: light;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

@media (min-width: 600px) {
  body {
    background: var(--bg-primary);
  }

  body.theme-light {
    background: var(--bg-primary);
  }

  #app {
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
  }

  body.theme-light #app {
    box-shadow: 0 16px 40px rgba(10,10,15,0.06);
    border-left: none;
    border-right: none;
  }

  body.theme-light #bottom-nav {
    box-shadow: none;
    border-left: none;
    border-right: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--surface-base);
  color: var(--text-body);
  min-height: 100dvh;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  transition: background var(--transition), color var(--transition);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Prevent text selection during fast tapping */
  -webkit-user-select: none;
  user-select: none;
}

.screen-pad {
  padding-left: var(--screen-pad);
  padding-right: var(--screen-pad);
}

/* ─── APP SHELL ─────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* app shell never scrolls */
  background: var(--surface-base);
}

/* ─── TOP HEADER ────────────────────────────────────────────── */
#app-header {
  position: relative;
  z-index: 100;
  height: var(--header-height);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

#app-header.is-elevated {
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

.app-logo {
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
}

.app-logo svg {
  width: 100%;
  height: 100%;
}

.app-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-hi);
  line-height: 1;
}

.app-title span {
  color: var(--accent-brand);
}

.dev-build-badge {
  display: none;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(245,166,35,0.45);
  background: rgba(245,166,35,0.12);
  color: var(--accent-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  line-height: 1;
}

body.dev-build .dev-build-badge {
  display: inline-flex;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  width: var(--space-11);
  height: var(--space-11);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
  touch-action: manipulation;
}

.icon-btn:active {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-hi);
}

/* ─── SCREEN CONTAINER ──────────────────────────────────────── */
#screen-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* padding for fixed nav at bottom */
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  position: relative;
}

/* Hide scrollbar */
#screen-container::-webkit-scrollbar { display: none; }
#screen-container { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── SCREENS ───────────────────────────────────────────────── */
.screen {
  display: none;
  animation: screenIn 0.18s ease;
}

.screen.active {
  display: block;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── BOTTOM NAV ────────────────────────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 200;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

#bottom-nav.is-elevated {
  box-shadow: 0 -10px 28px rgba(0,0,0,0.18);
}

.nav-item {
  flex: 1;
  height: var(--nav-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast), opacity var(--motion-fast);
  touch-action: manipulation;
  min-width: var(--space-11);
  padding: 10px 0 8px;
  position: relative;
}

.nav-item.active {
  color: var(--brand-teal);
}

.nav-item:active {
  opacity: 0.7;
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
}

/* Active indicator dot */
.nav-item.active::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-teal);
}

/* Fab-style center button (New Game) */
.nav-item.nav-primary {
  position: relative;
}

.nav-item.nav-primary .nav-fab {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-teal), #007A74);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 212, 200, 0.35);
  transition: transform var(--transition), box-shadow var(--transition);
  margin-top: -8px;
}

.nav-item.nav-primary:active .nav-fab {
  transform: scale(0.93);
  box-shadow: 0 2px 8px rgba(0, 212, 200, 0.25);
}

.nav-item.nav-primary .nav-label {
  color: var(--accent-teal);
}

.nav-item.nav-primary::after {
  display: none;
}

/* ─── HOME DASHBOARD (Screen 1 content) ─────────────────────── */
.home-hero {
  padding-top: 24px;
  padding-bottom: var(--section-gap);
}

.home-greeting {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.home-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--text-primary);
}

.home-headline em {
  font-style: normal;
  color: var(--accent-teal);
}

.home-section {
  padding-top: 0;
  padding-bottom: var(--space-3);
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.section-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-teal);
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 0;
  touch-action: manipulation;
}

.home-bowler-hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}

.home-bowler-hero-card:active {
  border-color: color-mix(in srgb, var(--accent-teal) 40%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 38%, var(--surface-card));
  transform: scale(0.995);
}

.home-bowler-hero-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.home-bowler-hero-card .player-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}

.home-bowler-hero-info {
  flex: 1;
  min-width: 0;
}

.home-bowler-hero-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-bowler-hero-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-bowler-hero-switch {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
}

.home-bowler-hero-switch:active {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border);
}

.home-bowler-hero-form {
  margin-top: var(--space-1);
  color: var(--accent-teal);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.home-bowler-hero-meta {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.home-goal-section {
  display: block;
}

.home-goal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.home-goal-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-goal-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.home-goal-value {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.home-goal-bar-wrap {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
}

.home-goal-bar-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-brand);
  transition: width 650ms ease;
}

.home-goal-card.goals-animate .home-goal-bar-fill {
  width: var(--goal-width);
}

.home-goal-bar-reached {
  background: var(--accent-green);
}

.home-goal-complete {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent-green) 46%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-green) 10%, transparent);
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-achievement-wall-btn {
  width: 100%;
  min-height: var(--space-11);
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.home-progressive-header {
  margin-top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .home-goal-bar-fill {
    transition: none;
  }
}

/* Stat cards row */
.stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}

.stat-card-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.stat-card-value.highlight {
  color: var(--accent-teal);
}

.stat-card-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stat-card-delta {
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}

.stat-card-delta--empty {
  color: var(--text-secondary);
  font-size: 9px;
}

.stat-card-delta.up   { color: var(--accent-green); }
.stat-card-delta.down { color: var(--accent-red); }
.stat-card-delta.flat { color: var(--text-secondary); }

.average-performance-sheet {
  gap: var(--space-4);
}

.average-performance-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.average-performance-metrics > div,
.average-block-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  flex-wrap: nowrap;
}

.average-performance-metrics span,
.average-performance-label,
.average-block-row span,
.average-performance-empty {
  color: var(--text-secondary);
  font-size: 12px;
}

.average-performance-metrics .average-trend-delta,
.average-block-row .average-trend-delta {
  flex: 0 0 48px;
  width: 48px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
}

.average-performance-metrics strong,
.average-block-row strong {
  flex: 0 0 48px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  text-align: right;
}

.average-row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.average-performance-section,
.average-block-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.average-trend-symbol {
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
}

.average-trend-delta.up,
.average-trend-symbol.up { color: var(--accent-green); }
.average-trend-delta.down,
.average-trend-symbol.down { color: var(--accent-red); }
.average-trend-delta.flat,
.average-trend-symbol.flat { color: var(--text-secondary); }

/* Quick action buttons */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.quick-action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform 0.1s;
  touch-action: manipulation;
  text-align: left;
}

.quick-action-btn:active {
  transform: scale(0.97);
  background: var(--bg-input);
}

.quick-action-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-action-icon.teal   { background: rgba(0, 212, 200, 0.12); color: var(--accent-teal); }
.quick-action-icon.gold   { background: rgba(245, 166, 35, 0.12); color: var(--accent-gold); }
.quick-action-icon.green  { background: rgba(46, 213, 115, 0.12); color: var(--accent-green); }
.quick-action-icon.blue   { background: rgba(27, 108, 168, 0.2); color: #5BB8FF; }

.quick-action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.quick-action-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.home-action-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.home-start-btn {
  width: 100%;
}

.home-resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--score-spare) 7%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--score-spare) 58%, var(--border));
  border-radius: var(--radius-md);
}

.home-resume-copy {
  min-width: 0;
}

.home-resume-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--score-spare);
}

.home-resume-title {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-hi);
}

.home-resume-meta {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-resume-btn {
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--score-spare) 10%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--score-spare) 52%, var(--border));
  color: var(--score-spare);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}

.home-resume-btn:active {
  transform: translateY(1px);
}

.home-secondary-stats {
  margin-top: var(--space-2);
}

.home-section--top {
  padding-top: 16px;
}

.home-bowler-bar--spaced {
  margin-bottom: 10px;
}

.home-recent-section {
  padding-top: var(--space-2);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
}

.stat-card.secondary {
  background: color-mix(in srgb, var(--surface-card) 72%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  padding-block: var(--space-3);
}

.stat-card.secondary .stat-card-value {
  font-size: 22px;
  color: var(--text-body);
}

.stat-card.secondary .stat-card-label {
  color: var(--text-muted);
}

/* Recent games */
.game-list {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  margin-bottom: 8px;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  touch-action: manipulation;
}

.game-card:active { background: var(--bg-input); }

.game-card-score {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  min-width: 64px;
}

.game-card-score.great { color: var(--accent-teal); }
.game-card-score.good  { color: var(--accent-green); }

.game-card-info {
  flex: 1;
}

.game-card-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.game-card-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-card-sub span { display: flex; align-items: center; gap: 3px; }

.game-card-frames {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.game-card-chevron { color: var(--border); }

/* Empty state */
.empty-state {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 24px;
}

.empty-state-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.empty-state-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--space-11);
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--brand-gradient);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity var(--motion-fast), transform var(--motion-fast), filter var(--motion-fast);
  letter-spacing: 0.3px;
}

.btn-primary:active {
  opacity: 0.85;
  transform: translateY(1px);
}

/* Player chips */
/* ── Home bowler grid ────────────────────────────────────────── */
.player-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}

.player-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition), background var(--transition);
  min-width: 0;
}

.player-chip.selected {
  border-color: var(--accent-teal);
  background: rgba(0, 212, 200, 0.06);
}

.player-chip:active { background: var(--bg-input); }

.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.player-chip-info {
  min-width: 0;
  flex: 1;
}

.player-chip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-chip-avg {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.player-chip-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.player-chip-primary {
  font-size: 10px;
  line-height: 1;
  color: var(--accent-teal);
  flex-shrink: 0;
}

.home-bowler-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-bowler-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.home-bowler-add-btn {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.home-bowler-add-btn:active {
  background: var(--bg-input);
}

/* ── Active bowler card (home screen) ────────────────────────── */
.active-bowler-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--accent-teal);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 4px;
}
.active-bowler-card-info { flex: 1; min-width: 0; }
.active-bowler-card-name {
  font-size: 16px; font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.active-bowler-card-meta {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.active-bowler-switch-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
  white-space: nowrap;
}
.active-bowler-switch-btn:active { background: var(--border); }

/* ── Stats screen bowler header ──────────────────────────────── */
.stats-bowler-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--screen-pad);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.stats-bowler-header-info { flex: 1; min-width: 0; }
.stats-bowler-header-name {
  font-size: 14px; font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats-bowler-header-meta {
  font-size: 11px; color: var(--text-secondary); margin-top: 1px;
}
.stats-bowler-header .active-bowler-switch-btn {
  font-size: 11px; padding: 6px 10px;
}
.stats-mode-tabs {
  display: flex;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--screen-pad);
  position: sticky; top: 53px; z-index: 5;
  overflow-x: auto;
  scrollbar-width: none;
}
.stats-mode-tabs::-webkit-scrollbar { display: none; }
.stats-mode-tab {
  padding: 9px 14px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
  white-space: nowrap; flex-shrink: 0;
}
.stats-mode-tab.active { color: var(--accent-teal); border-bottom-color: var(--accent-teal); }
.stats-mode-tab.coming-soon { opacity: 0.38; cursor: default; }

/* ─── TOAST NOTIFICATION ─────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px var(--screen-pad);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 500;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── THEME TOGGLE ANIMATION ─────────────────────────────────── */
.theme-toggle-icon {
  transition: transform 0.3s ease;
}

body.theme-light .theme-toggle-icon {
  transform: rotate(180deg);
}

/* ─── DIVIDER ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0 20px;
}

/* ─── SETTINGS SCREEN ────────────────────────────────────────── */
.settings-list {
  display: flex;
  flex-direction: column;
  padding-top: var(--screen-pad);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
  padding-left: var(--screen-pad);
  padding-right: var(--screen-pad);
  gap: 8px;
}

.settings-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  padding: 12px 4px 4px;
}

.settings-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition);
}

.settings-row:active { background: var(--bg-input); }

.settings-row.disabled {
  opacity: 0.55;
  cursor: default;
}

.settings-row.disabled:active {
  background: var(--bg-card);
}

.settings-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-row-text { flex: 1; }
.settings-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-row-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.settings-row-value {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toggle switch */
.toggle-switch {
  width: 44px;
  height: 26px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 13px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.toggle-switch.on {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.toggle-switch.on::after {
  transform: translateX(18px);
}

/* ─── API KEY PANEL ───────────────────────────────────────────── */
.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}

.settings-card.configured {
  border-color: rgba(0,212,200,0.35);
}

.settings-card-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition);
}

.settings-card-header:active { background: var(--bg-input); }

.apikey-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition);
  flex-shrink: 0;
}

.apikey-status-dot.ok      { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.apikey-status-dot.error   { background: var(--accent-red); }
.apikey-status-dot.saved   { background: var(--accent-gold); }

.apikey-panel {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.apikey-info {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-top: 12px;
}

.apikey-info strong {
  color: var(--accent-teal);
  font-weight: 600;
}

.apikey-input-wrap {
  display: flex;
  gap: 0;
  position: relative;
}

.apikey-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  color: var(--text-primary);
  outline: none;
  letter-spacing: 0.5px;
  transition: border-color var(--transition);
  -webkit-user-select: text;
  user-select: text;
}

.apikey-input:focus { border-color: var(--accent-teal); }

.apikey-reveal-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 11px 12px;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--transition);
  flex-shrink: 0;
}

.apikey-reveal-btn:active { color: var(--text-primary); }

.apikey-actions {
  display: flex;
  gap: 8px;
}

.apikey-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  transition: all var(--transition);
  text-align: center;
}

.apikey-btn:active { opacity: 0.7; }

.apikey-btn.save {
  background: linear-gradient(135deg, var(--accent-teal), #007A74);
  border-color: var(--accent-teal);
  color: #000;
  flex: 2;
}

.apikey-btn.save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.apikey-btn.test {
  color: var(--accent-teal);
  border-color: rgba(0,212,200,0.35);
}

.apikey-btn.clear {
  color: var(--accent-red);
  border-color: rgba(255,71,87,0.25);
}

.apikey-result {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.apikey-result.success {
  background: rgba(46,213,115,0.1);
  border: 1px solid rgba(46,213,115,0.3);
  color: var(--accent-green);
}

.apikey-result.error {
  background: rgba(255,71,87,0.08);
  border: 1px solid rgba(255,71,87,0.25);
  color: var(--accent-red);
}

.apikey-result.loading {
  background: rgba(0,212,200,0.06);
  border: 1px solid rgba(0,212,200,0.2);
  color: var(--accent-teal);
}

.sync-status-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-right: 10px;
  flex-shrink: 0;
}

.apikey-security-note {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.7;
}

/* Settings productised layout */
#screen-settings .settings-list {
  padding-top: var(--space-6);
  gap: var(--space-5);
}

#screen-settings .settings-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

#screen-settings .settings-kicker,
#screen-settings .settings-subtitle,
#screen-settings .settings-section-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#screen-settings .settings-title-display {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text-hi);
}

#screen-settings .settings-build-chip {
  min-height: var(--space-11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--brand-teal);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

#screen-settings .settings-section {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

#screen-settings .settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}

#screen-settings .settings-group-title {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#screen-settings .settings-section-note {
  font-size: 9px;
  white-space: nowrap;
}

#screen-settings .settings-row,
#screen-settings .settings-card {
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border-color: var(--border);
}

#screen-settings .settings-row {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

#screen-settings .settings-row.danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-card));
}

#screen-settings .settings-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 80%, var(--surface-card));
  color: var(--text-muted);
}

#screen-settings .settings-row-icon.teal {
  background: color-mix(in srgb, var(--brand-teal) 12%, var(--surface-card));
  color: var(--brand-teal);
}

#screen-settings .settings-row-icon.blue {
  background: color-mix(in srgb, var(--accent-brand) 12%, var(--surface-card));
  color: var(--accent-brand);
}

#screen-settings .settings-row-icon.gold {
  background: color-mix(in srgb, var(--score-spare) 13%, var(--surface-card));
  color: var(--score-spare);
}

#screen-settings .settings-row-icon.green {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-card));
  color: var(--success);
}

#screen-settings .settings-row-icon.red {
  background: color-mix(in srgb, var(--danger) 11%, var(--surface-card));
  color: var(--danger);
}

#screen-settings .settings-row-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-hi);
}

#screen-settings .settings-row-sub {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#screen-settings .settings-row-value {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

#screen-settings .settings-row-value.accent { color: var(--brand-teal); }
#screen-settings .settings-row-value.danger { color: var(--danger); }

#screen-settings .settings-card-header {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

#screen-settings .apikey-panel {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 36%, var(--surface-card));
}

#screen-settings .apikey-info,
#screen-settings .apikey-security-note {
  color: var(--text-muted);
}

#screen-settings .apikey-result.success {
  background: color-mix(in srgb, var(--success) 10%, var(--surface-card));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}

#screen-settings .apikey-result.error {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-card));
  border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
}

#screen-settings .apikey-result.loading {
  background: color-mix(in srgb, var(--brand-teal) 7%, var(--surface-card));
  border-color: color-mix(in srgb, var(--brand-teal) 24%, var(--border));
}

#screen-settings .debug-panel {
  border: 1px dashed color-mix(in srgb, var(--border) 82%, var(--text-muted));
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

#screen-settings .debug-panel:not(.active):not(.open) {
  display: none;
}

#screen-settings .debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

#screen-settings .debug-panel-close {
  min-height: var(--space-11);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

#screen-settings .debug-panel-close:active {
  color: var(--brand-teal);
  border-color: color-mix(in srgb, var(--brand-teal) 40%, var(--border));
}

/* Settings final Material list polish */
#screen-settings .settings-list {
  gap: var(--space-6);
}

#screen-settings .settings-hero {
  padding-bottom: var(--space-5);
}

#screen-settings .settings-section {
  gap: 0;
}

#screen-settings .settings-section-head {
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}

#screen-settings .settings-row,
#screen-settings .settings-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#screen-settings .settings-row,
#screen-settings .settings-card-header {
  min-height: 56px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

#screen-settings .settings-row:active,
#screen-settings .settings-card-header:active {
  background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
}

#screen-settings .settings-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
}

#screen-settings .settings-row-title {
  font-size: 14px;
  font-weight: 700;
}

#screen-settings .settings-row-value {
  min-height: var(--space-11);
  align-items: center;
}

#screen-settings #theme-toggle-display {
  position: relative;
  min-width: 76px;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  overflow: hidden;
}

#screen-settings #theme-toggle-display::before {
  content: '';
  position: absolute;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-teal);
  transition: transform var(--motion-fast);
}

body.theme-light #screen-settings #theme-toggle-display::before {
  transform: translateX(46px);
}

#screen-settings #theme-toggle-display span {
  position: relative;
  z-index: 1;
  padding-left: 18px;
}

body.theme-light #screen-settings #theme-toggle-display span {
  padding-left: 0;
  padding-right: 18px;
}

#screen-settings .settings-row.danger {
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border));
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: transparent;
}

#screen-settings #settings-leave-group-row,
#screen-settings #settings-reset-achievements-row {
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: transparent;
}

#screen-settings #settings-reset-achievements-row {
  border-color: color-mix(in srgb, var(--score-spare) 34%, var(--border));
}

#screen-settings .settings-row.danger + .settings-row.danger {
  margin-top: var(--space-2);
}

#screen-settings .settings-card .apikey-panel {
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 34%, transparent);
}

#screen-settings .debug-panel {
  background: transparent;
}

/* Spinner for loading states */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
#splash {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#splash.hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.splash-logo-icon {
  animation: splashIconIn 0.7s ease forwards;
  opacity: 0;
}

@keyframes splashIconIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.splash-title {
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-primary);
  animation: splashFade 0.6s 0.2s ease forwards;
  opacity: 0;
}

.splash-title span { color: var(--accent-brand); }

@keyframes splashFade {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.splash-sub {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  animation: splashFade 0.6s 0.4s ease forwards;
  opacity: 0;
}

.splash-bar {
  width: 120px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
  animation: splashFade 0.4s 0.5s ease forwards;
  opacity: 0;
}

.splash-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal));
  border-radius: 1px;
  animation: splashLoad 0.7s 0.6s ease forwards;
  width: 0;
}

@keyframes splashLoad {
  to { width: 100%; }
}

/* ─── SETUP SCREEN ───────────────────────────────────────────── */
.setup-screen {
  padding-top: var(--screen-pad);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
  padding-left: var(--screen-pad);
  padding-right: var(--screen-pad);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setup-section {
  padding-top: 12px;
  padding-bottom: 4px;
}

.setup-section--grow {
  flex: 1;
}

.setup-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.setup-label-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--border);
  text-transform: none;
  letter-spacing: 0;
}

.setup-input {
  width: 100%;
  min-height: var(--space-11);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--text-hi);
  outline: none;
  transition: border-color var(--motion-fast), background var(--motion-fast);
  -webkit-appearance: none;
}

.setup-input:focus {
  border-color: var(--brand-teal);
}

.setup-input--stacked {
  margin-top: 8px;
}

.setup-select-wrap {
  position: relative;
}

.setup-select {
  width: 100%;
  min-height: var(--space-11);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 40px 0 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--text-hi);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}

.setup-select:focus { border-color: var(--brand-teal); }

.setup-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.setup-row-2col {
  display: flex;
  gap: 12px;
}

.setup-pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.setup-pill {
  min-height: var(--space-11);
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition);
  min-width: 44px;
  text-align: center;
}

.setup-pill.active {
  background: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-raised));
  border-color: var(--brand-teal);
  color: #000;
}

.setup-pill:active { opacity: 0.8; }

.setup-notes-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  touch-action: manipulation;
}

.setup-textarea {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-hi);
  outline: none;
  resize: none;
  min-height: 80px;
  margin-top: 8px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}

.setup-textarea:focus { border-color: var(--brand-teal); }

.setup-datetime {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition);
}

.setup-datetime:active { border-color: var(--accent-teal); }

.setup-datetime-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.setup-datetime-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.setup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.btn-full {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

.setup-import-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition), color var(--transition);
}

.setup-import-btn:active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

/* Bowler list in setup */
.setup-bowler-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.setup-bowler-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  touch-action: none;
}

.setup-bowler-drag {
  color: var(--border);
  cursor: grab;
  padding: 4px;
  touch-action: none;
}

.setup-bowler-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.setup-bowler-info { flex: 1; }

.setup-bowler-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.setup-bowler-ball {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.setup-bowler-ball-picker {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--text-primary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  max-width: 130px;
}

.setup-bowler-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  touch-action: manipulation;
}

.setup-bowler-remove:active { background: var(--bg-input); color: var(--accent-red); }

.setup-add-bowler {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
  transition: border-color var(--transition), color var(--transition);
}

.setup-add-bowler:active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

/* ─── SCORING SCREEN ──────────────────────────────────────────── */
/* Scoring screen takes full height, no bottom nav padding */
#screen-scoring {
  display: none;
  flex-direction: column;
  /* Fullscreen when active — covers whole viewport */
  height: 100dvh;
  overflow: hidden;
  margin-bottom: 0;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: var(--bg-primary);
  max-width: 480px;
}

/* Centre on wider screens (matches app shell) */
@media (min-width: 480px) {
  #screen-scoring { left: 50%; transform: translateX(-50%); width: 480px; }
}

#screen-scoring.active {
  display: flex;
}

/* Scrollable content area inside scoring screen */
/* ── Entry area — fills remaining space, NO SCROLL ─────── */
.sc-entry-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Status row: feedback text + pin entry toggle */
.sc-status-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px 4px;
  gap: 8px;
  flex-shrink: 0;
}

.sc-entry-pills {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  justify-content: center;
}

.sc-pill {
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
}
.sc-pill:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.sc-pill:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.sc-pill.active { background: var(--accent-teal); border-color: var(--accent-teal); color: #000; }

/* Pin mode — grows to fill space */
.sc-pin-wrap {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding-top: 2px;
}

/* Numpad mode — grows to fill space */
.sc-numpad-wrap {
  flex: 1;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  min-height: 0;
  padding-top: 2px;
}

/* Action row: shot chips + shortcuts */
.sc-action-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 6px;
  flex-shrink: 0;
}

.sc-shot-chips {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.sc-shot-chip {
  min-height: 56px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
}
.sc-shot-chip.active {
  background: rgba(0,212,200,0.12);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}
.sc-shot-chip.split-toggle-btn.active {
  background: rgba(245,166,35,0.15);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.sc-shot-chip:active { opacity: 0.7; }

.sc-shortcuts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

/* Confirm area */
.sc-confirm-area {
  padding: 8px 10px;
  padding-bottom: calc(var(--safe-bottom) + 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Compact scoring header ──────────────────────────── */
.sc-header {
  display: flex;
  align-items: center;
  padding: 6px 8px 6px 4px;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.sc-back-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); flex-shrink: 0;
  touch-action: manipulation; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.sc-back-btn:active { background: var(--bg-input); }
.sc-header-mid {
  flex: 1; min-width: 0; text-align: center;
}
.sc-bowler-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.3px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-frame-info {
  font-size: 10px; color: var(--text-secondary); margin-top: 1px;
}
.sc-header-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.sc-mode-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-secondary); transition: all var(--transition);
  touch-action: manipulation;
}
.sc-mode-icon:active { background: var(--bg-card); color: var(--accent-teal); }
.sc-mini-stats {
  min-width: 116px;
  max-width: 138px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.sc-mini-delta {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sc-mini-delta.positive { color: var(--accent-green); }
.sc-mini-delta.negative { color: var(--accent-red); }
.sc-mini-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.sc-mini-sep {
  opacity: 0.58;
  margin: 0 2px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1;
}
.scorecard-frame-tile.clickable {
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.scorecard-frame-tile.clickable:active {
  transform: scale(0.97);
}
.scorecard-frame-tile.clickable:hover,
.scorecard-frame-tile.clickable:focus-visible {
  border-color: rgba(0,212,200,0.42);
  background: rgba(0,212,200,0.10);
  box-shadow: 0 0 0 1px rgba(0,212,200,0.16);
  outline: none;
}
.scorecard-frame-tile.has-split.clickable:hover,
.scorecard-frame-tile.has-split.clickable:focus-visible {
  border-color: rgba(245,166,35,0.45);
  box-shadow: 0 0 0 1px rgba(245,166,35,0.18), inset 0 0 0 1px rgba(245,166,35,0.24);
}
.summary-card-edit-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
}
.summary-card-edit-btn:hover,
.summary-card-edit-btn:focus-visible {
  color: var(--accent-teal);
  border-color: rgba(0,212,200,0.26);
  background: rgba(0,212,200,0.08);
  outline: none;
}
.summary-frame-picker-grid {
  display: grid;
  gap: 10px;
}
.summary-frame-picker-copy {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.bowler-header-left,
.scorecard-header-left {
  display: flex;
}

.bowler-header-left,
.scorecard-title-block {
  flex-direction: column;
  justify-content: center;
}

.scorecard-title-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bowler-name,
.scorecard-name {
  margin: 0;
  line-height: 1.05;
}

.bowler-pill,
.scorecard-badges {
  margin-top: 2px;
  line-height: 1;
}

.scorecard-badges {
  gap: 5px;
}

@media (max-width: 480px) {
  .summary-card-edit-btn { padding: 0 8px; min-height: 28px; font-size: 11px; }
}

.sc-mini-chip {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sc-total {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  color: var(--current-player-color, var(--accent-teal));
  line-height: 1; transition: color 0.2s;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Legacy aliases so any remaining JS refs work */
.scoring-bowler-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text-primary); }
.scoring-total-wrap { text-align: right; }
.scoring-total { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--current-player-color, var(--accent-teal)); line-height: 1; }

/* Player bar */
.player-bar {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.player-bar::-webkit-scrollbar { display: none; }

.player-bar-item {
  flex: 1;
  min-width: 80px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  touch-action: manipulation;
  border-bottom: 3px solid transparent;
  transition: all var(--transition);
  position: relative;
}

/* Per-player colour slots */
.player-bar-item[data-pidx="0"] { --player-color: var(--accent-teal); }
.player-bar-item[data-pidx="1"] { --player-color: var(--accent-gold); }
.player-bar-item[data-pidx="2"] { --player-color: var(--accent-green); }
.player-bar-item[data-pidx="3"] { --player-color: #A78BFA; }

.player-bar-item.active {
  border-bottom-color: var(--player-color);
  background: rgba(255,255,255,0.04);
}

.player-bar-item:active { opacity: 0.7; }

.player-bar-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.player-bar-item.active .player-bar-name {
  color: var(--player-color);
}

.player-bar-score {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.player-bar-item.active .player-bar-score {
  color: var(--player-color);
}

.player-bar-frame {
  font-size: 10px;
  color: var(--text-secondary);
}

.player-bar-warning {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
}

.frame-grid-wrap {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 6px 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each row is a 5-column grid so frames 6–10 align directly under 1–5 */
.frame-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.frame-row .frame-cell {
  min-width: 0;
}

/* Frame 10 stays aligned with the grid */
.frame-cell.frame-10 {
  grid-column: auto;
}

.frame-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 6px;
  padding: 6px 2px;
  transition: background var(--transition);
  min-width: 0;
}

.frame-cell:active { background: var(--bg-input); }

.frame-cell.current {
  background: rgba(0,212,200,0.1);
  outline: 1px solid rgba(0,212,200,0.4);
}

.frame-cell.editing {
  background: rgba(245,166,35,0.12);
  outline: 1px solid rgba(245,166,35,0.5);
}

.frame-cell.warning {
  outline: 1px solid rgba(245,166,35,0.5);
}

.frame-cell.split {
  background: rgba(245,166,35,0.06);
  outline: 1px solid rgba(245,166,35,0.35);
}

.frame-num {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.frame-balls {
  display: flex;
  gap: 2px;
}

.frame-ball {
  width: 19px;
  height: 20px;
  border-radius: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.frame-ball.strike {
  background: rgba(0,212,200,0.2);
  border-color: var(--accent-teal);
  color: var(--score-strike-symbol);
}

.frame-ball.spare {
  background: color-mix(in srgb, var(--score-spare) 12%, transparent);
  border-color: color-mix(in srgb, var(--score-spare) 54%, var(--border));
  color: var(--score-spare);
}

.frame-ball.miss {
  background: rgba(255,71,87,0.1);
  border-color: rgba(255,71,87,0.3);
  color: var(--accent-red);
}

.frame-ball.split {
  background: transparent;
  border-color: var(--text-primary);
  border-width: 2px;
  color: var(--text-primary);
  border-radius: 50%;
}

.frame-score {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  min-height: 18px;
  line-height: 1.2;
}

.frame-cell.current .frame-score { color: var(--accent-teal); }

.frame-cell.frame-10 .frame-ball { width: 17px; font-size: 10px; }

/* Frame nav bar removed from layout — prev/next now via frame cell tap or peek sheet */
.scoring-frame-nav { display: none; }
.frame-nav-btn { display: none; }
.frame-nav-pos { display: none; }

/* Split dot — orange filled circle */
.split-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent-gold);
  background: transparent;
  vertical-align: middle;
  flex-shrink: 0;
}
.split-toggle-btn.active .split-dot {
  background: var(--accent-gold);
}
.split-toggle-btn.active {
  background: rgba(245,166,35,0.15);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Mode toggle */
/* Mode toggle hidden — operated via header icon, keeping elements for JS */
.scoring-mode-toggle { display: none; }
.mode-toggle-group { display: flex; gap: 0; }
.mode-btn {
  flex: 1; padding: 8px;
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
}
.mode-btn.active { background: var(--accent-teal); border-color: var(--accent-teal); color: #000; }

/* Ball selector row */
.scoring-ball-row {
  display: flex;
  gap: 8px;
  padding: 4px 12px 3px;
  overflow-x: auto;
}

.scoring-ball-row::-webkit-scrollbar { display: none; }

.scoring-ball-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition);
  flex-shrink: 0;
}

.scoring-ball-chip.active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(0,212,200,0.08);
}

.scoring-ball-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-teal);
  flex-shrink: 0;
}

.scoring-ball-chip.spare-ball .scoring-ball-dot { background: var(--accent-gold); }

/* Pin diagram */
.pin-status {
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0;
  min-height: 0;
}

/* DEBUG INFRASTRUCTURE FOR INFERENCE STAGES */
.pin-inference-debug {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: var(--text-muted, var(--text-secondary));
}

.pin-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px 2px;
}

.pin-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.pin.standing {
  background: var(--bg-card);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.pin.knocked {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
  transform: scale(0.88);
  box-shadow: 0 0 12px rgba(0,212,200,0.4);
}

.pin.down {
  background: var(--bg-primary);
  border-color: var(--border);
  border-style: dashed;
  color: var(--border);
  cursor: default;
  opacity: 0.4;
}

.pin:active:not(.down) { transform: scale(0.85); }

/* pin entry toggle now shares the top segmented control styling */

/* Shot type buttons */
/* Shot type row replaced by sc-shot-chips in new layout */
.shot-type-row { display: flex; gap: 8px; padding: 6px 10px 4px; }
.shot-btn {
  flex: 1; padding: 7px 4px;
  border-radius: var(--radius-sm); background: var(--bg-input);
  border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.shot-btn.active { background: rgba(0,212,200,0.12); border-color: var(--accent-teal); color: var(--accent-teal); }


.split-leave-row {
  display: flex;
  gap: 8px;
  padding: 0 12px 6px;
}

.split-leave-row .split-toggle-btn,
.split-leave-row .shot-btn,
.split-leave-row button {
  width: 100%;
}


/* Split toggle button */
.split-row { padding-top: 0; }
.split-toggle-btn {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.split-toggle-btn.active {
  background: rgba(245,166,35,0.15);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Strike / Gutter shortcuts */
.scoring-shortcuts {
  display: flex;
  gap: 8px;
  padding: 8px 12px 6px;
}

.shortcut-btn {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  cursor: pointer;
  touch-action: manipulation;
  border: none;
  transition: opacity var(--transition), transform 0.1s;
}

.shortcut-btn:active { opacity: 0.8; transform: scale(0.97); }

.strike-btn {
  background: var(--accent-gold);
  color: #000;
  flex: 2;
}

.gutter-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Score numpad */
.score-numpad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 5px;
  padding: 4px 10px;
  width: 100%;
}

.numpad-btn {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 19px;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.numpad-btn.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

.numpad-btn:active { opacity: 0.7; transform: scale(0.93); }

.numpad-btn.strike {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000;
  aspect-ratio: auto;
  grid-column: span 2;
  font-size: 16px;
}

/* Confirm area legacy alias */
.scoring-confirm-area {
  padding: 8px 10px;
  padding-bottom: calc(var(--safe-bottom) + 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.scoring-edit-actions {
  display: flex;
  gap: 8px;
}

.edit-action-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition);
  text-align: center;
}

.edit-action-btn.danger {
  color: var(--accent-red);
  border-color: rgba(255,71,87,0.3);
}

.edit-action-btn:active { opacity: 0.7; }

.btn-confirm {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-teal), #007A74);
  color: #000;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity var(--transition), transform 0.1s;
}

.btn-confirm:active { opacity: 0.85; transform: scale(0.98); }

.btn-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-undo {
  width: 100%;
  padding: 11px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition);
}

.btn-undo:active { background: var(--bg-input); }

.frame-warning {
  text-align: center;
  font-size: 12px;
  color: var(--accent-gold);
  padding: 6px 16px;
}

/* Strike celebration overlay */
.strike-flash {
  position: fixed;
  inset: 0;
  background: rgba(0,212,200,0.12);
  pointer-events: none;
  opacity: 0;
  z-index: 300;
  transition: opacity 0.1s;
}

.strike-flash.show {
  opacity: 1;
  animation: strikeFlash 0.5s ease forwards;
}

@keyframes strikeFlash {
  0%   { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ─── HISTORY SCREEN ──────────────────────────────────────────── */
.history-screen { display: flex; flex-direction: column; }

/* ── GAME SUMMARY SCREEN ─────────────────────────────────── */
.summary-screen {
  padding: 20px var(--screen-pad) calc(var(--nav-height) + var(--safe-bottom) + 24px);
  display: flex; flex-direction: column; gap: var(--section-gap);
  min-height: 100vh;
}
.summary-header {
  text-align: center;
  padding-top: 16px;
  padding-bottom: 8px;
}
.summary-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  color: var(--accent-teal);
  letter-spacing: 1px;
}
.summary-subtitle {
  font-size: 13px; color: var(--text-secondary);
  margin-top: 4px;
}
.summary-podium {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.summary-result-card.winner {
  border-color: rgba(245,166,35,0.5);
  background: linear-gradient(135deg, rgba(245,166,35,0.08) 0%, var(--bg-card) 60%);
}
.summary-result-card.personal-best {
  border-color: rgba(0,212,200,0.4);
}
.summary-rank {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  color: var(--text-secondary);
  min-width: 22px; text-align: center; flex-shrink: 0;
}
.summary-rank.gold   { color: #F5A623; }
.summary-rank.silver { color: #A8A8B8; }
.summary-rank.bronze { color: #CD7F32; }
.summary-result-info { width:100%; min-width: 0; display:flex; flex-direction:column; gap:10px; }
.summary-result-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; }
.summary-name-wrap { flex:1; min-width:0; display:flex; align-items:flex-start; gap:12px; }
.summary-right-wrap { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }
.summary-result-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.summary-result-card .scorecard-title-row {
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 10px;
}
.summary-result-card .scorecard-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-result-card .scorecard-badges {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.summary-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 2px 7px; border-radius: 8px;
  border: 1px solid;
  white-space: nowrap;
}
.summary-badge.pb     { color: var(--accent-teal); border-color: rgba(0,212,200,0.3); background: rgba(0,212,200,0.08); }
.summary-badge.winner { color: var(--accent-gold); border-color: rgba(245,166,35,0.3); background: rgba(245,166,35,0.08); }
.summary-badge.clean  { color: var(--accent-green); border-color: rgba(46,213,115,0.3); background: rgba(46,213,115,0.08); }
.summary-badge.perfect { color: #FF4757; border-color: rgba(255,71,87,0.3); background: rgba(255,71,87,0.08); }
.summary-result-score {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800;
  color: var(--accent-teal); line-height: 1;
  min-width: 52px; text-align: right; flex-shrink: 0;
}
.summary-result-card.winner .summary-result-score { color: var(--accent-gold); }
.summary-frames-row { width:100%; margin-left:0; }
.summary-frames-strip {
  display: flex; gap: 3px;
  overflow-x: auto; padding-bottom: 2px; max-width: 100%; width:100%;
}
.summary-top-left { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1; }
.summary-top-left .profile-card-avatar { flex-shrink:0; }
.summary-name-stack { min-width:0; flex:1; }
.scorecard-frame-tile {
  --frame-ball-row-height: 18px;
  --frame-ball-slot-size: 10px;
  --frame-ball-font-size: 10px;
  --frame-score-row-height: 12px;
  --frame-top-padding: 6px;
  --frame-bottom-padding: 5px;
  position: relative;
  min-width: 22px;
  min-height: 42px;
  border-radius: 7px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-shrink: 0;
  color: var(--text-secondary);
  font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
}
.scorecard-frame-tile.frame-10 { min-width: 32px; }
.scorecard-frame-tile.is-strike {
  background: linear-gradient(180deg, rgba(0,212,200,0.11), rgba(0,212,200,0.04));
  border-color: rgba(0,212,200,0.3);
}
.scorecard-frame-tile.is-spare  {
  background: color-mix(in srgb, var(--score-spare) 10%, var(--surface-card));
  border-color: var(--score-spare);
}
.scorecard-frame-tile.is-open   {
  background: linear-gradient(180deg, rgba(255,71,87,0.1), rgba(255,71,87,0.035));
  border-color: rgba(255,71,87,0.22);
}
.scorecard-frame-tile.has-split {
  box-shadow: none;
}
.scorecard-frame-balls {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--frame-ball-slot-size), auto);
  gap: 2px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  height: var(--frame-ball-row-height);
  min-height: var(--frame-ball-row-height);
  padding: var(--frame-top-padding) 4px 0;
  box-sizing: border-box;
}
.scorecard-frame-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
  font-weight: 700;
  font-size: var(--frame-ball-font-size);
  text-align: center;
  line-height: 1;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.scorecard-frame-ball.is-strike { color: var(--score-strike-symbol); }
.scorecard-frame-ball.is-spare  { color: var(--score-spare); }
.scorecard-frame-ball.is-miss,
.scorecard-frame-ball.is-gutter { color: var(--accent-red); }
.scorecard-frame-ball.is-split-mark {
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-hi);
  font-size: calc(var(--frame-ball-font-size) - 1px);
}
.scorecard-frame-score {
  width: 100%;
  min-height: var(--frame-score-row-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  padding: 0 3px var(--frame-bottom-padding);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.summary-frame {
  --frame-ball-row-height: 20px;
  --frame-ball-slot-size: 10px;
  --frame-ball-font-size: 9px;
  --frame-score-row-height: 14px;
  --frame-top-padding: 7px;
  --frame-bottom-padding: 6px;
  min-width: 28px;
  min-height: 48px;
}
.summary-frame.frame-10 { min-width: 40px; }
.summary-frame .scorecard-frame-ball {
  font-size: var(--frame-ball-font-size);
}
.summary-frame .scorecard-frame-score {
  font-size: 8px;
}
.summary-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}

#screen-summary .summary-screen {
  gap: 14px;
}

#screen-summary .summary-header {
  text-align: left;
  padding: 12px 0 2px;
}

#screen-summary .summary-title {
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#screen-summary .summary-subtitle {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

#screen-summary .summary-podium {
  gap: 10px;
}

#screen-summary .summary-scorecard-v2.summary-result-card {
  background: color-mix(in srgb, var(--surface-card) 74%, #0b1016);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 14px;
  box-shadow: none;
  padding: 10px;
  gap: 0;
  overflow: hidden;
}

#screen-summary .summary-scorecard-v2.summary-result-card.is-winner {
  border-color: color-mix(in srgb, var(--accent-teal) 66%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-teal) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-card) 74%, #0b1016);
}

#screen-summary .summary-scorecard-v2.summary-result-card.personal-best {
  border-color: color-mix(in srgb, var(--accent-teal) 46%, var(--border));
}

#screen-summary .summary-scorecard-v2 .scorecard-header {
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

#screen-summary .summary-scorecard-v2 .scorecard-header-left {
  align-items: center;
  min-width: 0;
}

#screen-summary .summary-scorecard-v2 .summary-player-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  color: #000;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

#screen-summary .summary-scorecard-v2 .summary-player-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#screen-summary .summary-scorecard-v2 .scorecard-title-row {
  min-height: 0;
  gap: 6px;
  align-items: center;
}

#screen-summary .summary-scorecard-v2 .scorecard-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.05;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-summary .summary-scorecard-v2 .scorecard-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

#screen-summary .summary-scorecard-v2 .summary-badge {
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  padding: 4px 7px;
}

#screen-summary .summary-scorecard-v2 .scorecard-header-right {
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 116px;
}

#screen-summary .summary-card-edit-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

#screen-summary .summary-rank-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 34px;
  flex: 0 0 34px;
}

#screen-summary .summary-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 14px;
  line-height: 1;
}

#screen-summary .summary-rank {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  letter-spacing: 0.02em;
}

#screen-summary .summary-scorecard-v2 .scorecard-total {
  font-size: 38px;
  line-height: 0.95;
  min-width: 58px;
  flex: 0 0 58px;
  text-align: right;
}

#screen-summary .summary-scorecard-v2 .scorecard-total.score-white {
  color: var(--text-primary);
}

#screen-summary .summary-scorecard-v2 .scorecard-total.score-green {
  color: var(--accent-green);
}

#screen-summary .summary-scorecard-v2 .scorecard-total.score-blue {
  color: var(--accent-blue);
}

#screen-summary .summary-scorecard-v2 .scorecard-total.score-purple {
  color: #a78bfa;
}

#screen-summary .summary-scorecard-v2 .scorecard-total.score-gold,
#screen-summary .summary-scorecard-v2 .scorecard-total.score-perfect {
  color: var(--accent-gold);
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
}

#screen-summary .summary-scorecard-v2 .history-mini-frame,
#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10,
#screen-summary .summary-scorecard-v2 .history-mini-frame.is-strike,
#screen-summary .summary-scorecard-v2 .history-mini-frame.is-spare,
#screen-summary .summary-scorecard-v2 .history-mini-frame.is-open,
#screen-summary .summary-scorecard-v2 .history-mini-frame.has-split {
  --frame-ball-row-height: 31px;
  --frame-score-row-height: 22px;
  --frame-ball-slot-size: 17px;
  --frame-ball-font-size: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  min-height: 0;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#screen-summary .summary-scorecard-v2 .history-mini-frame:last-child {
  border-right: none;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-number {
  border-bottom: 1px solid var(--border);
  padding: 3px 0 2px;
  color: var(--text-muted);
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-balls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 31px;
  min-height: 31px;
  padding: 7px 4px 6px;
}

#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10 .scorecard-frame-balls {
  gap: 1px;
  padding-left: 3px;
  padding-right: 3px;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-score {
  min-height: 22px;
  border-top: 1px solid var(--border);
  padding: 5px 2px 4px;
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 800;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-hi);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration-line: none;
}

#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10 .scorecard-frame-ball {
  flex-basis: 13px;
  width: 13px;
  min-width: 13px;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-ball.is-strike {
  flex-basis: 16px;
  width: 16px;
  min-width: 16px;
  height: 18px;
  border-radius: 5px;
  color: var(--accent-red);
  border: 1px solid color-mix(in srgb, var(--accent-teal) 76%, var(--border));
  background: transparent;
}

#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10 .scorecard-frame-ball.is-strike {
  flex-basis: 15px;
  width: 15px;
  min-width: 15px;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-ball.is-spare {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  color: var(--accent-gold);
  border: none;
  outline: none;
  background: transparent;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-ball.is-split-mark {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10 .scorecard-frame-ball.is-spare,
#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10 .scorecard-frame-ball.is-miss,
#screen-summary .summary-scorecard-v2 .history-mini-frame.frame-10 .scorecard-frame-ball.is-gutter {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
}

#screen-summary .summary-scorecard-v2 .scorecard-frame-ball.is-miss,
#screen-summary .summary-scorecard-v2 .scorecard-frame-ball.is-gutter {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-summary .summary-scorecard-v2 .pin-diagram-divider {
  background: var(--border);
}

#screen-summary .summary-scorecard-v2 .frame-pin-diagram {
  height: 30px;
  gap: 1px;
  padding: 2px 1px;
  background: rgba(0,0,0,0.12);
}

#screen-summary .summary-scorecard-v2 .frame-pin-row {
  gap: 1px;
}

#screen-summary .summary-scorecard-v2 .pin-dot {
  width: 4px;
  height: 4px;
}

#screen-summary .summary-actions {
  gap: 10px;
  margin-top: 2px;
}

#screen-summary .summary-action-primary {
  justify-content: center;
  min-height: 50px;
  padding: 14px;
  border-radius: 11px;
}

#screen-summary .summary-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#screen-summary .summary-action-secondary {
  text-align: center;
  justify-content: center;
  padding: 13px;
  border-radius: 10px;
}

@media (max-width: 430px) {
  #screen-summary .summary-scorecard-v2.summary-result-card {
    padding: 9px;
  }

  #screen-summary .summary-scorecard-v2 .scorecard-header {
    gap: 8px;
  }

  #screen-summary .summary-scorecard-v2 .scorecard-header-right {
    gap: 4px;
    min-width: 106px;
  }

  #screen-summary .summary-card-edit-btn {
    min-height: 28px;
    padding: 0 8px;
  }

  #screen-summary .summary-rank-wrap {
    min-width: 30px;
    flex-basis: 30px;
  }

  #screen-summary .summary-rank {
    font-size: 15px;
  }

  #screen-summary .summary-medal {
    width: 14px;
    font-size: 13px;
  }

  #screen-summary .summary-scorecard-v2 .scorecard-total {
    font-size: 35px;
    min-width: 52px;
    flex-basis: 52px;
  }
}

.summary-result-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; }
.summary-name-wrap { min-width:0; flex:1; }
.summary-score-mobile { display:none; }
.history-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.history-game-bowler { margin-right:2px; }
.history-game-tag.photo-btn { cursor:pointer; }
.history-manual-note { font-size:11px; color:var(--text-secondary); margin-top:6px; line-height:1.45; }
.stats-subnote { font-size:11px; color:var(--text-secondary); line-height:1.45; margin-top:-2px; margin-bottom:10px; }
.stats-help-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  margin-left:6px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface-raised);
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  vertical-align:middle;
}
.stats-spare-detail { font-size:11px; font-weight:700; color:var(--text-secondary); min-width:44px; text-align:right; }
/* Larger Android phones — more breathing room */
@media (min-width: 400px) {
  :root {
    --screen-pad: clamp(20px, 5vw, 28px);
  }
}

@media (max-width: 430px) {
  .summary-result-card { gap:10px; padding:12px 14px; }
  .summary-rank { min-width:20px; font-size:16px; }
  .summary-frame { min-width:24px; }
  .summary-frame.frame-10 { min-width:34px; }
  .summary-frame {
    --frame-ball-slot-size: 8px;
    --frame-ball-font-size: 7px;
  }
}

.summary-special {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.summary-special-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-secondary);
}
.summary-special-list { display: flex; flex-direction: column; gap: 6px; }
.summary-special-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-primary); }
.summary-special-emoji { font-size: 18px; width: 24px; text-align: center; }

.history-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--screen-pad); border-bottom: 1px solid var(--border);
  background: var(--bg-primary); position: sticky; top: 0; z-index: 5;
}

.pin-legend-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 30px;
  padding: 0 var(--screen-pad);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  position: sticky;
  top: 45px;
  z-index: 4;
}
.pin-legend-strip.hidden { display: none; }
.pin-legend-items {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pin-legend-items::-webkit-scrollbar { display: none; }
.pin-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.pin-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pin-legend-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.65;
}
.pin-legend-dismiss:active { opacity: 1; }

.history-filter-chips { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.history-filter-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* ── Notification bell ──────────────────────────────────────── */
.notification-bell-btn { position: relative; }
.notification-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--accent-red); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 16px;
  text-align: center; padding: 0 3px;
  border: 2px solid var(--bg-primary); pointer-events: none;
}
/* ── Achievement toast ──────────────────────────────────────── */
.achievement-toast {
  position: fixed; bottom: calc(80px + var(--safe-bottom)); left: 12px; right: 12px;
  z-index: 9999; pointer-events: none;
  transform: translateY(120px); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.achievement-toast.show { transform: translateY(0); opacity: 1; }
.achievement-toast-inner {
  background: var(--bg-card); border: 1px solid; border-radius: var(--radius-md);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.achievement-toast-emoji {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--bg-input); display: flex; align-items: center;
  justify-content: center; font-size: 26px; flex-shrink: 0;
}
.achievement-toast-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.achievement-toast-name { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-top: 1px; }
.achievement-toast-bowler { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
/* ── Notification sheet items ───────────────────────────────── */
.notif-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-secondary); padding: 4px 0;
}
.notif-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item-new { background: rgba(0,212,200,0.04); border-radius: var(--radius-sm); padding: 12px 10px; margin: 0 -10px; }
.notif-item-emoji {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 1px solid transparent;
}
.notif-item-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.notif-item-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
/* ── Achievements wall ──────────────────────────────────────── */
.ach-stats-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  font-size: 13px; flex-wrap: wrap;
}
.ach-stats-count { font-weight: 800; color: var(--text-primary); font-size: 15px; }
.ach-stats-sep { color: var(--border); }
.ach-tier-section { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.ach-tier-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; padding: 2px 0;
}
.ach-badge-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.ach-badge-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; touch-action: manipulation;
  padding: 4px 2px; transition: transform 0.15s;
}
.ach-badge-btn:active { transform: scale(0.93); }
.ach-badge-emoji {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  border: 2px solid transparent; transition: all 0.2s;
}
.ach-locked .ach-badge-emoji {
  background: var(--bg-input) !important; border-color: var(--border) !important;
  font-size: 18px; color: var(--text-secondary);
  filter: grayscale(1); opacity: 0.4;
}
.ach-badge-name {
  font-size: 9px; font-weight: 700; color: var(--text-secondary);
  text-align: center; line-height: 1.3; max-width: 64px;
}
.ach-badge-btn:not(.ach-locked) .ach-badge-name { color: var(--text-primary); }
.ach-retro-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); opacity: 0.5;
}
.ach-counter-badge {
  font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 6px;
  border: 1px solid; letter-spacing: 0.2px; line-height: 1.4;
}
.ach-detail-badge {
  width: 88px; height: 88px; border-radius: 24px; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
}
/* ── Legendary + platinum badge animations ──────────────────── */
@keyframes legGlowAch {
  0%,100% { filter: drop-shadow(0 0 8px rgba(167,139,250,0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(0,212,200,0.7)); }
}
@keyframes platGlowAch {
  0%,100% { box-shadow: 0 0 8px rgba(0,212,200,0.3); }
  50%      { box-shadow: 0 0 20px rgba(0,212,200,0.7); }
}
.ach-badge-btn:not(.ach-locked)[style*="--ach-color:#A78BFA"] .ach-badge-emoji { animation: legGlowAch 2.5s ease-in-out infinite; }
.ach-badge-btn:not(.ach-locked)[style*="--ach-color:#00D4C8"] .ach-badge-emoji { animation: platGlowAch 2.5s ease-in-out infinite; }

.hf-filter-btn {
  position: relative;
  width: var(--space-11);
  min-width: var(--space-11);
  height: var(--space-11);
  min-height: var(--space-11);
  border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); flex-shrink: 0;
}
.hf-filter-btn.active { border-color: var(--accent-teal); color: var(--accent-teal); background: rgba(0,212,200,0.08); }
.hf-filter-badge {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent-teal); border: 2px solid var(--bg-primary);
}
.hf-filter-group { display: flex; flex-direction: column; gap: 8px; }
.hf-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); }
.hf-filter-chips-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.hf-filter-chip {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
}
.hf-filter-chip.active { background: var(--accent-teal); border-color: var(--accent-teal); color: #000; }
.history-filter-chips::-webkit-scrollbar { display: none; }

.hf-chip {
  height: 42px;
  padding: 0 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.hf-chip.active {
  background: var(--accent-teal); border-color: var(--accent-teal); color: #000;
}

.hf-bowler-chip {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg-card);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: all var(--transition);
}
.hf-bowler-chip.active {
  border-color: var(--accent-teal); color: var(--accent-teal);
  background: rgba(0,212,200,0.08);
}

.hf-pins-toggle {
  flex-shrink: 0;
  height: var(--space-11);
  min-height: var(--space-11);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition);
}
.hf-pins-toggle.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

.history-list {
  padding: 12px var(--screen-pad) calc(var(--nav-height) + var(--safe-bottom) + 32px);
  display: flex; flex-direction: column; gap: var(--stack-gap);
  min-height: 100%;
}

.history-list::-webkit-scrollbar { display: none; }

.history-date-group { display: flex; flex-direction: column; gap: var(--stack-gap); }

.history-date-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-secondary); padding: 4px 0;
}

.history-game-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; touch-action: pan-y;
  transition: background var(--transition), transform 0.2s ease;
  position: relative; overflow: hidden;
}

.history-card-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 0; flex: 1;
  transition: transform 0.2s ease;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  position: relative; z-index: 1;
}

.history-card-delete {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 80px; background: var(--accent-red);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer; touch-action: manipulation;
  font-size: 11px; font-weight: 700; color: #fff;
  z-index: 0;
}

.history-game-card:active .history-card-inner { background: var(--bg-input); }

.history-score {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  color: var(--text-primary); line-height: 1; min-width: 60px;
}

.history-score.great { color: var(--accent-teal); }
.history-score.good  { color: var(--accent-green); }

.history-game-info { flex: 1; }
.history-game-bowler { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.history-game-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.history-game-tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); font-weight: 600; }
.history-game-tag.photo {
  background: color-mix(in srgb, var(--brand-teal) 8%, var(--surface-card));
  border-color: color-mix(in srgb, var(--brand-teal) 25%, var(--border));
  color: var(--brand-teal);
}

.history-frame-row {
  display: flex; gap: 2px; margin-top: 6px; flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── SHARED SCORECARD TEMPLATE ───────────────────────────── */
.scorecard-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.scorecard-card--recent,
.scorecard-card--history,
.scorecard-card--stats {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.scorecard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.scorecard-header-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.scorecard-title-block {
  min-width: 0;
  flex: 1;
}

.scorecard-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 28px;
}

.scorecard-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.scorecard-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scorecard-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.scorecard-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.scorecard-total {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  text-align: right;
  flex-shrink: 0;
}

.scorecard-total.great,
.scorecard-total.highlight { color: var(--accent-teal); }
.scorecard-total.good { color: var(--accent-green); }

.scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 4px;
  margin-top: 8px;
  width: 100%;
}

.scorecard-card--history .scorecard-frame-row,
.scorecard-card--recent .scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.scorecard-frame-number {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--text-muted);
  padding: 3px 0 2px;
  border-bottom: 1px solid var(--border);
}

.scorecard-card--history .history-mini-frame,
.scorecard-card--recent .history-mini-frame {
  --frame-ball-row-height: 24px;
  --frame-score-row-height: 16px;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.scorecard-card--history .history-mini-frame:last-child,
.scorecard-card--recent .history-mini-frame:last-child {
  border-right: none;
}

.scorecard-card--history .history-mini-frame .scorecard-frame-balls,
.scorecard-card--recent .history-mini-frame .scorecard-frame-balls {
  height: 24px;
  min-height: 24px;
  padding-top: 3px;
}

.scorecard-card--history .history-mini-frame .scorecard-frame-score,
.scorecard-card--recent .history-mini-frame .scorecard-frame-score {
  min-height: 16px;
  padding-bottom: 3px;
}

.scorecard-frame-ball.is-split-circle {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  text-decoration-line: none;
}

.pin-diagram-divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  flex-shrink: 0;
}

.frame-pin-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 46px;
  padding: 5px 1px;
  background: rgba(0,0,0,0.2);
}

.frame-pin-row {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.pin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pin-dot.base { background: #2a2a38; }
.pin-dot.standing { background: var(--accent-gold); }
.pin-dot.b2k { background: var(--accent-teal); }
.pin-dot.strike {
  background: var(--accent-teal);
  opacity: 0.45;
}

.game-editor-frame-tile .scorecard-frame-number { display: none; }

.scorecard-card .history-mini-frame {
  min-width: 0;
  width: 100%;
  min-height: 42px;
}

.scorecard-card .history-mini-frame.frame-10 { min-width: 0; width: 100%; }
.scorecard-card .history-mini-frame .scorecard-frame-balls { gap: 2px; }
.scorecard-card .history-mini-frame .scorecard-frame-ball { font-size: var(--frame-ball-font-size); }
.scorecard-card .history-mini-frame .scorecard-frame-score { font-size: 8px; }

.stats-selected-card { width: 100%; }
.stats-frame-details > * { width: 100%; }

@media (max-width: 430px) {
  .scorecard-card { padding: 12px 14px; }
  .scorecard-card--recent,
  .scorecard-card--history,
  .scorecard-card--stats { padding: 0; }
  .scorecard-card .history-mini-frame { min-width: 28px; height: 40px; }
  .scorecard-card .history-mini-frame.frame-10 { min-width: 41px; }
  .scorecard-total { font-size: 34px; }
}

.history-mini-frame {
  --frame-ball-row-height: 18px;
  --frame-ball-slot-size: 10px;
  --frame-ball-font-size: 10px;
  --frame-score-row-height: 12px;
  --frame-top-padding: 6px;
  --frame-bottom-padding: 5px;
  min-width: 22px;
  min-height: 42px;
}
.history-mini-frame .scorecard-frame-ball {
  font-size: var(--frame-ball-font-size);
}
.history-mini-frame .scorecard-frame-score {
  display: block;
  font-size: 7px;
}

.scorecard-card--history .history-mini-frame,
.scorecard-card--recent .history-mini-frame,
.scorecard-card--history .history-mini-frame.frame-10,
.scorecard-card--recent .history-mini-frame.frame-10 {
  min-width: 0;
  width: 100%;
  height: auto;
}

.game-editor-frame-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.game-editor-frame-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
}
.game-editor-frame-grid {
  display: grid;
  gap: 10px;
}
.game-editor-frame-grid-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.game-editor-frame-tile {
  --frame-ball-row-height: 20px;
  --frame-ball-slot-size: 10px;
  --frame-ball-font-size: 10px;
  --frame-score-row-height: 16px;
  --frame-top-padding: 7px;
  --frame-bottom-padding: 6px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0;
}
.game-editor-frame-tile.frame-10 {
  min-width: 0;
}
.game-editor-frame-tile .scorecard-frame-ball {
  font-size: var(--frame-ball-font-size);
}
.game-editor-frame-tile .scorecard-frame-score {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 6px;
}

/* Phase 5 scorecard system */
.frame-cell {
  border: 1px solid transparent;
}

.frame-cell:has(.frame-ball.strike) {
  border-color: var(--brand-teal);
}

.frame-cell:has(.frame-ball.spare) {
  border-color: var(--score-spare);
}

.frame-cell:has(.frame-score:not(:empty)):not(:has(.frame-ball.strike)):not(:has(.frame-ball.spare)) {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--score-open) 42%, transparent);
}

.frame-cell.split {
  background: color-mix(in srgb, var(--score-spare) 8%, transparent);
  outline: none;
}

.frame-cell.split:has(.frame-ball.spare) {
  border-color: var(--score-spare);
  border-style: solid;
}

.frame-ball {
  background: var(--surface-raised);
  border-color: var(--border);
}

.frame-ball.strike {
  background: color-mix(in srgb, var(--score-strike) 10%, transparent);
  border-color: color-mix(in srgb, var(--score-strike) 34%, var(--border));
  color: var(--score-strike-symbol);
}

.frame-ball.spare {
  background: color-mix(in srgb, var(--score-spare) 12%, transparent);
  border-color: color-mix(in srgb, var(--score-spare) 54%, var(--border));
  color: var(--score-spare);
}

.frame-ball.miss {
  background: color-mix(in srgb, var(--score-open) 8%, transparent);
  border-color: color-mix(in srgb, var(--score-open) 26%, var(--border));
  color: var(--score-open);
}

.frame-ball.split {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-hi);
  font-weight: inherit;
  font-size: inherit;
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.frame-score {
  color: var(--text-hi);
}

.scorecard-frame-tile {
  background: var(--surface-card);
  border-color: color-mix(in srgb, var(--text-soft) 22%, transparent);
  box-shadow: none;
}

.scorecard-frame-tile.is-strike {
  background: color-mix(in srgb, var(--brand-teal) 8%, var(--surface-card));
  border-color: var(--brand-teal);
}

.scorecard-frame-tile.is-spare {
  background: color-mix(in srgb, var(--score-spare) 10%, var(--surface-card));
  border-color: var(--score-spare);
}

.scorecard-frame-tile.is-open {
  background: color-mix(in srgb, var(--score-open) 6%, var(--surface-card));
  border-color: color-mix(in srgb, var(--score-open) 42%, transparent);
  border-style: dashed;
}

.scorecard-frame-tile.has-split {
  box-shadow: none;
}

.scorecard-frame-tile.has-split.is-spare {
  border-color: var(--score-spare);
  border-style: solid;
}

.scorecard-frame-ball {
  color: var(--text-muted);
}

.scorecard-frame-ball.is-strike {
  color: var(--score-strike-symbol);
}

.scorecard-frame-ball.is-spare {
  color: var(--score-spare);
}

.scorecard-frame-ball.is-miss {
  color: var(--score-open);
}

.scorecard-frame-ball.is-split-mark {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-hi);
  font-weight: inherit;
  font-size: inherit;
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.scorecard-frame-score {
  color: var(--text-hi);
}

.scorecard-frame-tile.is-strike .scorecard-frame-score,
.scorecard-frame-tile.is-spare .scorecard-frame-score {
  color: var(--text-hi);
}

.frame-score {
  color: var(--text-hi);
}

.game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  color: var(--text-hi);
  font-size: var(--frame-ball-font-size);
  font-weight: 700;
  line-height: 1;
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.game-editor-frame-tile {
  --frame-ball-row-height: 18px;
  --frame-ball-slot-size: 10px;
  --frame-ball-font-size: 10px;
}

.game-editor-frame-tile .scorecard-frame-balls {
  height: var(--frame-ball-row-height);
  min-height: var(--frame-ball-row-height);
}

.game-editor-frame-tile .scorecard-frame-ball {
  font-size: var(--frame-ball-font-size);
  font-weight: 700;
  line-height: 1;
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
}

.game-editor-frame-tile .scorecard-frame-score {
  color: var(--text-hi);
}

.history-mini-frame,
.summary-frame,
.game-editor-frame-tile {
  border-width: 1px;
}

/* Phase 6 scoring screen UX polish */
#screen-scoring .player-bar {
  background: var(--surface-base);
  border-bottom-color: var(--border);
}

#screen-scoring .player-bar-item {
  min-height: 52px;
  border: 1px solid transparent;
  border-bottom-width: 3px;
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}

#screen-scoring .player-bar-item.active {
  background: color-mix(in srgb, var(--player-color) 12%, var(--surface-card));
  border-color: color-mix(in srgb, var(--player-color) 52%, var(--border));
  border-bottom-color: var(--player-color);
  box-shadow: inset 0 -2px 0 var(--player-color);
}

#screen-scoring .player-bar-item.active::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--player-color);
  transform: translateX(-50%);
}

#screen-scoring .player-bar-item:active {
  transform: translateY(1px);
}

#screen-scoring .frame-grid-wrap {
  background: var(--surface-card);
}

#screen-scoring .frame-cell {
  position: relative;
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    opacity var(--motion-fast);
}

#screen-scoring .frame-cell.current {
  background: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-card));
  border-color: var(--brand-teal);
  border-style: solid;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-teal) 45%, transparent),
    0 0 0 2px color-mix(in srgb, var(--brand-teal) 18%, transparent);
  outline: none;
  transform: translateY(-1px);
}

#screen-scoring .frame-cell.current::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--brand-teal);
}

#screen-scoring .frame-cell.current .frame-num,
#screen-scoring .frame-cell.current .frame-score {
  color: var(--brand-teal);
}

#screen-scoring .frame-cell.editing {
  border-color: var(--warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 16%, transparent);
  outline: none;
}

#screen-scoring .frame-cell:has(.frame-score:not(:empty)):not(.current):not(.editing) {
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  opacity: 0.86;
}

#screen-scoring .frame-cell:has(.frame-score:not(:empty)):not(.current):not(.editing) .frame-score {
  color: var(--text-muted);
}

#screen-scoring .frame-cell:active {
  transform: translateY(1px);
}

#screen-scoring .frame-ball {
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}

#screen-scoring .frame-cell.current .frame-ball {
  transform: scale(1.04);
}

#screen-scoring .pin,
#screen-scoring .numpad-btn,
#screen-scoring .shortcut-btn,
#screen-scoring .sc-shot-chip,
#screen-scoring .btn-confirm,
#screen-scoring .sc-mode-icon,
#screen-scoring .sc-back-btn {
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    opacity var(--motion-fast);
}

#screen-scoring .pin:active,
#screen-scoring .numpad-btn:active,
#screen-scoring .shortcut-btn:active,
#screen-scoring .sc-shot-chip:active,
#screen-scoring .btn-confirm:active,
#screen-scoring .sc-mode-icon:active,
#screen-scoring .sc-back-btn:active {
  transform: scale(0.97);
}

#screen-scoring .pin.knocked,
#screen-scoring .numpad-btn.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-teal) 20%, transparent);
}

#screen-scoring .btn-confirm:not(:disabled):active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #screen-scoring .frame-cell.current,
  #screen-scoring .frame-cell.current .frame-ball,
  #screen-scoring .pin:active,
  #screen-scoring .numpad-btn:active,
  #screen-scoring .shortcut-btn:active,
  #screen-scoring .sc-shot-chip:active,
  #screen-scoring .btn-confirm:active,
  #screen-scoring .sc-mode-icon:active,
  #screen-scoring .sc-back-btn:active {
    transform: none;
  }
}

/* Edit scorecard symbol sizing correction */
.game-editor-frame-tile {
  --frame-ball-row-height: 18px;
  --frame-ball-slot-size: 10px;
  --frame-ball-font-size: 9px;
}

.game-editor-frame-tile .scorecard-frame-balls {
  height: var(--frame-ball-row-height);
  min-height: var(--frame-ball-row-height);
  gap: 2px;
}

.game-editor-frame-tile .scorecard-frame-ball,
.game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  font-size: var(--frame-ball-font-size);
  font-weight: 700;
  line-height: 1;
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
}

.scorecard-frame-ball.is-split-circle {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  text-decoration-line: none;
}

.game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  color: var(--text-hi);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

/* Phase 7 light mode final pass */
body.theme-light #app-header,
body.theme-light #bottom-nav {
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
}

body.theme-light #app-header.is-elevated {
  box-shadow: var(--shadow-soft);
}

body.theme-light #bottom-nav.is-elevated {
  box-shadow: 0 -8px 22px rgba(16,24,40,0.08);
}

body.theme-light .theme-toggle-icon,
body.theme-light .icon-btn:active {
  box-shadow: none;
}

body.theme-light .modal-overlay {
  background: var(--overlay-scrim);
}

body.theme-light .modal-sheet,
body.theme-light .session-action-panel,
body.theme-light .inner-screen-sheet,
body.theme-light .frame-reentry-sheet {
  background: var(--surface-card);
  border-color: var(--border);
  box-shadow: var(--shadow-raised);
}

body.theme-light .modal-input,
body.theme-light .setup-input,
body.theme-light .setup-select,
body.theme-light .setup-textarea,
body.theme-light .setup-datetime,
body.theme-light select,
body.theme-light textarea {
  color: var(--text-hi);
  background: var(--surface-raised);
  border-color: var(--border);
}

body.theme-light .modal-cancel-btn,
body.theme-light .frame-reentry-secondary {
  color: var(--text-body);
  background: var(--surface-card);
  border-color: var(--border);
}

body.theme-light .modal-pill.active,
body.theme-light .setup-pill.active,
body.theme-light .hf-filter-chip.active,
body.theme-light .hf-chip.active,
body.theme-light .stats-player-tab.active,
body.theme-light .stats-mode-tab.active,
body.theme-light .cmp-period-chip.active {
  color: #071113;
}

body.theme-light .scorecard-frame-tile,
body.theme-light .history-mini-frame,
body.theme-light .summary-frame,
body.theme-light .game-editor-frame-tile {
  background: var(--surface-card);
  border-color: color-mix(in srgb, var(--text-soft) 26%, transparent);
}

body.theme-light .scorecard-frame-tile.is-strike {
  background: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-card));
  border-color: var(--brand-teal);
}

body.theme-light .scorecard-frame-tile.is-spare {
  background: color-mix(in srgb, var(--score-spare) 11%, var(--surface-card));
  border-color: var(--score-spare);
}

body.theme-light .scorecard-frame-tile.is-open {
  background: color-mix(in srgb, var(--score-open) 8%, var(--surface-card));
  border-color: color-mix(in srgb, var(--score-open) 48%, transparent);
  border-style: dashed;
}

body.theme-light .scorecard-frame-score,
body.theme-light .frame-score {
  color: var(--text-hi);
}

body.theme-light .scorecard-frame-ball.is-split-mark,
body.theme-light .frame-ball.split {
  color: var(--text-hi);
  text-decoration-color: currentColor;
}

body.theme-light #screen-scoring .player-bar,
body.theme-light #screen-scoring .frame-grid-wrap,
body.theme-light #screen-scoring .scoring-main {
  background: var(--surface-base);
}

body.theme-light #screen-scoring .frame-cell,
body.theme-light #screen-scoring .pin,
body.theme-light #screen-scoring .numpad-btn,
body.theme-light #screen-scoring .shortcut-btn,
body.theme-light #screen-scoring .sc-shot-chip,
body.theme-light .frame-reentry-score-btn,
body.theme-light .frame-reentry-pin,
body.theme-light .frame-reentry-ball-card {
  background: var(--surface-card);
  border-color: var(--border);
  color: var(--text-body);
}

body.theme-light #screen-scoring .pin.knocked,
body.theme-light #screen-scoring .numpad-btn.active,
body.theme-light #screen-scoring .sc-shot-chip.active,
body.theme-light .frame-reentry-score-btn.active,
body.theme-light .frame-reentry-ball-card.active {
  background: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-card));
  border-color: var(--brand-teal);
}

body.theme-light .summary-result-card,
body.theme-light .summary-special,
body.theme-light .game-editor-section,
body.theme-light .frame-reentry-summary,
body.theme-light .frame-reentry-pin-wrap {
  background: var(--surface-card);
  border-color: var(--border);
}

/* Phase 8 regression lock */
body.theme-light #screen-scoring .frame-cell:has(.frame-ball.strike) {
  border-color: var(--brand-teal);
}

body.theme-light #screen-scoring .frame-cell:has(.frame-ball.spare) {
  border-color: var(--score-spare);
}

body.theme-light #screen-scoring .frame-cell:has(.frame-score:not(:empty)):not(.current):not(.editing):not(:has(.frame-ball.strike)):not(:has(.frame-ball.spare)) {
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  border-color: color-mix(in srgb, var(--score-open) 48%, transparent);
  border-style: dashed;
}

body.theme-light #screen-scoring .frame-cell.current {
  background: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-card));
  border-color: var(--brand-teal);
  border-style: solid;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-teal) 45%, transparent),
    0 0 0 2px color-mix(in srgb, var(--brand-teal) 18%, transparent);
}

body.theme-light #screen-scoring .frame-cell.editing {
  border-color: var(--warning);
  border-style: solid;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 16%, transparent);
}

body.theme-light .scorecard-frame-ball.is-split-mark,
body.theme-light .frame-ball.split,
body.theme-light .game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.summary-frames-strip,
.game-card-scorecard,
.stats-frame-scorecard,
.import-mini-scorecard {
  scrollbar-width: none;
}

.summary-frames-strip::-webkit-scrollbar,
.game-card-scorecard::-webkit-scrollbar,
.stats-frame-scorecard::-webkit-scrollbar,
.import-mini-scorecard::-webkit-scrollbar {
  display: none;
}

/* Phase 9 final visual system polish */
#screen-home .section-title,
#screen-settings .settings-group-title,
#screen-history .history-date-label,
#screen-stats .stats-section-title,
#screen-stats .cmp-section-label,
#screen-new-game .setup-label,
#screen-profiles .profiles-section-label,
.modal-label,
.game-editor-frame-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#screen-home .stat-card,
#screen-home .quick-action-btn,
#screen-home .game-card,
#screen-settings .settings-row,
#screen-settings .settings-card,
#screen-history .history-game-card,
#screen-history .session-card,
#screen-history .session-card-inner,
#screen-stats .stats-big-num,
#screen-stats .stats-split-card,
#screen-stats .stats-chart-wrap,
#screen-stats .stats-selected-card,
#screen-stats .stats-compare-wrap,
#screen-stats .stats-insight-card,
#screen-new-game .setup-section,
#screen-new-game .setup-bowler-row,
#screen-new-game .setup-add-bowler,
#screen-new-game .setup-team-banner,
#screen-new-game .setup-team-pick,
#screen-profiles .profile-card,
#screen-profiles .team-card,
#screen-profiles .team-member-row,
.summary-result-card,
.summary-special,
.game-editor-section,
.frame-reentry-summary,
.frame-reentry-pin-wrap {
  border-radius: var(--radius-md);
}

#screen-home .stat-card,
#screen-home .quick-action-btn,
#screen-history .history-card-inner,
#screen-history .session-card-inner,
#screen-stats .stats-big-num,
#screen-stats .stats-split-card,
#screen-stats .stats-chart-wrap,
#screen-stats .stats-selected-card,
#screen-new-game .setup-section,
#screen-profiles .profile-card,
#screen-profiles .team-card,
.summary-result-card,
.summary-special,
.game-editor-section {
  padding: var(--space-4);
}

.btn-primary,
.modal-cancel-btn,
.modal-input,
.setup-input,
.setup-select,
.setup-textarea,
.setup-datetime,
.apikey-btn,
.apikey-reveal-btn {
  min-height: var(--space-11);
  border-radius: var(--radius-sm);
}

.btn-primary,
.modal-cancel-btn,
.apikey-btn,
.apikey-reveal-btn {
  padding-inline: var(--space-4);
}

.setup-pill,
.modal-pill,
.hf-filter-chip,
.hf-chip,
.hf-bowler-chip,
.stats-mode-tab,
.cmp-period-chip,
.sf-option,
.sc-shot-chip,
.shortcut-btn,
.numpad-btn,
.frame-reentry-mode-btn,
.frame-reentry-shortcut,
.frame-reentry-score-btn,
.frame-reentry-mark-btn {
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.15;
}

.setup-pill,
.modal-pill,
.hf-filter-chip,
.hf-chip,
.hf-bowler-chip,
.stats-mode-tab,
.cmp-period-chip,
.sf-option {
  min-height: var(--space-10);
  padding-inline: var(--space-3);
}

.setup-input,
.setup-select,
.setup-textarea,
.setup-datetime,
.modal-input,
.stats-date-input,
.import-match-select {
  font-size: 15px;
  line-height: 1.25;
}

.scorecard-frame-tile,
.history-mini-frame,
.summary-frame,
.game-editor-frame-tile {
  border-radius: var(--radius-sm);
  border-width: 1px;
}

.game-card-frames,
.summary-frames-strip,
.scorecard-card .scorecard-grid,
.stats-frame-scorecard,
.import-mini-frames {
  gap: var(--space-1);
}

.scorecard-frame-balls {
  gap: 2px;
}

.scorecard-frame-ball,
.frame-ball {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.scorecard-frame-score,
.frame-score,
.game-editor-frame-tile .scorecard-frame-score {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.scorecard-frame-ball.is-split-mark,
.frame-ball.split,
.game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

#screen-scoring .sc-shot-chips,
#screen-scoring .sc-shortcuts,
#screen-scoring .score-numpad,
#screen-scoring .scoring-shortcuts,
.frame-reentry-shortcuts,
.frame-reentry-score-grid {
  gap: var(--space-2);
}

#screen-scoring .pin-diagram,
.frame-reentry-pin-diagram {
  gap: var(--space-2);
}

.btn-primary,
.modal-cancel-btn,
.setup-pill,
.modal-pill,
.hf-filter-chip,
.hf-chip,
.hf-bowler-chip,
.stats-mode-tab,
.cmp-period-chip,
.sf-option,
.sc-shot-chip,
.shortcut-btn,
.numpad-btn,
.frame-reentry-score-btn,
.frame-reentry-mark-btn {
  transition-duration: var(--motion-fast);
}

.history-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 60px 24px; text-align: center;
}

.history-empty-icon { font-size: 48px; opacity: 0.5; }
.history-empty-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); }
.history-empty-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ── Session cards (Sessions filter) ─────────────────────────── */
.session-card {
  background: transparent; border: none;
  border-radius: 0; overflow: visible;
  cursor: pointer; transition: background var(--transition);
  position: relative;
}
.session-card.session-updated {
  border-color: color-mix(in srgb, var(--accent-teal) 70%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-teal) 26%, transparent);
}
.session-update-pill {
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--accent-teal) 42%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-teal) 12%, transparent);
  color: var(--accent-teal);
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.session-card-inner {
  position: relative; z-index: 1;
  background: transparent;
  border-radius: 0;
  transition: transform 0.18s ease;
  will-change: transform;
}
.session-card:active .session-card-header { background: var(--bg-input); }
.session-card-header {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px; background: color-mix(in srgb, var(--accent-teal) 12%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--accent-teal) 44%, var(--border));
  border-radius: var(--radius-pill);
  transition: background var(--transition);
  margin-bottom: 8px;
}
.session-card-header-top { width: 100%; display: flex; align-items: center; gap: 10px; }
.session-source-badge {
  font-size: 13px; flex-shrink: 0;
  opacity: 0.7;
}
.session-card-main { flex: 1; min-width: 0; }
.session-card-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-card-meta {
  font-size: 11px; color: var(--text-secondary); margin-top: 2px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.session-card-meta-dot { opacity: 0.4; }
.session-card-scores {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.session-score-pill {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-input); border-radius: var(--radius-sm);
  padding: 4px 8px; min-width: 44px;
}
.session-score-pill-name {
  font-size: 9px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52px;
}
.session-score-pill-total {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  color: var(--text-primary); line-height: 1.1;
}
.session-score-pill-total.great { color: var(--accent-teal); }
.session-score-pill-total.good  { color: var(--accent-gold); }
.session-card-games {
  display: flex; border-top: 1px solid color-mix(in srgb, var(--accent-teal) 38%, var(--border));
  border-right: 1px solid color-mix(in srgb, var(--accent-teal) 38%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-teal) 38%, var(--border));
  border-left: 3px solid var(--accent-teal);
  flex-direction: column; gap: 0;
  background: transparent;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
}
.session-inner-game {
  border-bottom: 1px solid var(--border); padding: 0;
}
.session-inner-game:last-child { border-bottom: none; }
.session-source-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  border-radius: 8px; background: var(--bg-input);
  border: 1px solid var(--border); color: var(--text-secondary);
}
.session-source-tag.ai {
  background: color-mix(in srgb, var(--brand-teal) 8%, var(--surface-card));
  border-color: color-mix(in srgb, var(--brand-teal) 25%, var(--border));
  color: var(--brand-teal);
}
.session-stats-row {
  display: flex; gap: 8px; padding: 10px 14px 12px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.session-stat {
  flex: 1; min-width: 60px; text-align: center;
  background: var(--bg-input); border-radius: var(--radius-sm); padding: 6px 4px;
}
.session-stat-val {
  font-family: var(--font-display); font-size: 15px; font-weight: 800;
  color: var(--text-primary); line-height: 1;
}
.session-stat-lbl {
  font-size: 9px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px;
}

/* ── Session action menu ─────────────────────────────────────── */
.session-menu-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary); flex-shrink: 0;
  touch-action: manipulation; transition: background var(--transition);
  margin-left: 2px;
}
.session-menu-btn:active { background: var(--bg-input); }
.session-action-sheet {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.session-action-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
}
.session-action-panel {
  position: relative; z-index: 1;
  background: var(--bg-card); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 12px 16px 32px;
}
.session-action-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 16px;
}
.session-action-title {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 12px; padding: 0 2px;
}
.session-action-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 4px; border: none; background: transparent;
  color: var(--text-primary); font-size: 15px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; border-radius: var(--radius-sm);
  transition: background var(--transition); text-align: left;
}
.session-action-btn:active { background: var(--bg-input); }
.session-action-btn svg { color: var(--accent-teal); flex-shrink: 0; }
.session-action-btn.danger { color: var(--accent-red); }
.session-action-btn.danger svg { color: var(--accent-red); }
.session-action-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Merge game picker rows ──────────────────────────────────── */
/* ── Session stats section ───────────────────────────────────── */
.session-stats-section { border-top: 1px solid var(--border); }
.session-winner-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 8px;
  background: color-mix(in srgb, var(--score-spare) 6%, var(--surface-card));
  border-bottom: 1px solid color-mix(in srgb, var(--score-spare) 15%, var(--border));
}
.session-winner-trophy { font-size: 16px; flex-shrink: 0; margin-left: 5px; }
.session-winner-name { font-size: 14px; font-weight: 700; color: var(--accent-gold); flex: 1; }
.session-winner-sub { font-size: 11px; color: var(--text-secondary); }
.session-totals-row {
  display: flex; gap: 6px; padding: 10px 12px 8px; flex-wrap: wrap;
}
.session-totals-row .session-stat { flex: 1; min-width: 52px; }
.session-bowler-table {
  padding: 0 12px 12px;
  display: flex; flex-direction: column; gap: 0;
}
.session-bowler-table-header {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border);
}
.session-bowler-table-header .sbt-name {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary); flex: 1;
}
.session-bowler-table-header .sbt-val {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary);
  min-width: 36px; text-align: right;
}
.session-bowler-row {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 6px; border-bottom: 1px solid var(--border);
}
.session-bowler-row:last-child { border-bottom: none; }
.session-bowler-row.session-bowler-winner { background: rgba(245,166,35,0.04); }
.sbt-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-rank-medal { margin-left: 5px; font-size: 12px; }
.sbt-val { font-size: 12px; font-weight: 700; color: var(--text-primary); min-width: 36px; text-align: right; flex-shrink: 0; }
.sbt-series { color: var(--accent-teal); font-size: 13px; }
/* ── Session header stacked avatars ─────────────────────────── */
.session-avatar-stack {
  display: flex; align-items: center; flex-shrink: 0;
  margin-right: 2px;
}
.session-avatar-chip {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-input); border: 2px solid var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; flex-shrink: 0;
  margin-left: -7px; letter-spacing: 0;
}
.session-avatar-chip:first-child { margin-left: 0; }
.session-avatar-chip.overflow {
  background: var(--bg-input); color: var(--text-secondary); font-size: 8px;
}
.session-avatar-chip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ── Session inner scorecard cards ───────────────────────────── */
.session-games-toggle {
  width: 100%; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-input); border: none; border-top: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.session-games-toggle:active { background: var(--bg-card); }
.session-games-toggle.open svg { transform: rotate(180deg); }
.session-games-toggle svg { transition: transform 0.2s; }
.session-game-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 6px;
  border-top: 1px solid var(--border);
}
.session-game-header:first-child { border-top: none; }
.session-game-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary);
}
.session-round-move-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg-input);
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
}
.session-round-move-btn:active { background: var(--bg-card); border-color: var(--accent-teal); color: var(--accent-teal); }
.round-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.round-picker-btn {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-card);
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--text-primary); cursor: pointer; touch-action: manipulation;
  transition: all var(--transition); display: flex; align-items: center; justify-content: center;
}
.round-picker-btn:active, .round-picker-btn.selected { background: var(--accent-teal); border-color: var(--accent-teal); color: #000; }
.round-picker-btn.current { border-color: var(--text-secondary); color: var(--text-secondary); opacity: 0.45; cursor: default; }
.session-scorecard-wrap {
  padding: 0 10px;
  transition: background var(--transition);
  border-top: 1px solid var(--border);
}
.session-scorecard-wrap:first-of-type { border-top: none; }
.session-scorecard-wrap:active { background: var(--bg-input); }
.session-scorecard-wrap.player-moved {
  background: color-mix(in srgb, var(--accent-teal) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-teal);
}
.session-scorecard-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 4px;
  margin: 0;
}
.session-scorecard-winner {
  background: color-mix(in srgb, var(--brand-teal) 6%, transparent);
}
/* Per-game highlights strip */
.session-game-highlights {
  margin: 0 10px 8px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.session-highlights-overall {
  margin: 8px 12px 10px;
}
.session-highlight-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-primary); line-height: 1.4;
}
.session-highlight-emoji { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }

#screen-history .session-game-highlights {
  margin: 10px 10px 12px;
  padding: 11px 12px;
}

.merge-date-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-secondary);
  padding: 10px 4px 4px;
}
.merge-game-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 6px; border: none; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  touch-action: manipulation; transition: background var(--transition);
  border-bottom: 1px solid var(--border);
}
.merge-game-row:last-child { border-bottom: none; }
.merge-game-row:active { background: var(--bg-input); }
.merge-game-src { font-size: 16px; flex-shrink: 0; }
.merge-game-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.merge-game-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.merge-game-bowler {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.merge-game-score {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--text-primary); flex-shrink: 0; min-width: 36px; text-align: right;
}
.merge-game-meta,
.merge-game-sub {
  font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.merge-game-sub { font-size: 10px; opacity: 0.86; }

/* ─── PROFILES SCREEN ─────────────────────────────────────────── */
.profiles-screen {
  padding: var(--screen-pad);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
  display: flex; flex-direction: column; gap: var(--section-gap);
}

.profiles-header { display: flex; justify-content: flex-end; }

.profiles-list { display: flex; flex-direction: column; gap: 10px; }

.profile-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; touch-action: manipulation; transition: background var(--transition);
}

.profile-card:active { background: var(--bg-input); }
.profile-card.primary { border-color: rgba(0,212,200,0.35); }

.profile-card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #000; flex-shrink: 0;
}

.profile-card-info { flex: 1; }
.profile-card-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.profile-card-sub  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; display: flex; gap: 8px; }
.profile-card-stats { text-align: right; }
.profile-card-avg { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--accent-teal); line-height: 1; }
.profile-card-avg-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; }
.profile-primary-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-teal); background: rgba(0,212,200,0.1); border: 1px solid rgba(0,212,200,0.25); border-radius: 8px; padding: 2px 6px; display: inline-block; margin-top: 3px; }

/* ─── SEARCH INPUT ─────────────────────────────────────────── */
.search-input-wrap {
  position: relative;
  margin-bottom: 4px;
}
.search-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px 10px 38px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--accent-teal); }
.search-input::placeholder { color: var(--text-secondary); }
.search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

/* ─── SECTION DIVIDERS in profiles ────────────────────────── */
.profiles-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  padding: 8px 4px 4px;
}

/* ─── TEAM CARDS ───────────────────────────────────────────── */
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition);
}
.team-card:active { background: var(--bg-input); }
.team-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.team-card-sub  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.team-card-info { flex: 1; }
.team-card-chevron { color: var(--border); flex-shrink: 0; }

.profiles-hero,
.profile-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.profiles-kicker,
.profile-detail-kicker,
.profile-form-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profiles-title,
.profile-detail-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text-hi);
}

.profiles-subtitle,
.profile-detail-subtitle {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profiles-add-btn,
.profile-detail-edit-btn,
.profile-detail-back-btn {
  min-width: var(--space-11);
  min-height: var(--space-11);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-teal);
  background: color-mix(in srgb, var(--brand-teal) 6%, transparent);
  color: var(--brand-teal);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.profiles-search-wrap {
  margin: var(--space-3) 0 0;
}

#screen-profiles .profiles-list {
  gap: 0;
}

#screen-profiles .profiles-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}

#screen-profiles .profiles-section-label {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-hi);
}

.profiles-section-action {
  min-height: var(--space-11);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

#screen-profiles .profile-card.swipe-card,
#screen-profiles .team-card.swipe-card {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

#screen-profiles .profile-card-inner,
#screen-profiles .team-card-inner {
  min-height: 80px;
  padding: var(--space-3) 0;
  background: transparent;
  border-radius: 0;
}

#screen-profiles .profile-card-avatar,
#screen-profiles .team-icon-preview {
  width: 48px;
  height: 48px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-brand), var(--accent-blue));
}

#screen-profiles .profile-card-info,
#screen-profiles .team-card-info {
  min-width: 0;
}

#screen-profiles .profile-card-name,
#screen-profiles .team-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1.15;
}

#screen-profiles .profile-card-sub,
#screen-profiles .team-card-sub {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  gap: var(--space-1);
  flex-wrap: wrap;
}

.profile-card-open,
.team-card-open {
  min-height: var(--space-11);
  display: inline-flex;
  align-items: center;
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.profile-detail-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-detail-card,
.profile-detail-stat,
.profile-detail-strip,
.profile-detail-panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.profile-detail-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}

.profile-detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-brand), var(--accent-blue));
}

.profile-detail-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1.1;
}

.profile-detail-meta,
.profile-detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile-detail-meta {
  margin-top: var(--space-1);
  line-height: 1.5;
}

.profile-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.profile-detail-stat {
  min-height: 76px;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
}

.profile-detail-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 0.95;
  color: var(--text-hi);
}

.profile-detail-stat.primary .profile-detail-stat-value {
  color: var(--brand-teal);
}

.profile-detail-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.profile-detail-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-color: color-mix(in srgb, var(--score-spare) 48%, var(--border));
  background: color-mix(in srgb, var(--score-spare) 9%, var(--surface-card));
}

.profile-detail-strip-value {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--score-spare);
  line-height: 1;
}

.profile-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.profile-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.profile-detail-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile-detail-view-all {
  min-height: var(--space-11);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-teal);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.profile-ball-grid,
.profile-ach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  min-width: 0;
}

.profile-ball-card {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-hi);
  min-width: 0;
}

.profile-ball-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-ball-meta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile-ach-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-ach-grid .ach-badge-btn {
  min-width: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
}

.profile-ach-grid .ach-badge-emoji {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  font-size: 20px;
}

.profile-ach-grid .ach-badge-name {
  max-width: 100%;
  color: var(--text-hi);
  font-size: 10px;
}

.profile-ach-grid > .profile-ball-card {
  grid-column: 1 / -1;
}

.profile-ach-empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.achievement-progress-menu-wrap {
  position: relative;
}

.achievement-progress-menu-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
}

.achievement-progress-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 168px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.achievement-progress-menu-label {
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.achievement-progress-menu button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-hi);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.achievement-progress-menu button.active {
  color: var(--brand-teal);
  background: rgba(0,212,200,0.08);
}

.achievement-progress-tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.achievement-progress-tier-label {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-progress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.achievement-progress-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-card);
  min-width: 0;
  cursor: pointer;
  touch-action: pan-y;
}

.achievement-progress-card.completed {
  border-color: rgba(0,212,200,0.36);
}

.achievement-progress-card.progress-card-dismissed {
  opacity: 0;
  transform: translateX(-18px);
  pointer-events: none;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}

.progress-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.progress-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  font-size: 18px;
  font-weight: 800;
}

.progress-copy {
  flex: 1;
  min-width: 0;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.progress-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-value {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.progress-subtext {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand-teal);
  transition: width 650ms ease;
}

.achievement-progress-card.progress-animate .progress-fill {
  width: var(--progress-width);
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill {
    transition: none;
  }
}

.progress-dismiss {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.achievement-detail-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 14px;
}

#screen-profiles .swipe-card-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast);
}

#screen-profiles .swipe-card.swipe-revealed .swipe-card-actions {
  opacity: 1;
  pointer-events: auto;
}

#create-bowler-modal.profile-edit-mode .profile-edit-section {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

#create-bowler-modal.profile-edit-mode .profile-edit-section summary {
  min-height: var(--space-11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

#create-bowler-modal.profile-edit-mode .profile-edit-section summary::-webkit-details-marker {
  display: none;
}

#create-bowler-modal.profile-edit-mode .profile-edit-section summary::after {
  content: 'Collapsed';
  color: var(--text-muted);
  font-size: 9px;
}

#create-bowler-modal.profile-edit-mode .profile-edit-section[open] summary::after {
  content: 'Expanded';
}

#create-bowler-modal.profile-edit-mode .profile-edit-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

#create-bowler-modal.profile-edit-mode .profile-edit-section-body.secondary {
  padding-top: var(--space-3);
}

#create-bowler-modal.profile-edit-mode .profile-edit-static-field,
#create-bowler-modal.profile-edit-mode .profile-edit-ball-card {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-card) 88%, var(--surface-raised));
}

#create-bowler-modal.profile-edit-mode .profile-edit-static-label,
#create-bowler-modal.profile-edit-mode .profile-edit-ball-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#create-bowler-modal.profile-edit-mode .profile-edit-static-value,
#create-bowler-modal.profile-edit-mode .profile-edit-ball-name {
  margin-top: var(--space-1);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-hi);
}

#create-bowler-modal.profile-edit-mode .profile-edit-add-ball {
  min-height: var(--space-11);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  cursor: not-allowed;
}

/* ─── TEAM MODAL ───────────────────────────────────────────── */
.team-icon-options { display: flex; gap: 8px; margin-bottom: 4px; }
.team-icon-opt {
  flex: 1; padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  text-align: center; transition: all var(--transition);
}
.team-icon-opt.active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(0,212,200,0.08);
}
.team-icon-preview {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; cursor: pointer;
  overflow: hidden; flex-shrink: 0;
}
.team-icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.team-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.team-emoji-btn {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  transition: background var(--transition);
}
.team-emoji-btn:active { background: var(--bg-card); }
.team-emoji-btn.selected { border-color: var(--accent-teal); background: rgba(0,212,200,0.1); }
.team-member-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.team-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  cursor: pointer; touch-action: manipulation;
}
.team-member-row.selected { border-color: var(--accent-teal); background: rgba(0,212,200,0.06); }
.team-member-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.team-member-check { color: var(--accent-teal); font-weight: 800; font-size: 16px; }

/* ─── SETUP TEAM BANNER ────────────────────────────────────── */
.setup-team-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(0,212,200,0.06);
  border: 1px solid rgba(0,212,200,0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.setup-team-banner-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--accent-teal); }
.setup-team-banner-clear { font-size: 12px; color: var(--text-secondary); cursor: pointer; padding: 4px; }
.setup-team-pick {
  width: 100%; padding: 10px 14px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  touch-action: manipulation; display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; transition: border-color var(--transition);
}
.setup-team-pick:active { border-color: var(--accent-teal); }

/* ─── MODALS ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.62);
  z-index: 900; display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalFadeIn var(--motion-standard);
}

@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
  width: 100%; max-width: 480px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 14px 20px calc(var(--safe-bottom) + 20px);
  display: flex; flex-direction: column; gap: 16px;
  animation: sheetUp var(--motion-slow);
  max-height: 90dvh; overflow-y: auto;
}

.modal-sheet::-webkit-scrollbar { display: none; }

.modal-sheet--compact { gap: 14px; }
.modal-copy {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}
.modal-primary-centered {
  justify-content: center;
  padding: 14px;
}
.modal-action-row {
  display: flex;
  gap: 8px;
}
.modal-action-primary {
  flex: 2;
  justify-content: center;
  padding: 13px;
}
.modal-action-secondary { flex: 1; }

.inner-screen-sheet {
  gap: var(--section-gap) !important;
  padding: 16px 16px calc(var(--safe-bottom) + 20px);
}

.inner-flow-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inner-flow-group.tight {
  gap: 10px;
}

.inner-section-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 4px;
}

.modal-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  color: var(--text-hi); letter-spacing: 0.8px;
  text-transform: uppercase;
}

.modal-list { display: flex; flex-direction: column; gap: 8px; }

.modal-list-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer; touch-action: manipulation;
  transition: all var(--transition);
}

.modal-list-item:active { background: var(--bg-card); border-color: var(--accent-teal); }
.modal-list-item.already-added { opacity: 0.4; pointer-events: none; }

.modal-list-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #000; flex-shrink: 0;
}

.modal-list-name { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.modal-list-sub  { font-size: 11px; color: var(--text-secondary); }
.modal-list-check { color: var(--accent-teal); }

.modal-actions { display: flex; flex-direction: column; gap: 8px; }

.modal-cancel-btn {
  width: 100%; min-height: var(--space-11); padding: 0 14px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 14px; font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.modal-cancel-btn:active { background: var(--surface-raised); color: var(--text-hi); }

.modal-form { display: flex; flex-direction: column; gap: 14px; }

.modal-field { display: flex; flex-direction: column; gap: 6px; }

.modal-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-secondary);
}

.modal-input {
  min-height: var(--space-11);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 14px;
  font-size: 15px; font-family: var(--font-body); color: var(--text-hi);
  outline: none; transition: border-color var(--motion-fast), background var(--motion-fast);
  -webkit-user-select: text; user-select: text;
}

.modal-input:focus { border-color: var(--brand-teal); }

.modal-pill-group { display: flex; gap: 8px; }

.modal-pill {
  flex: 1; min-height: var(--space-11); padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--surface-raised); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}

.modal-pill.active {
  background: color-mix(in srgb, var(--brand-teal) 16%, var(--surface-raised));
  border-color: var(--brand-teal);
  color: #000;
}

#create-bowler-modal.profile-edit-mode {
  align-items: center;
}

#create-bowler-modal.profile-edit-mode .modal-sheet {
  width: calc(100% - var(--space-6));
  max-width: 430px;
  max-height: calc(100dvh - var(--space-6));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-card);
  gap: var(--space-4);
}

#create-bowler-modal.profile-edit-mode .modal-handle {
  display: none;
}

#create-bowler-modal.profile-edit-mode .modal-title {
  font-size: 38px;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

#create-bowler-modal.profile-edit-mode .modal-title::after {
  content: 'Collapsed and expandable sections';
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

#create-bowler-modal.profile-edit-mode .modal-field {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

#create-bowler-modal.profile-edit-mode .modal-field:first-of-type {
  border-top: 0;
}

#create-bowler-modal.profile-edit-mode .modal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}

#create-bowler-modal.profile-edit-mode .modal-input {
  min-height: 52px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-card) 88%, var(--surface-raised));
  font-size: 15px;
  font-weight: 700;
}

#create-bowler-modal.profile-edit-mode .modal-pill {
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-card) 88%, var(--surface-raised));
  color: var(--text-hi);
}

#create-bowler-modal.profile-edit-mode .avatar-editor-preview-wrap {
  margin: 0;
  padding: var(--space-2) 0 var(--space-3);
}

#create-bowler-modal.profile-edit-mode .avatar-editor-preview {
  width: 88px;
  height: 88px;
  font-size: 30px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-brand), var(--accent-blue));
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

#create-bowler-modal.profile-edit-mode .avatar-editor-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  max-width: none;
  max-height: none;
  position: static;
}

#create-bowler-modal.profile-edit-mode .avatar-editor-preview-label {
  display: none !important;
}

#create-bowler-modal.profile-edit-mode .avatar-mode-tabs {
  display: flex !important;
}

#create-bowler-modal.profile-edit-mode .avatar-bg-section {
  display: block !important;
}

#create-bowler-modal.profile-edit-mode .modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-2);
}

#create-bowler-modal.profile-edit-mode .modal-actions .modal-cancel-btn {
  order: 1;
}

#create-bowler-modal.profile-edit-mode .modal-actions .btn-primary {
  order: 2;
}

/* Edit bowler action buttons */
.cb-edit-row {
  display: flex; gap: 8px; margin-bottom: 8px;
}

.cb-action-btn {
  flex: 1; padding: 11px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  touch-action: manipulation; border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-secondary);
  transition: all var(--transition); text-align: center;
}

.cb-action-btn:active { opacity: 0.7; }

.cb-action-btn.primary-btn {
  color: var(--accent-teal); border-color: rgba(0,212,200,0.35);
  background: rgba(0,212,200,0.06);
}

.cb-action-btn.archive-btn {
  color: var(--accent-gold); border-color: rgba(245,166,35,0.3);
  background: rgba(245,166,35,0.06);
}

.cb-action-btn.delete-btn {
  color: var(--accent-red);
  border-color: rgba(255,71,87,0.25); background: rgba(255,71,87,0.05);
}
/* ─── STATS DASHBOARD ─────────────────────────────────────────── */
.stats-screen { padding-bottom: 16px; }
.stats-screen::-webkit-scrollbar { display: none; }
.stats-bottom-spacer { height: calc(var(--nav-height) + var(--safe-bottom) + 32px); }
.stats-mode-content-shell { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 32px); }
.stats-compare-submode-row { display: flex; gap: 8px; padding: 10px var(--screen-pad) 0; }
.stats-player-bar { display: flex; gap: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); overflow-x: auto; position: sticky; top: 0; z-index: 5; }
.stats-player-bar::-webkit-scrollbar { display: none; }
.stats-player-tab { flex: 1; min-width: 70px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; touch-action: manipulation; border-bottom: 2px solid transparent; transition: all var(--transition); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); background: none; border-top: none; border-left: none; border-right: none; }
.stats-player-tab.active { color: var(--accent-teal); border-bottom-color: var(--accent-teal); }
.stats-player-tab-avg { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stats-player-tab.active .stats-player-tab-avg { color: var(--accent-teal); }
.stats-filter-bar { display: flex; align-items: center; gap: 8px; padding: 10px var(--screen-pad); background: var(--bg-input); border-bottom: 1px solid var(--border); cursor: pointer; touch-action: manipulation; transition: background var(--transition); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.stats-filter-bar:active { background: var(--bg-card); }
.stats-filter-bar span { flex: 1; }
.stats-filter-summary { padding: 8px var(--screen-pad) 0; font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.3px; }
.stats-summary-bar { padding: 6px var(--screen-pad); font-size: 11px; color: var(--text-secondary); font-weight: 600; background: var(--bg-primary); letter-spacing: 0.3px; min-height: 28px; display: flex; align-items: center; }
.stats-section { padding: var(--section-gap) var(--screen-pad) 0; }
.stats-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-secondary); margin-bottom: 12px; }
.stats-big-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-big-num { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats-big-num:nth-child(n+4) {
  background: color-mix(in srgb, var(--surface-raised) 42%, var(--surface-card));
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.stats-big-val { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stats-big-num:nth-child(n+4) .stats-big-val { font-size: 24px; }
.stats-big-val.highlight { color: var(--accent-teal); }
.stats-big-val.dim { color: var(--text-secondary); opacity: 0.5; }
.stats-big-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); text-align: center; }
.stats-rate-cards {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 4px;
  margin: 8px 0 0;
  scroll-snap-type: x mandatory;
}
.stats-rate-cards::-webkit-scrollbar {
  display: none;
}
.stats-rate-card {
  flex: 0 0 calc((100% - 16px) / 3);
  scroll-snap-align: start;
  width: calc((100% - 16px) / 3);
  min-width: calc((100% - 16px) / 3);
  background: color-mix(in srgb, var(--surface-raised) 56%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stats-rate-ring { width: 80px; height: 80px; position: relative; }
.stats-rate-ring svg { transform: rotate(-90deg); }
.stats-rate-ring-track { fill: none; stroke: color-mix(in srgb, var(--border) 62%, var(--surface-raised)); stroke-width: 4.5; }
.stats-rate-ring-fill  { fill: none; stroke-width: 4.5; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.ring-text-pct,
.ring-text-label,
.ring-text-sub {
  transform: rotate(90deg);
  transform-origin: 40px 40px;
}
.ring-text-pct {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  fill: var(--text-primary);
}
.ring-text-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  fill: var(--text-primary);
}
.ring-text-sub {
  font-size: 7px;
  font-weight: 500;
  fill: var(--text-secondary);
}

/* Split stat card — two numbers side by side */
.stats-split-card {
  margin-top: 2px;
  background: color-mix(in srgb, var(--surface-raised) 50%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 0;
}
.stats-split-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stats-split-half + .stats-split-half {
  border-left: 1px solid var(--border);
}
.stats-split-big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
}
.stats-split-big.none { color: var(--text-secondary); opacity: 0.4; }
.stats-split-sublabel {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  text-align: center;
}
.stats-split-conv-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-gold);
  margin-top: 1px;
}
.stats-split-conv-pct.good { color: var(--accent-green); }
.stats-split-conv-pct.none { color: var(--text-secondary); opacity: 0.4; }
.stats-chart-wrap {
  background: color-mix(in srgb, var(--surface-card) 92%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--surface-raised));
  border-radius: var(--radius-md);
  padding: 12px;
  height: 190px;
  position: relative;
}
.stats-frame-details {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.stats-frame-details-main { min-width:0; flex:1; }
.stats-frame-player { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.stats-frame-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; display:flex; gap:8px; flex-wrap:wrap; }
.stats-frame-total { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--accent-teal); line-height: 1; flex-shrink: 0; }
.stats-frame-empty { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.stats-selected-card {
  background: color-mix(in srgb, var(--surface-card) 94%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--surface-raised));
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.stats-selected-card-main { flex: 1; min-width: 0; }
.stats-selected-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.stats-selected-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.stats-selected-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stats-selected-card-score {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--accent-teal);
  line-height: 1;
  flex-shrink: 0;
}
.stats-selected-card .history-frame-row {
  margin-top: 10px;
}
.stats-frame-heatmap {
  display:block;
  overflow-x:auto;
  padding-bottom:2px;
}
.stats-frame-heatmap::-webkit-scrollbar { display:none; }
.stats-frame-scorecard {
  display:flex;
  gap:4px;
  min-width:max-content;
}
.stats-frame-legend {
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:10px;
  padding:0 2px;
}
.stats-legend-item { font-size: 11px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.stats-legend-item::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.stats-legend-item.strike::before { background: var(--accent-teal); }
.stats-legend-item.spare::before  { background: var(--score-spare); }
.stats-legend-item.split::before  { background: var(--text-primary); }
.stats-spare-rows { display: flex; flex-direction: column; gap: 8px; }
.stats-spare-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.stats-spare-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.stats-spare-bar-wrap { width: 80px; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
.stats-spare-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; transform-origin: left center; animation: statsSpareBarLoad 520ms ease-out both; }
.stats-spare-pct { font-family: var(--font-display); font-size: 16px; font-weight: 800; min-width: 40px; text-align: right; }
@keyframes statsSpareBarLoad {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .stats-spare-bar-fill,
  .stats-split-bar-fill { animation: none !important; }
}
.stats-split-table { display: flex; flex-direction: column; gap: 6px; }
.stats-split-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stats-split-sort-select { max-width: 132px; min-height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; padding: 0 8px; }
.stats-split-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.stats-split-diagram { width: 36px; min-width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.stats-split-diagram svg { overflow: visible; }
.stats-split-toggle-row { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.stats-split-toggle-row:active { background: var(--bg-input); }
.stats-split-info { flex: 1; min-width: 0; }
.stats-split-name { font-size: 13px; font-weight: 400; color: var(--accent-teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-split-sub  { font-size: 10px; color: var(--text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-split-count { font-size: 12px; font-weight: 500; color: var(--text-primary); min-width: 36px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 2px; }
.stats-split-bar-wrap { width: 76px; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.stats-split-bar-fill { height: 100%; border-radius: 3px; transform-origin: left center; animation: statsSpareBarLoad 520ms ease-out both; }
.stats-split-conv  { font-size: 11px; font-weight: 700; min-width: 36px; text-align: right; }
.stats-split-conv.good { color: var(--accent-green); }
.stats-split-conv.mid  { color: var(--accent-gold); }
.stats-split-conv.bad  { color: var(--accent-red); }
.stats-miss-bars { display: flex; flex-direction: column; gap: 6px; }
.stats-miss-row { display: flex; align-items: center; gap: 10px; }
.stats-miss-pin { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.stats-miss-bar-wrap { flex: 1; height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.stats-miss-bar-fill { height: 100%; background: var(--accent-red); opacity: 0.7; border-radius: 4px; transition: width 0.5s ease; }
.stats-miss-count { font-size: 12px; font-weight: 700; color: var(--text-secondary); min-width: 24px; text-align: right; }
.stats-streak-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.stats-streak-pill {
  background: color-mix(in srgb, var(--surface-raised) 54%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-md); padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1; min-width: 80px;
}
.stats-streak-pill-val { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stats-streak-pill-val.highlight { color: var(--accent-teal); }
.stats-streak-pill-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); text-align: center; }

/* Pin miss heatmap */
.stats-pin-heatmap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.stats-pin-row { display: flex; gap: 8px; justify-content: center; }
.stats-pin-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s; touch-action: manipulation;
  border: 2px solid transparent;
}
.stats-pin-circle:active { transform: scale(0.9); }
.stats-pin-circle.miss-0 { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border); cursor: default; }
.stats-pin-circle.miss-1 { background: color-mix(in srgb, var(--score-spare) 15%, var(--surface-card)); color: var(--score-spare); border-color: color-mix(in srgb, var(--score-spare) 30%, var(--border)); }
.stats-pin-circle.miss-2 { background: color-mix(in srgb, var(--score-spare) 28%, var(--surface-card)); color: var(--score-spare); border-color: color-mix(in srgb, var(--score-spare) 50%, var(--border)); }
.stats-pin-circle.miss-3 { background: color-mix(in srgb, var(--danger) 20%, var(--surface-card)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.stats-pin-circle.miss-4 { background: color-mix(in srgb, var(--danger) 40%, var(--surface-card)); color: var(--text-hi); border-color: var(--danger); }
.stats-pin-tooltip {
  font-size: 11px; color: var(--text-secondary); text-align: center;
  min-height: 16px; margin-top: 2px;
}

.cmp-sub-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--space-11);
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-card);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.cmp-sub-btn.active { background: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-card)); border-color: color-mix(in srgb, var(--brand-teal) 35%, var(--border)); color: var(--brand-teal); }
.stats-mode-panel { padding: 12px var(--screen-pad); display: flex; flex-direction: column; gap: 14px; }

/* Stats header alignment with Games */
#screen-stats .stats-filter-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--screen-pad);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  cursor: default;
}

#screen-stats .stats-filter-bar:active {
  background: var(--bg-primary);
}

#screen-stats .stats-mode-tabs {
  position: static;
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
  background: transparent;
  border: 0;
}

#screen-stats .stats-mode-tab {
  flex: 0 0 auto;
  min-height: var(--space-11);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

#screen-stats .stats-mode-tab.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

#screen-stats .stats-filter-btn {
  flex-shrink: 0;
}

#screen-stats .stats-filter-summary {
  padding: 8px var(--screen-pad) 0;
}

/* Compare table */
.cmp-header { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; }
.cmp-bowler-pick {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 8px; cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.cmp-bowler-pick:active { background: var(--bg-input); }
.cmp-bowler-pick.selected { border-color: color-mix(in srgb, var(--brand-teal) 40%, var(--border)); background: color-mix(in srgb, var(--brand-teal) 6%, var(--surface-card)); }
.cmp-bowler-name { font-size: 13px; font-weight: 700; color: var(--text-primary); text-align: center; }
.cmp-bowler-sub  { font-size: 10px; color: var(--text-secondary); text-align: center; }
.cmp-vs-badge { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--text-secondary); flex-shrink: 0; }
.cmp-table { display: flex; flex-direction: column; gap: 2px; }
.cmp-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); padding: 10px 0 4px; }
.cmp-row { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; gap: 8px; }
.cmp-row.has-tug { flex-wrap: wrap; }
.cmp-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-primary); min-width: 52px; text-align: center; line-height: 1; }
.cmp-val.win  { color: var(--accent-teal); }
.cmp-val.lose { color: var(--text-secondary); opacity: 0.55; }
.cmp-label { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.cmp-tug-track {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 9px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}
.cmp-tug-track::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: var(--text-muted);
  opacity: 0.62;
  transform: translateX(-0.5px);
}
.cmp-tug-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  max-width: 50%;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-muted) 44%, transparent);
}
.cmp-tug-fill.left { right: 50%; }
.cmp-tug-fill.right { left: 50%; }
.cmp-tug-fill.left.win { top: 1px; bottom: 1px; background: var(--brand-teal); }
.cmp-tug-fill.right.win { top: 1px; bottom: 1px; background: var(--score-spare); }
.cmp-h2h-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; text-align: center; }
.cmp-h2h-record { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--accent-teal); }
.cmp-h2h-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Period vs Period */
.cmp-period-picker { display: flex; flex-direction: column; gap: 8px; }
.cmp-period-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.cmp-period-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-period-chip {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.cmp-period-chip.active { background: var(--accent-teal); border-color: var(--accent-teal); color: #000; }
.delta-row { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; gap: 6px; }
.delta-val-a { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text-secondary); min-width: 46px; text-align: right; opacity: 0.7; }
.delta-val-b { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--accent-teal); min-width: 46px; text-align: left; }
.delta-label { flex: 1; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.delta-arrow { font-size: 13px; font-weight: 800; min-width: 36px; text-align: center; }
.delta-arrow.up   { color: var(--accent-green); }
.delta-arrow.down { color: var(--accent-red); }
.delta-arrow.flat { color: var(--text-secondary); opacity: 0.4; }

/* Team mode */
.team-picker-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.team-bowler-toggle {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.team-bowler-toggle.active { background: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-card)); border-color: color-mix(in srgb, var(--brand-teal) 40%, var(--border)); color: var(--brand-teal); }
.team-contribution-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.team-contribution-row:last-child { border-bottom: none; }
.team-contrib-name { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.team-contrib-val { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--text-primary); min-width: 38px; text-align: right; }
.team-contrib-bar-wrap { width: 60px; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
.team-contrib-bar { height: 100%; background: var(--accent-teal); border-radius: 3px; }

.stats-insights-toggle { width: 100%; min-height: var(--space-11); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--brand-teal) 6%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--brand-teal) 20%, var(--border)); border-radius: var(--radius-md); color: var(--brand-teal); font-size: 14px; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: all var(--transition); }
.stats-insights-toggle:active { opacity: 0.7; }
#stats-advanced-body { padding-top: 12px; }
.stats-insights-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.stats-insight-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.stats-insight-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.stats-insight-text { flex: 1; }
.stats-insight-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.stats-insight-body  { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.stats-compare-wrap  { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.stats-compare-row   { display: flex; gap: 12px; }
.stats-compare-col   { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.stats-compare-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-teal); }
.stats-date-input { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; font-family: var(--font-body); color: var(--text-primary); outline: none; width: 100%; -webkit-appearance: none; transition: border-color var(--transition); }
.stats-date-input:focus { border-color: var(--accent-teal); }
.stats-compare-result { margin-top: 14px; }
.stats-compare-table  { width: 100%; border-collapse: collapse; }
.stats-compare-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); padding: 6px 4px; text-align: right; }
.stats-compare-table th:first-child { text-align: left; }
.stats-compare-table td { font-size: 14px; font-weight: 600; color: var(--text-primary); padding: 8px 4px; border-top: 1px solid var(--border); text-align: right; }
.stats-compare-table td:first-child { text-align: left; color: var(--text-secondary); font-size: 12px; }
.stats-compare-table td.up   { color: var(--accent-green); }
.stats-compare-table td.down { color: var(--accent-red); }
.stats-compare-table td.same { color: var(--text-secondary); }
.stats-filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-option { padding: 8px 14px; border-radius: 20px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: all var(--transition); }
.sf-option.active { background: var(--accent-teal); border-color: var(--accent-teal); color: #000; }
.sf-option:active { opacity: 0.7; }
.stats-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 24px; text-align: center; }
.stats-empty-icon { font-size: 48px; opacity: 0.4; }
.stats-empty-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); }
.stats-empty-sub   { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Phase 3 safe screen reskin */
#screen-home,
#screen-settings,
#screen-history,
#screen-stats,
#screen-new-game,
#screen-profiles {
  background: var(--surface-base);
}

#screen-home .home-greeting,
#screen-home .section-title,
#screen-settings .settings-group-title,
#screen-history .history-date-label,
#screen-stats .stats-section-title,
#screen-stats .cmp-section-label,
#screen-new-game .setup-label,
#screen-profiles .profiles-section-label {
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

#screen-home .home-headline {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.96;
  color: var(--text-hi);
}

#screen-home .home-hero {
  padding: var(--space-6) 0 var(--space-3);
}

#screen-home .stat-card,
#screen-home .quick-action-btn,
#screen-home .game-card,
#screen-home .empty-state,
#screen-home .active-bowler-card,
#screen-settings .settings-row,
#screen-settings .settings-card,
#screen-history .history-game-card,
#screen-history .session-card,
#screen-stats .stats-big-num,
#screen-stats .stats-split-card,
#screen-stats .stats-chart-wrap,
#screen-stats .stats-selected-card,
#screen-stats .stats-compare-wrap,
#screen-stats .stats-insight-card,
#screen-new-game .setup-section,
#screen-new-game .setup-bowler-row,
#screen-new-game .setup-add-bowler,
#screen-new-game .setup-team-banner,
#screen-new-game .setup-team-pick,
#screen-profiles .profile-card,
#screen-profiles .team-card,
#screen-profiles .team-icon-preview,
#screen-profiles .team-member-row {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

#screen-home .active-bowler-card {
  background: color-mix(in srgb, var(--brand-teal) 7%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--brand-teal) 50%, var(--border));
  box-shadow: none;
}

#screen-home .active-bowler-switch-btn {
  background: color-mix(in srgb, var(--brand-teal) 10%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--brand-teal) 52%, var(--border));
  color: var(--text-hi);
}

#screen-home .stat-card,
#screen-home .quick-action-btn,
#screen-home .game-card,
#screen-settings .settings-row,
#screen-history .history-card-inner,
#screen-history .session-card-inner,
#screen-new-game .setup-bowler-row,
#screen-new-game .setup-add-bowler,
#screen-profiles .profile-card,
#screen-profiles .team-card {
  min-height: 44px;
}

#screen-home .stat-card-value,
#screen-home .game-card-score,
#screen-history .history-score,
#screen-history .session-card-title,
#screen-stats .stats-big-val,
#screen-stats .cmp-val,
#screen-new-game .setup-team-name,
#screen-profiles .profile-card-avg {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

#screen-home .stat-card-label,
#screen-home .quick-action-sub,
#screen-home .game-card-sub,
#screen-settings .settings-row-sub,
#screen-history .history-game-meta,
#screen-history .session-card-meta,
#screen-stats .stats-big-label,
#screen-new-game .setup-bowler-sub,
#screen-profiles .profile-card-sub,
#screen-profiles .team-card-sub {
  color: var(--text-muted);
}

#screen-home .quick-action-icon,
#screen-settings .settings-row-icon,
#screen-new-game .setup-bowler-avatar,
#screen-profiles .profile-card-avatar {
  background: var(--brand-gradient);
  color: var(--bg-primary);
}

#screen-home .player-chip,
#screen-history .hf-chip,
#screen-history .hf-filter-chip,
#screen-history .hf-bowler-chip,
#screen-stats .stats-player-tab,
#screen-stats .stats-mode-tab,
#screen-stats .sf-option,
#screen-stats .cmp-period-chip,
#screen-stats .team-bowler-toggle,
#screen-new-game .setup-pill,
#screen-profiles .team-icon-opt {
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-body);
}

#screen-home .player-chip.active,
#screen-history .hf-chip.active,
#screen-history .hf-filter-chip.active,
#screen-history .hf-bowler-chip.active,
#screen-stats .stats-player-tab.active,
#screen-stats .stats-mode-tab.active,
#screen-stats .sf-option.active,
#screen-stats .cmp-period-chip.active,
#screen-stats .team-bowler-toggle.active,
#screen-new-game .setup-pill.selected,
#screen-profiles .team-icon-opt.active {
  background: color-mix(in srgb, var(--brand-teal) 16%, transparent);
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}

#screen-settings .settings-list,
#screen-history .history-list,
#screen-stats .stats-screen,
#screen-new-game .setup-screen,
#screen-profiles .profiles-screen {
  gap: var(--space-4);
}

#screen-settings .toggle-switch {
  min-width: 48px;
  min-height: 28px;
}

#screen-settings .settings-card.configured {
  border-color: color-mix(in srgb, var(--brand-teal) 44%, var(--border));
}

#screen-settings .apikey-status-dot,
#screen-settings .debug-status-dot {
  box-shadow: none;
}

#screen-history .history-filter-bar,
#screen-stats .stats-player-bar,
#screen-stats .stats-filter-bar,
#screen-stats .stats-summary-bar {
  background: var(--surface-base);
  border-color: var(--border);
}

#screen-history .history-game-tag,
#screen-history .session-source-badge,
#screen-history .session-score-pill,
#screen-stats .stats-streak-pill,
#screen-stats .stats-miss-tag {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}

#screen-stats .stats-chart-wrap canvas {
  background: transparent;
}

#screen-stats .stats-split-card {
  background: color-mix(in srgb, var(--surface-raised) 54%, var(--surface-card));
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
}

#screen-stats .stats-big-num:nth-child(n+4) {
  background: color-mix(in srgb, var(--surface-raised) 42%, var(--surface-card));
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

#screen-stats .stats-chart-wrap,
#screen-stats .stats-selected-card {
  background: color-mix(in srgb, var(--surface-card) 92%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--border) 88%, var(--surface-raised));
}

#screen-stats .stats-streak-pill {
  background: color-mix(in srgb, var(--surface-raised) 58%, var(--surface-card));
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
}

#screen-new-game .setup-input,
#screen-new-game .setup-select,
#screen-new-game .setup-textarea,
#screen-new-game .setup-datetime,
#screen-stats .stats-date-input,
#screen-profiles .search-input {
  background: var(--surface-raised);
  border-color: var(--border);
}

#screen-new-game .setup-bowler-remove,
#screen-history .history-card-delete {
  color: var(--danger);
}

#screen-profiles .profile-card.primary,
#screen-profiles .team-emoji-btn.selected {
  border-color: var(--brand-teal);
}

#screen-home .empty-state {
  border-style: dashed;
  color: var(--text-muted);
}

/* Phase 4 interaction and UX polish */
.nav-item,
.icon-btn,
.btn-primary,
.btn-full,
.modal-cancel-btn,
.modal-list-item,
.modal-pill,
.modal-input,
.modal-input[type="date"],
.modal-input[type="time"],
.setup-input,
.setup-select,
.setup-textarea,
.setup-datetime,
.setup-pill,
.setup-bowler-row,
.setup-add-bowler,
.player-chip,
.home-bowler-add-btn,
.active-bowler-switch-btn,
.quick-action-btn,
.game-card,
.settings-row,
.settings-card-header,
.apikey-btn,
.apikey-reveal-btn,
.hf-filter-btn,
.hf-filter-chip,
.hf-chip,
.hf-bowler-chip,
.history-card-inner,
.history-card-delete,
.session-menu-btn,
.session-action-btn,
.session-games-toggle,
.session-round-move-btn,
.round-picker-btn,
.stats-player-tab,
.stats-mode-tab,
.stats-insights-toggle,
.sf-option,
.cmp-period-chip,
.team-bowler-toggle,
.profile-card,
.team-card,
.team-icon-opt,
.team-member-row,
.avatar-clear-icon-btn,
.avatar-icon-btn,
.cb-action-btn {
  min-height: var(--space-11);
}

.btn-primary,
.modal-cancel-btn,
.modal-list-item,
.modal-pill,
.quick-action-btn,
.game-card,
.settings-row,
.settings-card-header,
.history-card-inner,
.session-card-inner,
.profile-card,
.team-card,
.stats-big-num,
.stats-split-card,
.stats-insight-card,
.setup-bowler-row,
.setup-add-bowler,
.player-chip,
.hf-filter-chip,
.hf-chip,
.hf-bowler-chip,
.stats-player-tab,
.stats-mode-tab,
.sf-option,
.cmp-period-chip,
.team-bowler-toggle,
.team-icon-opt {
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    opacity var(--motion-fast);
}

.btn-primary:active,
.modal-cancel-btn:active,
.modal-list-item:active,
.quick-action-btn:active,
.game-card:active,
.settings-row:active,
.history-card-inner:active,
.session-card-inner:active,
.profile-card:active,
.team-card:active,
.setup-bowler-row:active,
.setup-add-bowler:active {
  transform: translateY(1px);
}

.nav-item:active,
.icon-btn:active,
.player-chip:active,
.hf-filter-chip:active,
.hf-chip:active,
.hf-bowler-chip:active,
.stats-player-tab:active,
.stats-mode-tab:active,
.sf-option:active,
.cmp-period-chip:active,
.team-bowler-toggle:active,
.team-icon-opt:active,
.avatar-icon-btn:active {
  opacity: 0.78;
  transform: translateY(1px);
}

.icon-btn,
.avatar-clear-icon-btn,
.session-menu-btn,
.history-card-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-clear-icon-btn,
.session-menu-btn,
.history-card-delete {
  width: var(--space-11);
  height: var(--space-11);
  border-radius: var(--radius-sm);
}

.modal-overlay {
  transition: opacity var(--motion-standard);
}

.modal-sheet,
.session-action-panel,
.inner-screen-sheet {
  scroll-padding-bottom: calc(var(--safe-bottom) + var(--space-8));
}

.apikey-result.loading {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-teal) 26%, var(--border));
}

.apikey-result.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-teal) 14%, transparent), transparent);
  transform: translateX(-100%);
  animation: skeletonSweep var(--motion-slow) ease-in-out infinite;
}

.spinner {
  border-color: color-mix(in srgb, var(--brand-teal) 22%, var(--border));
  border-top-color: var(--brand-teal);
}

.stats-chart-wrap {
  border-color: color-mix(in srgb, var(--text-muted) 18%, var(--border));
}

.stats-chart-wrap canvas {
  max-width: 100%;
}

@keyframes skeletonSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .apikey-result.loading::after {
    animation: none;
    transform: none;
    opacity: 0.35;
  }
}

/* ─── IMAGE CROPPER ───────────────────────────────────────────── */
.crop-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 480px; height: 100dvh;
  background: #000; margin: 0 auto;
}

.crop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: rgba(0,0,0,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.crop-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff;
}

.crop-cancel-btn, .crop-use-btn {
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
  touch-action: manipulation; border: none;
}

.crop-cancel-btn { background: rgba(255,255,255,0.1); color: #fff; }
.crop-use-btn    { background: var(--accent-teal); color: #000; }
.crop-cancel-btn:active { opacity: 0.7; }
.crop-use-btn:active    { opacity: 0.85; }

.crop-hint {
  text-align: center; font-size: 12px; color: rgba(255,255,255,0.5);
  padding: 8px 16px; flex-shrink: 0;
}

.crop-canvas-wrap {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #111;
}

#crop-canvas {
  display: block; max-width: 100%; max-height: 100%;
  object-fit: contain;
}

.crop-overlay {
  position: absolute; inset: 0; pointer-events: none;
}

.crop-shade {
  position: absolute; background: rgba(0,0,0,0.55);
  pointer-events: none;
}

.crop-box {
  position: absolute; border: 2px solid var(--accent-teal);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  cursor: move; pointer-events: all;
  touch-action: none;
}

.crop-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,200,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,200,0.2) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}

.crop-handle {
  position: absolute; width: 20px; height: 20px;
  background: var(--accent-teal); border-radius: 3px;
  pointer-events: all; touch-action: none;
}

.crop-handle-tl { top: -10px; left: -10px; cursor: nw-resize; }
.crop-handle-tr { top: -10px; right: -10px; cursor: ne-resize; }
.crop-handle-bl { bottom: -10px; left: -10px; cursor: sw-resize; }
.crop-handle-br { bottom: -10px; right: -10px; cursor: se-resize; }

.crop-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--screen-pad);
  padding-bottom: calc(var(--safe-bottom) + 10px);
  background: rgba(0,0,0,0.9); flex-shrink: 0;
}

.crop-reset-btn {
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 13px; font-weight: 600; border: none;
  cursor: pointer; touch-action: manipulation;
}

.crop-size-label {
  font-size: 11px; color: rgba(255,255,255,0.4);
}

/* ─── IMPORT SCREEN ───────────────────────────────────────────── */
.import-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px var(--screen-pad) calc(var(--nav-height) + var(--safe-bottom) + 24px);
}
.import-step { display: flex; flex-direction: column; gap: 16px; }
.import-step-header { display: flex; flex-direction: column; gap: 5px; padding: 14px 0 10px; }
#import-step-review .import-step-header { padding-top: 20px; padding-bottom: 14px; }
.import-step-num { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent-teal); }
.import-step-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.3px; }
.import-step-sub { font-size: 13px; color: var(--text-secondary); }
.import-game-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.import-game-btn { flex: 1; min-width: 70px; padding: 12px 8px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; touch-action: manipulation; transition: all var(--transition); }
.import-game-btn.selected { background: rgba(0,212,200,0.1); border-color: var(--accent-teal); }
.import-game-btn.review { border-color: color-mix(in srgb, var(--accent-teal) 44%, var(--border)); }
.import-game-btn.uploaded { border-color: color-mix(in srgb, var(--accent-gold) 38%, var(--border)); }
.import-game-btn.confirmed { border-color: color-mix(in srgb, var(--accent-green) 48%, var(--border)); }
.import-game-btn.error { border-color: color-mix(in srgb, var(--accent-red) 52%, var(--border)); }
.import-game-btn.reading { opacity: 0.82; }
.import-game-btn:active { opacity: 0.7; }
.import-game-num { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.import-game-btn.selected .import-game-num { color: var(--accent-teal); }
.import-game-label { font-size: 10px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.import-game-status { min-height: 11px; font-size: 9px; color: var(--text-secondary); font-weight: 700; }
.import-game-action { font-size: 9px; color: var(--accent-teal); font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.import-game-btn.uploaded .import-game-action { color: var(--accent-gold); }
.import-game-btn.confirmed .import-game-action,
.import-game-btn.confirmed .import-game-status { color: var(--accent-green); }
.import-game-btn.error .import-game-action,
.import-game-btn.error .import-game-status { color: var(--accent-red); }
.import-dropzone { background: var(--bg-card); border: 2px dashed var(--border); border-radius: var(--radius-lg); min-height: 160px; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; transition: border-color var(--transition), background var(--transition); overflow: hidden; position: relative; }
.import-dropzone.has-photo { border-style: solid; border-color: var(--accent-teal); min-height: 220px; }
.import-dropzone:active { background: var(--bg-input); }
.import-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
.import-dropzone-icon { color: var(--text-secondary); opacity: 0.6; }
.import-dropzone-text { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.import-dropzone-sub { font-size: 11px; color: var(--text-secondary); opacity: 0.6; line-height: 1.4; }

.import-photo-btns {
  display: flex; gap: 10px; margin-top: 4px;
}

.import-photo-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}

.import-photo-btn:first-child {
  background: rgba(0,212,200,0.1); border-color: rgba(0,212,200,0.35); color: var(--accent-teal);
}

.import-photo-btn:active { opacity: 0.7; transform: scale(0.97); }
.import-photo-preview { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-lg) - 2px); max-height: 280px; }
.import-bowler-context { display: flex; flex-direction: column; gap: 6px; }
.import-bowler-context-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); }
.import-bowler-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.import-bowler-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.import-bowler-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-teal); }
.import-no-key-warning { padding: 12px 14px; background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.25); border-radius: var(--radius-sm); font-size: 13px; color: var(--accent-gold); line-height: 1.5; }
.import-loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 48px 24px; min-height: 60vh; text-align: center; }
.import-loading-logo { display: flex; align-items: center; justify-content: center; }
.import-loading-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-primary); }
.import-loading-sub { font-size: 13px; color: var(--text-secondary); min-height: 20px; }
.import-loading-bar { width: 200px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.import-loading-fill { height: 100%; background: linear-gradient(90deg, var(--accent-teal), #007A74); border-radius: 2px; width: 0; transition: width 0.4s ease; }
.import-confidence { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; align-self: flex-start; }
.import-confidence.high   { background: rgba(46,213,115,0.12); color: var(--accent-green); border: 1px solid rgba(46,213,115,0.3); }
.import-confidence.medium { background: rgba(245,166,35,0.1);  color: var(--accent-gold);  border: 1px solid rgba(245,166,35,0.3); }
.import-confidence.low    { background: rgba(255,71,87,0.08);  color: var(--accent-red);   border: 1px solid rgba(255,71,87,0.25); }
.import-uncertain { padding: 10px 14px; background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.25); border-radius: var(--radius-sm); font-size: 12px; color: var(--accent-gold); line-height: 1.5; }
.import-detected-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.import-meta-chip { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.import-review-photo-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.import-review-photo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.import-review-photo-title { font-size: 13px; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.import-review-photo-sub { margin-top: 2px; font-size: 11px; color: var(--text-secondary); line-height: 1.35; }
.import-review-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.import-review-photo-btn { min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.import-review-photo-btn:active { border-color: var(--accent-teal); color: var(--accent-teal); }
.import-review-photo-img { display: block; width: 100%; max-height: 280px; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border); }
@media (max-width: 430px) {
  .import-review-photo-head { flex-direction: column; }
  .import-review-photo-actions { width: 100%; justify-content: stretch; }
  .import-review-photo-btn { flex: 1; }
}
.import-bowler-cards { display: flex; flex-direction: column; gap: 12px; }
.import-bowler-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition); }
.import-bowler-card.matched   { border-color: rgba(0,212,200,0.35); }
.import-bowler-card.unmatched { border-color: rgba(245,166,35,0.35); }
.import-bowler-card-header { display: flex; align-items: center; gap: 10px; padding: 13px 14px 9px; border-bottom: 0; }
.import-bowler-card-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #000; flex-shrink: 0; }
.import-bowler-card-info { flex: 1; }
.import-bowler-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.import-bowler-card-match { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.import-bowler-card-score { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--accent-teal); line-height: 1; }
.import-bowler-card-score-btn { appearance: none; border: 0; background: transparent; padding: 4px 0 4px 8px; cursor: pointer; touch-action: manipulation; }
.import-bowler-card-score-btn:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 3px; border-radius: var(--radius-sm); }
#import-final-score-sheet {
  align-items: flex-start;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px 0;
}
#import-final-score-sheet .import-final-score-sheet {
  max-width: 420px;
  margin-top: clamp(10px, 8dvh, 70px);
  padding: 16px 18px 18px;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-raised);
  max-height: min(420px, calc(100dvh - 28px));
  overflow: visible;
}
.import-final-score-input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}
.import-final-score-input:focus {
  outline: none;
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-teal) 18%, transparent);
}
.import-final-score-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.import-final-score-actions .modal-cancel-btn,
.import-final-score-save {
  min-height: 48px;
}
.import-final-score-save {
  width: 100%;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent-teal) 55%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-teal) 88%, var(--brand-blue));
  color: #041012;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.import-final-score-save:active {
  transform: scale(0.99);
}
.import-mini-scorecard { padding: 0 14px 15px; overflow: visible; }
.import-mini-scorecard::-webkit-scrollbar { display: none; }
.import-mini-frames { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 4px; width: 100%; }
.import-mini-frame-wrap { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.import-mini-frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0; min-height: 45px; padding: 6px 2px 5px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--text-soft) 22%, transparent); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; touch-action: manipulation; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.import-mini-frame:active { transform: scale(0.98); background: var(--bg-input); }
.import-mini-frame.strike { background: color-mix(in srgb, var(--brand-teal) 8%, var(--surface-card)); border-color: var(--brand-teal); }
.import-mini-frame.spare { background: color-mix(in srgb, var(--score-spare) 10%, var(--surface-card)); border-color: var(--score-spare); }
.import-mini-frame.open { background: var(--surface-card); border-color: color-mix(in srgb, var(--text-soft) 34%, transparent); border-style: dashed; }
.import-mini-frame.uncertain,
.import-mini-frame.ocr-needs-review { background: color-mix(in srgb, var(--accent-red) 6%, var(--surface-card)); border-color: var(--accent-red); border-style: dashed; outline: 1px dotted color-mix(in srgb, var(--accent-red) 52%, transparent); outline-offset: 1px; }
.import-mini-review-dot { position: absolute; top: -7px; right: -5px; z-index: 2; width: 15px; height: 15px; min-width: 15px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-red); border: 1px solid color-mix(in srgb, #fff 36%, var(--accent-red)); color: #fff; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; touch-action: manipulation; }
.import-mini-frame.frame-10 { min-width: 0; }
.import-mini-frame-num { height: 10px; font-size: 8px; color: var(--text-secondary); font-weight: 700; line-height: 10px; text-align: center; }
.import-mini-frame-balls { display: flex; gap: 1px; min-height: 17px; align-items: center; justify-content: center; }
.import-mini-ball { min-width: 8px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--text-secondary); line-height: 1; font-variant-numeric: tabular-nums; }
.import-mini-ball.strike { color: var(--score-strike-symbol); }
.import-mini-ball.spare  { color: var(--score-spare); }
.import-mini-ball.miss   { color: var(--score-open); }
.import-mini-ball.split { color: var(--text-hi); text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.import-mini-frame-score { font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--text-primary); min-height: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.import-warning-popover { position: fixed; z-index: 10050; width: min(220px, calc(100vw - 20px)); padding: 10px 11px; border-radius: 8px; background: color-mix(in srgb, var(--surface-card) 94%, #000); border: 1px solid color-mix(in srgb, var(--accent-red) 44%, var(--border)); box-shadow: 0 10px 28px rgba(0,0,0,0.38); color: var(--text-primary); font-size: 12px; line-height: 1.3; }
.import-warning-popover-title { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-weight: 800; }
.import-warning-popover-title span { width: 15px; height: 15px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-red); color: #fff; font-size: 10px; line-height: 1; }
.import-warning-popover-body { color: var(--text-primary); }
.import-warning-popover-hint { margin-top: 5px; color: var(--text-secondary); }
.import-unmatched-card { background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.25); border-radius: var(--radius-md); padding: 14px; }

/* ── SESSION DETAILS BAR ─────────────────────────────── */
.import-session-details { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; display:flex; flex-direction:column; gap:10px; }
.import-session-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-secondary); }
.import-session-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.import-session-field { display:flex; flex-direction:column; gap:4px; }
.import-session-field.full { grid-column:1/-1; }
.import-session-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-secondary); }
.import-session-input { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; font-family:var(--font-body); color:var(--text-primary); outline:none; width:100%; -webkit-user-select:text; user-select:text; }
.import-session-input:focus { border-color:var(--accent-teal); }
.import-session-select { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; font-family:var(--font-body); color:var(--text-primary); outline:none; width:100%; -webkit-appearance:none; appearance:none; }
/* ── RESUME PROMPT ───────────────────────────────────── */
.import-resume-card { background:rgba(0,212,200,0.06); border:1px solid rgba(0,212,200,0.25); border-radius:var(--radius-md); padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.import-resume-title { font-size:15px; font-weight:700; color:var(--text-primary); line-height:1.3; display:flex; align-items:center; gap:8px; }
.import-resume-sub { font-size:12px; color:var(--text-secondary); line-height:1.45; margin-top:0; }
.import-resume-btns { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.import-unmatched-title { font-size: 13px; font-weight: 700; color: var(--accent-gold); margin-bottom: 10px; }
.import-assign-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.import-assign-row:last-child { border-bottom: none; padding-bottom: 0; }
.import-assign-ocr { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; }
.import-assign-btn { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; touch-action: manipulation; display: flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.import-assign-btn.matched { border-color: rgba(0,212,200,0.4); color: var(--accent-teal); background: rgba(0,212,200,0.06); }
.import-assign-btn.unmatched { border-color: rgba(245,166,35,0.4); color: var(--accent-gold); background: rgba(245,166,35,0.06); }
.import-assign-picker-btn { width: 100%; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 15px; font-weight: 600; cursor: pointer; touch-action: manipulation; display: flex; align-items: center; justify-content: space-between; text-align: left; transition: background var(--transition), border-color var(--transition); }
.import-assign-picker-btn:active { background: var(--bg-card); }
.import-assign-picker-btn.active { border-color: var(--accent-teal); background: rgba(0,212,200,0.08); color: var(--accent-teal); }
.import-assign-picker-btn.create { border-color: rgba(0,212,200,0.3); color: var(--accent-teal); background: rgba(0,212,200,0.05); margin-top: 4px; }
.import-assign-picker-name { flex: 1; }
.import-assign-picker-check { color: var(--accent-teal); font-weight: 800; }
.import-match-select { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12px; font-family: var(--font-body); color: var(--text-primary); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; min-width: 140px; }
.import-retry-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: none; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: all var(--transition); }
.import-retry-btn:active { background: var(--bg-input); }
.import-json-error {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,71,87,0.08);
  border: 1px solid rgba(255,71,87,0.25);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--accent-red);
}
.import-preview-card {
  background: rgba(0,212,200,0.06);
  border: 1px solid rgba(0,212,200,0.2);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.import-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.import-preview-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.import-backup-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.import-backup-cancel {
  text-align: center;
  padding: 12px;
}

/* ─── DEBUG PANEL ─────────────────────────────────────────────── */
  background: rgba(255,71,87,0.06);
  border: 1px solid rgba(255,71,87,0.2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 8px 16px;
}

.debug-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.debug-section-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--accent-teal); margin-top: 4px;
}
.debug-section-label--spaced { margin-top: 8px; }
.debug-stat {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 3px 0;
  display: flex;
  justify-content: space-between;
}

.debug-stat span { color: var(--text-primary); font-weight: 600; }
.debug-stat--build {
  color: var(--accent-teal);
  font-weight: 700;
}
.debug-firebase-uid { font-size: 10px; }
.debug-ach-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.debug-ach-mode-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.debug-ach-mode-sub {
  font-size: 11px;
  color: var(--text-secondary);
}
.debug-ach-toggle {
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(46,213,115,0.15);
  border: 1px solid rgba(46,213,115,0.4);
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.debug-test-result { margin-top: 4px; }

.debug-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.debug-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
}

.debug-btn.danger {
  color: var(--accent-red);
  border-color: rgba(255,71,87,0.3);
}

.debug-btn:active { opacity: 0.7; }


/* ─── SHARED SWIPE ACTIONS ───────────────────────────────────── */
.swipe-card {
  position: relative;
  overflow: hidden;
}

.swipe-card-actions {
  position: absolute;
  inset: 1px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  border-radius: calc(var(--radius-md) - 1px);
  overflow: hidden;
}

.swipe-card-action {
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: auto;
  border: none;
  opacity: 0.92;
}

.swipe-card-action.edit {
  background: linear-gradient(90deg, rgba(27,108,168,0.68), rgba(27,108,168,0.96));
  border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px);
}
.swipe-card-action.delete {
  background: linear-gradient(270deg, rgba(255,71,87,0.96), rgba(255,71,87,0.68));
  border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
}

.swipe-card-action svg { flex-shrink: 0; }

.game-card.swipe-card,
.history-game-card.swipe-card,
.profile-card.swipe-card,
.team-card.swipe-card,
.session-card.swipe-card {
  padding: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.game-card.swipe-card .game-card-inner,
.history-game-card.swipe-card .history-card-inner,
.profile-card.swipe-card .profile-card-inner,
.team-card.swipe-card .team-card-inner {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.game-card-inner,
.history-card-inner,
.profile-card-inner,
.team-card-inner {
  display: block;
  padding: var(--card-shell-pad-y) var(--card-shell-pad-x);
  margin: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  width: 100%;
}

.profile-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.team-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-card.swipe-card:active .game-card-inner,
.history-game-card.swipe-card:active .history-card-inner,
.profile-card.swipe-card:active .profile-card-inner,
.team-card.swipe-card:active .team-card-inner { background: var(--bg-input); }

/* ─── GAME EDITOR SHEET ──────────────────────────────────────── */
.game-editor-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 0;
}

.game-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-editor-section {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.game-editor-toggle {
  width: 100%;
  border: none;
  background: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.game-editor-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.game-editor-meta-grid .full { grid-column: 1 / -1; }


/* ─── FRAME RE-ENTRY EDITOR ─────────────────────────────────── */
.frame-reentry-sheet {
  width: 100%;
  max-width: 430px;
  height: min(92dvh, 820px);
  max-height: min(92dvh, 820px);
  padding: 14px var(--screen-pad) calc(var(--safe-bottom) + 16px);
  gap: 12px !important;
  overflow: hidden;
}

#game-frame-editor-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 2px;
}
#game-frame-editor-body::-webkit-scrollbar { display: none; }

.frame-reentry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.frame-reentry-header .modal-title {
  margin: 0;
}

.frame-reentry-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  min-height: 92px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.frame-reentry-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.frame-reentry-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}

.frame-reentry-total {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-teal);
  line-height: 1;
}

.frame-reentry-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-height: 82px;
}

.frame-reentry-ball-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 78px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition);
}

.frame-reentry-ball-card.active {
  border-color: var(--accent-teal);
  background: rgba(0,212,200,0.08);
}

.frame-reentry-ball-card.disabled {
  opacity: 0.45;
  cursor: default;
}

.frame-reentry-ball-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.frame-reentry-ball-value {
  font-family: var(--font-display);
  --frame-reentry-ball-value-size: 22px;
  font-size: var(--frame-reentry-ball-value-size);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.frame-reentry-ball-card.active .frame-reentry-ball-value {
  color: var(--accent-teal);
}

.frame-reentry-ball-value.is-strike {
  color: var(--score-strike-symbol);
}

.frame-reentry-ball-value.is-spare {
  color: var(--score-spare);
}

.frame-reentry-ball-value.is-gutter {
  color: var(--danger);
}

.frame-reentry-ball-value.is-miss {
  color: var(--text-muted);
}

.frame-reentry-ball-card.active .frame-reentry-ball-value.is-strike,
.frame-reentry-ball-card.active .frame-reentry-ball-value.is-spare,
.frame-reentry-ball-card.active .frame-reentry-ball-value.is-gutter,
.frame-reentry-ball-card.active .frame-reentry-ball-value.is-miss,
.frame-reentry-ball-card.active .frame-reentry-ball-value.is-split-mark {
  color: inherit;
}

.frame-reentry-ball-card.active .frame-reentry-ball-value.is-strike {
  color: var(--score-strike-symbol);
}

.frame-reentry-ball-card.active .frame-reentry-ball-value.is-spare {
  color: var(--score-spare);
}

.frame-reentry-ball-card.active .frame-reentry-ball-value.is-gutter {
  color: var(--danger);
}

.frame-reentry-ball-card.active .frame-reentry-ball-value.is-miss {
  color: var(--text-muted);
}

.frame-reentry-ball-card.active .frame-reentry-ball-value.is-split-mark {
  color: var(--text-hi);
}

.frame-reentry-ball-value.is-split-mark {
  color: var(--text-hi);
  font-size: var(--frame-reentry-ball-value-size);
  font-weight: 800;
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.frame-reentry-note {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  min-height: 0;
}

.frame-reentry-note strong { color: var(--text-primary); }

.frame-reentry-mode {
  display: flex;
  gap: 0;
  min-height: 36px;
  flex-shrink: 0;
}

.frame-reentry-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 58px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.frame-reentry-mode-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.frame-reentry-mode-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.frame-reentry-mode-btn.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

.frame-reentry-pin-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 2px;
}

.frame-reentry-pin-status {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 16px;
}

.frame-reentry-pin-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.frame-reentry-pin-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-reentry-pin-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.frame-reentry-pin-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 18px 0;
}

.frame-reentry-pin-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.frame-reentry-pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.frame-reentry-pin.standing {
  background: var(--bg-card);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.frame-reentry-pin.knocked {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
  transform: scale(0.9);
}

.frame-reentry-pin.down {
  background: var(--bg-primary);
  border-style: dashed;
  color: var(--border);
  opacity: 0.4;
  cursor: default;
}

.frame-reentry-shortcuts {
  display: flex;
  gap: 8px;
}

.frame-reentry-shortcut {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.frame-reentry-shortcut.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000;
  flex: 1.4;
}

.frame-reentry-score-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.frame-reentry-score-btn {
  min-height: 52px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.frame-reentry-score-btn.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.frame-reentry-score-btn.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

.frame-reentry-shortcut.disabled,
.frame-reentry-secondary.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.frame-reentry-actions {
  display: flex;
  gap: 8px;
}

.frame-reentry-secondary {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.frame-reentry-confirm {
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.frame-reentry-bottom-row {
  display: flex;
  gap: 10px;
}

.frame-reentry-bottom-row .modal-cancel-btn,
.frame-reentry-bottom-row .frame-reentry-secondary {
  flex: 1;
  margin: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-reentry-mark-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 52px;
}

.frame-reentry-mark-row.has-split {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.frame-reentry-mark-btn {
  min-height: 52px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.35px;
  cursor: pointer;
  touch-action: manipulation;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition), transform 0.1s;
}

.frame-reentry-mark-btn:active { opacity: 0.85; transform: scale(0.98); }
.frame-reentry-mark-btn.strike {
  background: color-mix(in srgb, var(--score-strike) 12%, var(--bg-input));
  border: 1px solid color-mix(in srgb, var(--score-strike) 48%, var(--border));
  color: var(--score-strike);
}
.frame-reentry-mark-btn.spare  {
  background: color-mix(in srgb, var(--score-spare) 14%, var(--bg-input));
  border: 1px solid color-mix(in srgb, var(--score-spare) 52%, var(--border));
  color: var(--score-spare);
}
.frame-reentry-mark-btn.gutter {
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-input));
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--border));
  color: var(--danger);
}
.frame-reentry-mark-btn.miss { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); }
.frame-reentry-mark-btn.active {
  background: color-mix(in srgb, var(--accent-teal) 12%, var(--bg-input));
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}
.frame-reentry-mark-btn.split-toggle {
  background: var(--bg-input);
  border: 1px solid rgba(245,166,35,0.3);
  color: var(--text-secondary);
  gap: 6px;
}
.frame-reentry-mark-btn.split-toggle.active {
  background: rgba(245,166,35,0.14);
  border-color: rgba(245,166,35,0.58);
  color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,0.18);
}

.frame-reentry-shot-context {
  display: contents;
}

.game-editor-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.game-editor-total strong {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--accent-teal);
  line-height: 1;
}

.game-editor-help {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 10px;
  line-height: 1.4;
}

/* ─── RESPONSIVE — DESKTOP & TABLET ─────────────────────────── */
@media (min-width: 431px) {
  #app, #bottom-nav {
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }

  body.theme-light #app,
  body.theme-light #bottom-nav {
    box-shadow: none;
  }
}

/* ─── LANDSCAPE PHONE ────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-height: 48px;
    --nav-height:    56px;
  }

  /* Scoring screen: side-by-side layout in landscape */
  #screen-scoring.active {
    flex-direction: column; /* keep stacked but compress */
  }

  .scoring-header {
    padding: 4px 8px;
  }

  .scoring-bowler-name { font-size: 16px; }
  .scoring-total { font-size: 22px; }

  .player-bar-item { padding: 4px 8px; }
  .player-bar-score { font-size: 18px; }

  .frame-bar-wrap { padding: 3px 8px; }
  .frame-cell { padding: 2px; }

  .pin { width: 40px; height: 40px; font-size: 12px; }
  .pin-row { gap: 6px; }
  .pin-diagram { padding: 4px 16px; gap: 4px; }

  .scoring-mode-toggle { padding: 3px 12px 2px; }
  .shot-type-row { padding: 3px 12px 2px; }
  .scoring-shortcuts { padding: 3px 12px 2px; }

  .btn-confirm { padding: 11px; font-size: 14px; }
  .scoring-confirm-area { padding: 6px 12px; padding-bottom: calc(var(--nav-height) + 4px); }
}

/* ─── TABLET & DESKTOP ───────────────────────────────────────── */
@media (min-width: 768px) {
  #app {
    max-width: 480px;
  }

  #bottom-nav {
    max-width: 480px;
  }

  /* Two-column scoring layout on tablet */
  #screen-scoring.active {
    flex-direction: column;
  }

  .pin { width: 56px; height: 56px; font-size: 16px; }
  .pin-row { gap: 12px; }

  .frame-cell { min-width: 40px; }
  .frame-cell.frame-10 { min-width: 60px; }
  .frame-ball { width: 20px; height: 20px; font-size: 10px; }
  .frame-score { font-size: 15px; }
  .frame-num { font-size: 10px; }

  .stat-cards { grid-template-columns: 1fr 1fr 1fr; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
}

/* ─── V20 PATCHES ───────────────────────────────────────────── */
.game-editor-meta-grid > div { min-width: 0; }
.game-editor-meta-grid .modal-input,
.game-editor-meta-grid select,
.game-editor-meta-grid textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.game-editor-meta-grid textarea.modal-input { min-height: 96px; }
.game-editor-meta-grid .modal-label { display:block; margin-bottom:6px; }


.ge-field-wrap {
  position: relative;
}

.ge-field-wrap .modal-input,
.ge-field-wrap select.modal-input {
  width: 100%;
  padding-right: 42px;
}

.picker-display-input {
  pointer-events: none;
  text-align: left;
}

.native-picker-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.ge-field-wrap .native-picker-overlay {
  padding-right: 42px;
}

.ge-field-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-editor-meta-grid input[type="date"],
.game-editor-meta-grid input[type="time"],
.game-editor-meta-grid select.modal-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
}

.game-editor-meta-grid input[type="date"]::-webkit-calendar-picker-indicator,
.game-editor-meta-grid input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.game-editor-meta-grid input[type="date"]::-webkit-date-and-time-value,
.game-editor-meta-grid input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}

.game-editor-meta-grid input[type="date"]::-webkit-datetime-edit,
.game-editor-meta-grid input[type="time"]::-webkit-datetime-edit {
  padding: 0;
  color: var(--text-primary);
}
.game-editor-section .setup-select-wrap select {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  padding-right: 40px;
}

/* ── Avatar editor — tab-based redesign ──────────────────────── */
.avatar-editor-preview-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0 4px;
}
.avatar-editor-preview {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  color: #000; font-size: 34px; font-weight: 800; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.10);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}
.avatar-editor-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  max-width: none;
  max-height: none;
  position: static;
}
.avatar-editor-preview-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
/* Mode tabs */
.avatar-mode-tabs {
  display: flex; gap: 6px; padding: 2px 0;
}
.avatar-mode-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.avatar-mode-tab.active {
  background: rgba(0,212,200,0.1); border-color: var(--accent-teal);
}
.avtab-icon { font-size: 18px; line-height: 1; }
.avtab-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.avatar-mode-tab.active .avtab-label { color: var(--accent-teal); }
/* Tab panels */
.avatar-tab-panel { display: flex; flex-direction: column; gap: 10px; min-height: 48px; }
.avatar-tab-hint { font-size: 12px; color: var(--text-secondary); padding: 4px 2px; line-height: 1.5; }
/* Icon tab */
.avatar-icon-browse-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.avatar-icon-browse-btn:active { border-color: var(--accent-teal); }
.avatar-selected-icon-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: rgba(0,212,200,0.06);
  border: 1px solid rgba(0,212,200,0.2); border-radius: var(--radius-sm);
}
.avatar-selected-icon-chip {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-input); display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.avatar-selected-icon-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.avatar-clear-icon-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-secondary); font-size: 12px;
  cursor: pointer; touch-action: manipulation; display: flex; align-items: center; justify-content: center;
}
/* Photo tab */
.avatar-photo-actions { display: flex; gap: 8px; }
.avatar-photo-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
}
.avatar-photo-btn:active { border-color: var(--accent-teal); color: var(--accent-teal); }
.avatar-clear-photo-btn {
  width: 100%; padding: 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid rgba(255,71,87,0.25);
  color: var(--accent-red); font-size: 13px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
}
/* Background colour section */
.avatar-bg-section {
  padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 4px;
}
.avatar-bg-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 8px;
}
.avatar-color-single-row {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.avatar-color-single-row::-webkit-scrollbar { display: none; }
.avatar-color-swatches {
  display: flex; gap: 6px; flex-shrink: 0;
}
.avatar-swatch-custom {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 2px dashed var(--border); background: var(--bg-input);
  color: var(--text-secondary); font-size: 16px; font-weight: 300;
  cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: border-color var(--transition);
}
.avatar-swatch-custom:active { border-color: var(--accent-teal); }
.avatar-swatch-custom.selected {
  border-color: #fff; box-shadow: 0 0 0 2px rgba(0,212,200,0.35);
}
/* Icon sheet */
.avatar-icon-sheet-inner {
  max-height: 88dvh !important; padding-bottom: calc(var(--safe-bottom) + 16px) !important;
}
.icon-category-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px;
  scrollbar-width: none;
}
.icon-category-tabs::-webkit-scrollbar { display: none; }
.icon-cat-tab {
  flex-shrink: 0; padding: 7px 12px; border-radius: 20px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all var(--transition);
  white-space: nowrap;
}
.icon-cat-tab.active {
  background: var(--accent-teal); border-color: var(--accent-teal); color: #000;
}
.icon-picker-grid-wrap {
  flex: 1; overflow-y: auto; min-height: 200px;
}
.icon-picker-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  padding: 4px 0;
}
.icon-picker-btn {
  aspect-ratio: 1; border-radius: 12px; background: var(--bg-input);
  border: 2px solid transparent; display: flex; align-items: center;
  justify-content: center; font-size: 24px; cursor: pointer;
  touch-action: manipulation; transition: all var(--transition);
}
.icon-picker-btn:active { transform: scale(0.9); }
.icon-picker-btn.selected {
  border-color: var(--accent-teal);
  background: rgba(0,212,200,0.1);
  box-shadow: 0 0 0 1px rgba(0,212,200,0.2);
}
/* Crop improvements */
.avatar-crop-controls-row {
  display: flex; justify-content: center; gap: 12px;
}
.avatar-crop-rotate-btn {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.avatar-crop-rotate-btn:active { border-color: var(--accent-teal); color: var(--accent-teal); }

/* Keep old classes working */
.avatar-preview-row { display:flex; align-items:center; gap:14px; margin-bottom:2px; }
.avatar-preview {
  width:96px; height:96px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display:flex; align-items:center; justify-content:center;
  color:#000; font-size:34px; font-weight:800; overflow:hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.avatar-preview img,
.player-avatar img,
.profile-card-avatar img,
.profile-detail-avatar img,
.modal-list-avatar img,
.setup-bowler-avatar img {
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
}

.avatar-preview,
.player-avatar,
.profile-card-avatar,
.profile-detail-avatar,
.modal-list-avatar,
.setup-bowler-avatar,
.session-avatar-chip,
.import-bowler-card-avatar {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-preview > img,
.player-avatar > img,
.profile-card-avatar > img,
.profile-detail-avatar > img,
.modal-list-avatar > img,
.setup-bowler-avatar > img,
.session-avatar-chip > img,
.import-bowler-card-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: inherit;
  position: static;
}
.avatar-preview-text { flex:1; min-width:0; }
.avatar-preview-title { font-size:14px; font-weight:700; color:var(--text-primary); }
.avatar-preview-sub { font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.4; }
.avatar-action-row { display:flex; gap:8px; flex-wrap:wrap; }
.avatar-action-btn {
  flex:1; min-width:120px; padding:10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-input); border:1px solid var(--border); color:var(--text-secondary);
  font-size:13px; font-weight:600; cursor:pointer; touch-action:manipulation;
}
.avatar-action-btn:active { opacity:0.75; }
.avatar-action-btn.primary { color: var(--accent-teal); border-color: rgba(0,212,200,0.3); }
.avatar-action-btn.warn { color: var(--accent-gold); border-color: rgba(245,166,35,0.28); }

.avatar-icon-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.avatar-icon-btn {
  aspect-ratio:1; border-radius:18px; background:var(--bg-input); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:30px; cursor:pointer;
}
.avatar-icon-btn:active { transform:scale(0.96); }
.avatar-icon-btn.selected { border-color: var(--accent-teal); box-shadow: 0 0 0 1px rgba(0,212,200,0.3) inset; }

.avatar-crop-modal .modal-sheet { max-width: 430px; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.avatar-crop-wrap {
  flex:1; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center;
}
.avatar-crop-stage {
  position:relative; width:280px; height:280px; border-radius:50%; overflow:hidden;
  background:#07070c; border:2px solid rgba(0,212,200,0.45); touch-action:none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
}
.avatar-crop-image {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  user-select:none; -webkit-user-drag:none; touch-action:none;
}
.avatar-crop-slider { width:100%; accent-color: var(--accent-teal); }
.avatar-crop-meta { text-align:center; font-size:12px; color:var(--text-secondary); }

.frame-reentry-ball-card.previewing { border-color: rgba(0,212,200,0.5); background: rgba(0,212,200,0.06); }
.frame-reentry-livehint {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  min-height: 16px;
}
.frame-reentry-selection-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.frame-reentry-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.frame-reentry-action-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.frame-reentry-score-btn.preview { border-color: var(--accent-teal); }
.frame-reentry-pin-entry-toggle {
  margin: 0 auto;
}

.frame-reentry-meta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.frame-reentry-shot-details {
  align-self: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  padding: 2px 0 0;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.82;
  transition: color var(--transition), opacity var(--transition);
  text-align: center;
}

.frame-reentry-shot-details:hover,
.frame-reentry-shot-details:focus-visible {
  color: var(--text-primary);
  opacity: 1;
  outline: none;
}



.avatar-color-row { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.avatar-color-label { font-size:12px; color:var(--text-secondary); font-weight:600; min-width:92px; }
.avatar-color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.avatar-color-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: pointer; touch-action: manipulation; flex-shrink: 0;
}
.avatar-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,212,200,0.35); }
.avatar-color-swatch.swatch-gradient {
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 6px rgba(0,212,200,0.2);
}
.avatar-color-swatch.swatch-gradient.selected {
  border-color: #fff; box-shadow: 0 0 0 2px rgba(0,212,200,0.5);
}
.avatar-color-input {
  width:40px; height:32px; padding:0; border:none; background:none; cursor:pointer;
}
.avatar-icon-btn { position:relative; overflow:hidden; }
.avatar-icon-btn .avatar-icon-chip {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  border-radius:16px; color:#000;
}
.avatar-crop-controls { width:100%; display:flex; align-items:center; gap:10px; }
.avatar-crop-zoom-label { font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; }
.avatar-crop-stepper {
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-input); color:var(--text-primary); font-size:20px; font-weight:700; cursor:pointer;
}
.avatar-crop-stage::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  pointer-events:none;
}

.avatar-crop-wrap { width:100%; gap:16px; }
.avatar-crop-shell {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.avatar-crop-stage-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding:8px 0 2px;
}
.avatar-crop-stage{
  position:relative;
  width:min(84vw, 320px);
  height:min(84vw, 320px);
  max-width:320px;
  max-height:320px;
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%),
    #07070c;
  background-size:20px 20px;
  background-position:0 0, 10px 10px;
  touch-action:none;
  user-select:none;
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}
.avatar-crop-stage::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  pointer-events:none;
  z-index:2;
}
.avatar-crop-stage::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:74%;
  height:74%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.42),
    inset 0 0 0 2px rgba(0,212,200,0.9),
    0 0 0 6px rgba(255,255,255,0.08);
  pointer-events:none;
  z-index:3;
}
.avatar-crop-image{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
  z-index:1;
}
.avatar-crop-toolbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.avatar-crop-stepper,
.avatar-crop-action{
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text-primary);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  touch-action:manipulation;
}
.avatar-crop-action{
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.45px;
}
.avatar-crop-stepper:active,
.avatar-crop-action:active{ transform:scale(0.97); opacity:.86; }
.avatar-crop-slider{ display:none; }
.avatar-crop-meta{
  text-align:center;
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.45;
  max-width:320px;
}
.avatar-crop-preview-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding-top:2px;
}
.avatar-crop-preview-shell{
  width:74px;
  height:74px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  background:var(--bg-input);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.22);
  flex-shrink:0;
}
.avatar-crop-preview-shell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.avatar-crop-preview-copy{
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.45;
  max-width:180px;
}

/* Home tuning and scorecard split lock */
.scorecard-frame-ball.is-split-mark,
.frame-ball.split,
.game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  color: #fff;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

#screen-home .stat-card.secondary {
  background: color-mix(in srgb, var(--surface-card) 72%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  padding-block: var(--space-3);
}

#screen-home .stat-card.secondary .stat-card-value {
  font-size: 22px;
  color: var(--text-body);
}

#screen-home .stat-card.secondary .stat-card-label {
  color: var(--text-muted);
}

/* Settings final scoped overrides */
#screen-settings .settings-list {
  padding-top: var(--space-6);
  gap: var(--space-5);
}

#screen-settings .settings-row-icon {
  background: color-mix(in srgb, var(--surface-raised) 80%, var(--surface-card));
  color: var(--text-muted);
}

#screen-settings .settings-row-icon.teal {
  background: color-mix(in srgb, var(--brand-teal) 12%, var(--surface-card));
  color: var(--brand-teal);
}

#screen-settings .settings-row-icon.blue {
  background: color-mix(in srgb, var(--accent-brand) 12%, var(--surface-card));
  color: var(--accent-brand);
}

#screen-settings .settings-row-icon.gold {
  background: color-mix(in srgb, var(--score-spare) 13%, var(--surface-card));
  color: var(--score-spare);
}

#screen-settings .settings-row-icon.green {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-card));
  color: var(--success);
}

#screen-settings .settings-row-icon.red {
  background: color-mix(in srgb, var(--danger) 11%, var(--surface-card));
  color: var(--danger);
}

#screen-settings .settings-row.danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-card));
}

/* Settings spec correction: structured Material list */
#screen-settings .settings-list {
  padding-top: var(--space-6);
  gap: var(--space-5);
}

#screen-settings .settings-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border);
}

#screen-settings .settings-build-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 56%, var(--border));
  background: color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 9%, var(--surface-card));
  color: var(--brand-teal, var(--accent-teal));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

#screen-settings .settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#screen-settings .settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 24px;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}

#screen-settings .settings-section > .settings-group-title,
#screen-settings .settings-group-title {
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: var(--space-2) 0 var(--space-1);
  border-bottom: 1px solid var(--border);
}

#screen-settings .settings-section-head .settings-group-title {
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

#screen-settings .settings-section-note {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0;
}

#screen-settings .settings-row,
#screen-settings .settings-card-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--surface-raised));
  box-shadow: none;
}

#screen-settings .settings-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#screen-settings .settings-row:active,
#screen-settings .settings-card-header:active {
  background: color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 8%, var(--surface-card));
  transform: translateY(1px);
}

#screen-settings .settings-row-title {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}

#screen-settings .settings-row-sub {
  margin-top: 3px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0;
}

#screen-settings .settings-row-value {
  min-height: var(--space-11);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

#screen-settings .settings-row-value.accent {
  color: var(--brand-teal, var(--accent-teal));
}

#screen-settings .settings-row.danger,
#screen-settings #settings-leave-group-row {
  border-color: color-mix(in srgb, var(--danger) 44%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-card));
}

#screen-settings #settings-reset-achievements-row {
  border-color: color-mix(in srgb, var(--score-spare, var(--accent-gold)) 50%, var(--border));
  background: color-mix(in srgb, var(--score-spare, var(--accent-gold)) 6%, var(--surface-card));
}

#screen-settings #settings-advanced-debug-actions {
  gap: var(--space-1);
}

#screen-settings #settings-group-tools-list {
  gap: var(--space-1) !important;
}

#screen-settings #theme-toggle-display {
  position: relative;
  min-width: 78px;
  width: 78px;
  min-height: var(--space-11);
  height: var(--space-11);
  justify-content: flex-end;
  padding: 0 var(--space-3) 0 34px;
  border: 1px solid color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 38%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 13%, var(--surface-card));
  color: var(--text-secondary);
  overflow: hidden;
}

#screen-settings #theme-toggle-display::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-teal, var(--accent-teal));
  transform: translateY(-50%);
  transition: transform var(--motion-fast), background var(--motion-fast);
}

body.theme-light #screen-settings #theme-toggle-display {
  justify-content: flex-start;
  padding: 0 34px 0 var(--space-3);
}

body.theme-light #screen-settings #theme-toggle-display::before {
  transform: translate(44px, -50%);
}

#screen-settings #theme-toggle-display span {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
}

#screen-settings .debug-panel button {
  min-width: var(--space-11);
  min-height: var(--space-11);
}

#screen-settings .toggle-switch,
#screen-settings .debug-panel .toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 54px;
  min-width: 54px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-raised) 86%, var(--surface-card));
  box-shadow: none;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

#screen-settings .toggle-switch::after,
#screen-settings .debug-panel .toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: none;
  transform: none;
  transition: transform var(--motion-fast), background var(--motion-fast);
}

#screen-settings .toggle-switch.on,
#screen-settings .debug-panel .toggle-switch.on {
  border-color: var(--brand-teal, var(--accent-teal));
  background: color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 24%, var(--surface-card));
}

#screen-settings .toggle-switch.on::after,
#screen-settings .debug-panel .toggle-switch.on::after {
  background: var(--brand-teal, var(--accent-teal));
  transform: translateX(22px);
}

#screen-settings .debug-panel {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--brand-teal, var(--accent-teal)) 38%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--surface-base));
  box-shadow: none;
}

#screen-settings .debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 0 var(--space-3);
  margin: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}

#screen-settings .debug-panel-close,
#screen-settings .debug-btn {
  min-height: var(--space-11);
  border-radius: var(--radius-sm);
}

#screen-settings .debug-section-label {
  margin: var(--space-4) 0 var(--space-2) !important;
  color: var(--brand-teal, var(--accent-teal));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

#screen-settings .debug-stat {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--text-secondary);
}

#screen-settings .debug-stat span {
  min-width: 0;
  max-width: 58%;
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

#screen-settings .debug-actions {
  gap: var(--space-2);
}

#screen-settings .apikey-panel {
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

@media (max-width: 420px) {
  #screen-settings .settings-hero {
    align-items: flex-start;
  }

  #screen-settings .settings-build-chip {
    margin-top: var(--space-1);
  }

  #screen-settings .settings-row,
  #screen-settings .settings-card-header {
    padding-inline: var(--space-3);
  }
}

/* Settings visual consistency pass */
#screen-settings .settings-section {
  gap: var(--space-3);
}

#screen-settings .settings-section-head {
  padding-bottom: 0;
  border-bottom: 0;
}

#screen-settings .settings-section > .settings-group-title,
#screen-settings .settings-group-title {
  padding: 0;
  border-bottom: 0;
}

#screen-settings .settings-row,
#screen-settings .settings-card-header {
  min-height: 68px;
}

#screen-settings #settings-app-section {
  gap: var(--space-1);
}

#screen-settings #settings-app-section .settings-row {
  min-height: 56px;
  padding: var(--space-2) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#screen-settings #settings-app-section .settings-row + .settings-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

#screen-settings #settings-app-section .settings-row:active {
  background: color-mix(in srgb, var(--surface-raised) 34%, transparent);
  transform: none;
}

#screen-settings #settings-app-section .settings-row-icon {
  width: 32px;
  height: 32px;
}

#screen-settings #theme-toggle-display {
  min-width: 76px;
  width: 76px;
  min-height: var(--space-11);
  height: var(--space-11);
  padding: 0 10px 0 36px;
  border-radius: var(--radius-sm);
  border-color: color-mix(in srgb, var(--accent-teal) 44%, var(--border));
  background: color-mix(in srgb, var(--accent-teal) 13%, var(--surface-raised));
}

#screen-settings #theme-toggle-display::before {
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-teal);
}

body.theme-light #screen-settings #theme-toggle-display {
  padding: 0 36px 0 10px;
}

body.theme-light #screen-settings #theme-toggle-display::before {
  transform: translate(38px, -50%);
}

#screen-settings .toggle-switch,
#screen-settings .debug-panel .toggle-switch {
  width: 48px;
  min-width: 48px;
  height: 28px;
  min-height: 28px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: var(--surface-raised);
}

#screen-settings .toggle-switch::after,
#screen-settings .debug-panel .toggle-switch::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--text-muted);
}

#screen-settings .toggle-switch.on,
#screen-settings .debug-panel .toggle-switch.on {
  border-color: var(--accent-teal);
  background: color-mix(in srgb, var(--accent-teal) 18%, var(--surface-raised));
}

#screen-settings .toggle-switch.on::after,
#screen-settings .debug-panel .toggle-switch.on::after {
  background: var(--accent-teal);
  transform: translateX(20px);
}

#screen-settings .debug-toggle-row {
  min-height: var(--space-11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 0 !important;
}

#screen-settings .debug-toggle-row + .debug-toggle-row {
  margin-top: var(--space-2);
}

#screen-settings .debug-toggle-row button {
  min-width: var(--space-11);
  min-height: var(--space-11);
  padding: 0;
  justify-content: center !important;
}

#screen-settings .debug-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#screen-settings .debug-panel-header {
  margin-bottom: var(--space-1);
}

#screen-settings .debug-section-label {
  margin: var(--space-3) 0 var(--space-1) !important;
}

#screen-settings .debug-section-label + div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#screen-settings .debug-section-label + div .debug-actions {
  gap: var(--space-2);
}

#screen-settings .debug-section-label + div .debug-btn {
  border: 1px solid var(--border);
  background: var(--surface-raised);
}

/* Settings consistency correction: flat controls, spaced action cards */
#screen-settings .settings-list {
  gap: var(--space-5);
}

#screen-settings .settings-section {
  gap: var(--space-3);
}

#screen-settings .settings-section-head {
  min-height: auto;
  padding: 0;
  border-bottom: 0;
}

#screen-settings .settings-section > .settings-group-title,
#screen-settings .settings-group-title {
  min-height: auto;
  padding: 0;
  border-bottom: 0;
}

#screen-settings .settings-section-head + .settings-row,
#screen-settings .settings-section-head + .settings-card {
  margin-top: 0;
}

#screen-settings .settings-row,
#screen-settings .settings-card-header {
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--surface-raised));
}

#screen-settings #settings-app-section {
  gap: var(--space-3);
}

#screen-settings #settings-app-section .settings-row {
  min-height: var(--space-11);
  padding: var(--space-2) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#screen-settings #settings-app-section .settings-row + .settings-row {
  border-top: 0;
}

#screen-settings #settings-app-section .settings-row:active {
  background: color-mix(in srgb, var(--surface-raised) 32%, transparent);
  transform: none;
}

#screen-settings #settings-group-tools-list {
  gap: var(--space-3) !important;
}

#screen-settings #settings-advanced-debug-actions {
  gap: var(--space-3);
}

#screen-settings #theme-toggle-display,
#screen-settings #score-mode-label {
  position: relative;
  min-width: 82px;
  width: 82px;
  min-height: 28px;
  height: 28px;
  justify-content: flex-end;
  padding: 0 9px 0 34px;
  border: 1px solid color-mix(in srgb, var(--accent-teal) 42%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-teal) 14%, var(--surface-raised));
  color: var(--text-secondary);
  line-height: 1;
  overflow: hidden;
}

#screen-settings #theme-toggle-display::before,
#screen-settings #score-mode-label::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-teal);
  transform: translateY(-50%);
  transition: transform var(--motion-fast), background var(--motion-fast);
}

body.theme-light #screen-settings #theme-toggle-display,
#screen-settings #score-mode-label.is-pin {
  justify-content: flex-start;
  padding: 0 34px 0 9px;
}

body.theme-light #screen-settings #theme-toggle-display::before,
#screen-settings #score-mode-label.is-pin::before {
  transform: translate(50px, -50%);
}

#screen-settings #theme-toggle-display span {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
}

#screen-settings .toggle-switch,
#screen-settings .debug-panel .toggle-switch {
  width: 48px;
  min-width: 48px;
  height: 28px;
  min-height: 28px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: var(--surface-raised);
}

#screen-settings .toggle-switch::after,
#screen-settings .debug-panel .toggle-switch::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
}

#screen-settings .toggle-switch.on,
#screen-settings .debug-panel .toggle-switch.on {
  border-color: var(--accent-teal);
  background: color-mix(in srgb, var(--accent-teal) 18%, var(--surface-raised));
}

#screen-settings .toggle-switch.on::after,
#screen-settings .debug-panel .toggle-switch.on::after {
  background: var(--accent-teal);
  transform: translateX(20px);
}

#screen-settings .debug-toggle-row {
  min-height: var(--space-11);
  padding: var(--space-2) 0;
  border-bottom: 0 !important;
}

#screen-settings .debug-toggle-row + .debug-toggle-row {
  margin-top: var(--space-3);
}

#screen-settings .debug-toggle-row button {
  min-width: var(--space-11);
  min-height: var(--space-11);
}

#screen-settings .debug-panel {
  gap: var(--space-4);
}

#screen-settings .debug-section-label + div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Scoring refinement: action-first mode layout */
#screen-scoring {
  background: var(--surface-base, var(--bg-primary));
}

#screen-scoring .sc-header,
#screen-scoring .player-bar,
#screen-scoring .frame-grid-wrap,
#screen-scoring .sc-confirm-area {
  background: var(--surface-base, var(--bg-primary));
}

#screen-scoring .sc-entry-area {
  padding: var(--space-3) var(--space-3) 0;
  gap: var(--space-3);
}

#screen-scoring .scoring-mode-toggle {
  order: -3;
  display: block;
  flex-shrink: 0;
  padding: 0;
}

#screen-scoring .mode-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  min-height: var(--space-11);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card, var(--bg-card));
}

#screen-scoring .mode-btn {
  min-height: var(--space-11);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

#screen-scoring .mode-btn.active {
  background: color-mix(in srgb, var(--accent-teal) 14%, var(--surface-raised, var(--bg-input)));
  border: 1px solid color-mix(in srgb, var(--accent-teal) 50%, var(--border));
  color: var(--accent-teal);
}

#screen-scoring .sc-status-row {
  order: -2;
  padding: 0;
  gap: var(--space-2);
}

#screen-scoring.score-mode-active .sc-status-row {
  gap: 0;
}

#screen-scoring.score-mode-active #pin-entry-toggle {
  display: none !important;
}

#screen-scoring .sc-entry-pills {
  width: 100%;
  min-height: var(--space-11);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card, var(--bg-card));
}

#screen-scoring .sc-pill {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#screen-scoring .sc-pill:first-child,
#screen-scoring .sc-pill:last-child {
  border-radius: var(--radius-sm);
  border-left: 0;
}

#screen-scoring .sc-pill.active {
  background: color-mix(in srgb, var(--accent-teal) 14%, var(--surface-raised, var(--bg-input)));
  border: 1px solid color-mix(in srgb, var(--accent-teal) 50%, var(--border));
  color: var(--accent-teal);
}

#screen-scoring .sc-pin-wrap,
#screen-scoring .sc-numpad-wrap,
#screen-scoring .sc-action-row,
#screen-scoring .scoring-ball-row {
  padding-left: 0;
  padding-right: 0;
}

#screen-scoring .sc-pin-wrap,
#screen-scoring .sc-numpad-wrap {
  flex: 0 1 auto;
  min-height: 0;
}

#screen-scoring .pin-diagram,
#screen-scoring .score-numpad {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card, var(--bg-card));
}

#screen-scoring .score-numpad {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

#screen-scoring .numpad-btn,
#screen-scoring .pin {
  background: var(--surface-raised, var(--bg-input));
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: none;
}

#screen-scoring .numpad-btn.active,
#screen-scoring .pin.knocked {
  background: color-mix(in srgb, var(--accent-teal) 16%, var(--surface-raised, var(--bg-input)));
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  box-shadow: none;
}

#screen-scoring .sc-action-row {
  order: 2;
  padding-top: 0;
  padding-bottom: 0;
  gap: var(--space-2);
}

#screen-scoring .sc-shot-chips {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

#screen-scoring .sc-shot-chip {
  min-height: var(--space-11);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-card, var(--bg-card));
  border-color: var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#screen-scoring .sc-shot-chip.active {
  background: color-mix(in srgb, var(--accent-teal) 12%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

#screen-scoring .sc-shot-chip.split-toggle-btn.active {
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

#screen-scoring .sc-shortcuts {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

#screen-scoring .shortcut-btn {
  min-height: var(--space-11);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#screen-scoring .strike-btn {
  background: color-mix(in srgb, var(--accent-teal) 12%, var(--surface-card, var(--bg-card)));
  border: 1px solid var(--accent-teal);
  color: var(--accent-teal);
}

#screen-scoring .gutter-btn {
  background: var(--surface-card, var(--bg-card));
  border: 1px dashed color-mix(in srgb, var(--text-secondary) 48%, var(--border));
  color: var(--text-secondary);
}

#screen-scoring .sc-confirm-area {
  padding: var(--space-3);
  padding-bottom: calc(var(--safe-bottom) + var(--space-3));
  gap: var(--space-2);
  border-top: 1px solid var(--border);
}

#screen-scoring .btn-confirm {
  min-height: 56px;
  border-radius: var(--radius-md);
  background: var(--brand-gradient, linear-gradient(135deg, var(--accent-brand), var(--accent-teal)));
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#screen-scoring .btn-undo {
  min-height: var(--space-11);
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

#screen-scoring .frame-grid-wrap {
  padding: var(--space-2);
  gap: var(--space-2);
}

#screen-scoring .frame-row {
  gap: var(--space-2);
}

#screen-scoring .frame-cell {
  min-height: 64px;
  border-radius: var(--radius-sm);
  background: var(--surface-card, var(--bg-card));
  border: 1px solid var(--border);
}

#screen-scoring .frame-cell.current {
  background: color-mix(in srgb, var(--accent-teal) 10%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-teal);
  outline: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-teal) 45%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent-teal) 18%, transparent);
}

#screen-scoring .frame-ball.split {
  width: auto;
  min-width: 0;
  height: auto;
  background: transparent;
  border: 0;
  color: var(--text-hi);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

body.theme-light #screen-scoring .pin-diagram,
body.theme-light #screen-scoring .score-numpad,
body.theme-light #screen-scoring .sc-shot-chip,
body.theme-light #screen-scoring .gutter-btn,
body.theme-light #screen-scoring .frame-cell {
  background: var(--surface-card, var(--bg-card));
}

@media (max-height: 720px) {
  #screen-scoring .sc-entry-area {
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  #screen-scoring .frame-cell {
    min-height: 56px;
    padding-block: var(--space-1);
  }

  #screen-scoring .pin-diagram,
  #screen-scoring .score-numpad {
    padding: var(--space-2);
  }
}

/* Scoring layout feedback pass */
#screen-scoring .sc-mode-icon {
  display: none !important;
}

#screen-scoring .sc-header {
  min-height: 76px;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
}

#screen-scoring .sc-header-mid {
  text-align: left;
}

#screen-scoring .sc-bowler-name {
  font-size: 26px;
  line-height: 0.95;
}

#screen-scoring .sc-frame-info,
#screen-scoring .sc-mini-delta,
#screen-scoring .sc-mini-chip,
#screen-scoring .player-bar-frame {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

#screen-scoring .player-bar {
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-base, var(--bg-primary));
}

#screen-scoring .player-bar-item {
  flex: 1 0 112px;
  min-width: 112px;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: 64px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card, var(--bg-card));
  border-bottom-width: 1px;
}

#screen-scoring .player-bar-item.active {
  background: color-mix(in srgb, var(--player-color) 10%, var(--surface-card, var(--bg-card)));
  border-color: var(--player-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-color) 34%, transparent);
}

#screen-scoring .player-bar-name {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

#screen-scoring .player-bar-score {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

#screen-scoring .player-bar-item.active .player-bar-score {
  color: var(--text-primary);
}

#screen-scoring .frame-grid-wrap {
  padding: var(--space-3);
  gap: var(--space-2);
}

#screen-scoring .frame-row {
  gap: var(--space-2);
}

#screen-scoring .frame-cell {
  min-height: 70px;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  justify-content: flex-start;
}

#screen-scoring .frame-balls {
  min-height: 24px;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
}

#screen-scoring .frame-score {
  margin-top: 5px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

#screen-scoring .frame-cell.current .frame-score {
  color: var(--text-primary);
}

#screen-scoring .frame-cell:has(.frame-score:not(:empty)) .frame-score,
#screen-scoring .frame-cell:has(.frame-score:not(:empty)):not(.current):not(.editing) .frame-score {
  color: var(--text-primary);
  opacity: 1;
}

#screen-scoring .frame-cell.frame-10 .frame-ball {
  font-size: 10px;
}

#screen-scoring .frame-ball.miss {
  background: color-mix(in srgb, var(--accent-red) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-red) 34%, var(--border));
  color: var(--accent-red);
}

#screen-scoring .frame-cell.frame-10 .frame-ball.split,
#screen-scoring .frame-ball.split {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  min-width: 19px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transform: none;
}

#screen-scoring .frame-cell.frame-10 .frame-ball.split {
  width: 17px;
  min-width: 17px;
  height: 20px;
  font-size: 10px;
}

#screen-scoring .frame-context-badge,
#screen-scoring .frame-context-badges {
  min-height: 11px;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-secondary);
}

#screen-scoring .frame-context-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
}

#screen-scoring .frame-context-slot {
  display: inline-flex;
  justify-content: center;
  width: 19px;
  min-width: 19px;
}

#screen-scoring .frame-cell.frame-10 .frame-context-slot {
  width: 17px;
  min-width: 17px;
}

#screen-scoring .frame-context-badge.miss,
#screen-scoring .frame-context-badges.miss {
  color: var(--accent-red);
}

#screen-scoring .sc-status-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#screen-scoring #pin-entry-toggle {
  order: 1;
}

#screen-scoring #pin-status {
  order: 2;
  margin-top: var(--space-1);
}

#screen-scoring #score-mode-status {
  order: 1;
}

#screen-scoring .pin-status {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#screen-scoring .sc-shot-chips {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#screen-scoring .sc-shortcuts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#screen-scoring .sc-shot-chip,
#screen-scoring .shortcut-btn {
  min-height: 50px;
  background: var(--surface-card, var(--bg-card));
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

#screen-scoring #shot-pocket,
#screen-scoring #score-shot-pocket,
#screen-scoring .strike-btn {
  border-color: color-mix(in srgb, var(--accent-teal) 70%, var(--border));
  color: var(--accent-teal);
}

#screen-scoring #shot-brooklyn,
#screen-scoring #score-shot-brooklyn {
  border-color: color-mix(in srgb, var(--accent-gold) 72%, var(--border));
  color: var(--accent-gold);
}

#screen-scoring #shot-miss,
#screen-scoring #score-shot-miss {
  border-color: color-mix(in srgb, var(--text-secondary) 50%, var(--border));
  color: var(--text-secondary);
}

#screen-scoring .split-toggle-btn,
#screen-scoring .split-toggle-btn.active {
  border-color: color-mix(in srgb, var(--accent-gold) 72%, var(--border));
  border-style: dashed;
  color: var(--accent-gold);
}

#screen-scoring .gutter-btn {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text-secondary) 50%, var(--border));
}

#screen-scoring .sc-shot-chip.active,
#screen-scoring #shot-pocket.active,
#screen-scoring #score-shot-pocket.active {
  background: color-mix(in srgb, var(--accent-teal) 12%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

#screen-scoring #shot-brooklyn.active,
#screen-scoring #score-shot-brooklyn.active,
#screen-scoring .split-toggle-btn.active {
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

#screen-scoring #shot-miss.active,
#screen-scoring #score-shot-miss.active {
  background: color-mix(in srgb, var(--text-secondary) 10%, var(--surface-card, var(--bg-card)));
  border-color: color-mix(in srgb, var(--text-secondary) 62%, var(--border));
}

#screen-scoring .btn-confirm {
  min-height: 58px;
}

@media (max-width: 360px) {
  #screen-scoring .frame-cell {
    min-height: 64px;
  }

  #screen-scoring .sc-bowler-name {
    font-size: 23px;
  }

  #screen-scoring .sc-shot-chip,
  #screen-scoring .shortcut-btn {
    min-height: var(--space-11);
    font-size: 9px;
  }
}

/* Scoring final control correction */
#screen-scoring .mode-toggle-group,
#screen-scoring .sc-entry-pills {
  min-height: 52px;
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius-md);
}

#screen-scoring .mode-btn,
#screen-scoring .sc-pill {
  min-height: var(--space-11);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
}

#screen-scoring .pin {
  background: transparent;
  box-shadow: none;
}

#screen-scoring .pin.standing {
  background: transparent;
  border-color: color-mix(in srgb, var(--text-secondary) 55%, var(--border));
}

#screen-scoring .pin.knocked {
  background: color-mix(in srgb, var(--accent-teal) 18%, transparent);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  transform: scale(0.92);
}

#screen-scoring .pin.down {
  background: transparent;
}

#screen-scoring .sc-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

#screen-scoring.score-mode-active .sc-shot-chips,
#screen-scoring.score-mode-active .sc-shortcuts {
  display: contents;
}

#screen-scoring .sc-shot-chip,
#screen-scoring .shortcut-btn {
  width: 100%;
  min-height: var(--space-11);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-card, var(--bg-card));
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

#screen-scoring #shot-pocket,
#screen-scoring #score-shot-pocket {
  order: 1;
}

#screen-scoring #shot-brooklyn,
#screen-scoring #score-shot-brooklyn {
  order: 2;
}

#screen-scoring #pin-split-btn,
#screen-scoring #score-split-btn {
  order: 3;
}

#screen-scoring .strike-btn {
  order: 4;
  background: var(--score-strike, var(--accent-teal));
  border-color: var(--score-strike, var(--accent-teal));
  color: var(--bg-primary);
}

#screen-scoring .gutter-btn {
  order: 5;
  background: var(--surface-card, var(--bg-card));
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text-secondary) 48%, var(--border));
  color: var(--text-secondary);
}

#screen-scoring #shot-miss,
#screen-scoring #score-shot-miss {
  order: 6;
}

#screen-scoring #shot-pocket,
#screen-scoring #score-shot-pocket,
#screen-scoring #shot-brooklyn,
#screen-scoring #score-shot-brooklyn,
#screen-scoring #shot-miss,
#screen-scoring #score-shot-miss {
  background: var(--surface-card, var(--bg-card));
  border-color: var(--border);
  color: var(--text-secondary);
}

#screen-scoring #shot-pocket.active,
#screen-scoring #score-shot-pocket.active {
  background: color-mix(in srgb, var(--accent-teal) 12%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

#screen-scoring #shot-brooklyn.active,
#screen-scoring #score-shot-brooklyn.active {
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--surface-card, var(--bg-card)));
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

#screen-scoring #shot-miss.active,
#screen-scoring #score-shot-miss.active {
  background: color-mix(in srgb, var(--text-secondary) 10%, var(--surface-card, var(--bg-card)));
  border-color: color-mix(in srgb, var(--text-secondary) 62%, var(--border));
}

#screen-scoring .strike-btn[style*="accent-gold"] {
  background: var(--score-spare, var(--accent-gold)) !important;
  border-color: var(--score-spare, var(--accent-gold)) !important;
  color: var(--bg-primary) !important;
}

#screen-scoring .split-toggle-btn,
#screen-scoring .split-toggle-btn.active {
  background: var(--surface-card, var(--bg-card));
  border-color: var(--text-primary);
}

#screen-scoring .split-toggle-btn.active {
  color: var(--score-spare, var(--accent-gold));
}

#screen-scoring .score-numpad {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#screen-scoring.score-mode-active .sc-numpad-wrap {
  order: 1;
}

#screen-scoring.score-mode-active .sc-action-row {
  order: 2;
  padding-top: 0;
}

body.theme-light #screen-scoring .score-numpad {
  background: transparent;
}

/* Controlled mobile scoring layout compaction */
#screen-scoring .sc-header { min-height: 64px; }
#screen-scoring .sc-header-mid { min-width: 0; }
#screen-scoring .sc-header-right { min-width: 156px; }
#screen-scoring .sc-header-right .scoring-mode-toggle { display: block; width: 156px; }
#screen-scoring .sc-header-right .mode-toggle-group { min-height: 38px; padding: 3px; border-radius: var(--radius-md); }
#screen-scoring .sc-header-right .mode-btn { min-height: 30px; padding: 0 var(--space-1); font-size: 9px; white-space: nowrap; }
#screen-scoring .mode-label-short { display: none; }
#screen-scoring .sc-mini-stats { display: none; }
#screen-scoring .sc-frame-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-scoring .sc-player-section {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface-base, var(--bg-primary));
}
#screen-scoring .player-bar-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card, var(--bg-card));
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
#screen-scoring .player-bar { flex: 1 1 auto; min-width: 0; padding: 0; border-bottom: 0; }
#screen-scoring .sc-player-section.expanded { display: block; padding: 0; }
#screen-scoring .sc-player-section.expanded .player-bar-toggle { margin: var(--space-1) var(--space-2) 0; }
#screen-scoring .player-bar.expanded { padding: var(--space-3); }
#screen-scoring .player-bar.collapsed {
  gap: var(--space-1);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#screen-scoring .player-bar.collapsed::-webkit-scrollbar { display: none; }
#screen-scoring .player-bar.collapsed .player-bar-item {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 34px;
  padding: 5px 8px 5px 20px;
  justify-content: center;
  gap: 1px;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
}
#screen-scoring .player-bar.collapsed .player-bar-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 18px;
  border-radius: 2px;
  background: var(--player-color);
  transform: translateY(-50%);
  opacity: 0.75;
}
#screen-scoring .player-bar.collapsed .player-bar-item.active {
  background: color-mix(in srgb, var(--player-color) 12%, transparent);
  border-color: var(--player-color);
}
#screen-scoring .player-bar.collapsed .player-bar-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
}
#screen-scoring .player-bar.collapsed .player-bar-score { font-family: var(--font-mono); font-size: 10px; line-height: 1; }
#screen-scoring .player-bar.collapsed .player-bar-frame { display: none; }
#screen-scoring .sc-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-2);
}
#screen-scoring #pin-status {
  grid-column: 1 / 3;
  order: 0;
  justify-content: center;
  margin-top: 0;
  min-width: 0;
  text-align: center;
}
#screen-scoring #pin-entry-toggle {
  grid-column: 3 / 4;
  order: 0;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 3px;
  border-radius: var(--radius-md);
}
#screen-scoring #pin-entry-toggle .sc-pill {
  min-height: 30px;
  padding: 0 var(--space-1);
  font-size: 9px;
  white-space: nowrap;
}
#screen-scoring.score-mode-active .sc-status-row { display: flex; }
#screen-scoring.score-mode-active #score-mode-status { justify-content: center; width: 100%; }
#screen-scoring .sc-pin-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
  width: 100%;
}
#screen-scoring .sc-pin-action-grid .pin-diagram {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: stretch;
  margin-left: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  border: 0;
  background: transparent;
}
body.theme-light #screen-scoring .sc-pin-action-grid .pin-diagram {
  border: 0;
  background: transparent;
}
#screen-scoring .sc-pin-action-grid .pin-side-actions {
  grid-column: 3 / 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  align-items: start;
  align-self: start;
  min-width: 0;
  width: 100%;
  gap: var(--space-2);
}
#screen-scoring .sc-pin-action-grid .pin-side-actions .shortcut-btn {
  min-width: 0;
  width: 100%;
  min-height: 56px;
  height: 56px;
  max-height: 56px;
  flex: 0 0 56px;
}
#screen-scoring .sc-pin-action-grid .pin-side-actions #pin-side-miss { order: 1; }
#screen-scoring .sc-pin-action-grid .pin-side-actions .strike-btn { order: 2; }
#screen-scoring .sc-pin-action-grid .pin-side-actions .gutter-btn { order: 3; }
#screen-scoring .sc-pin-action-grid #shot-pocket { grid-column: 1; grid-row: 2; }
#screen-scoring .sc-pin-action-grid #shot-brooklyn { grid-column: 2; grid-row: 2; }
#screen-scoring .sc-pin-action-grid #pin-split-btn { grid-column: 3; grid-row: 2; }
#screen-scoring .sc-pin-action-grid #shot-pocket,
#screen-scoring .sc-pin-action-grid #shot-brooklyn,
#screen-scoring .sc-pin-action-grid #pin-split-btn {
  width: 100%;
  min-height: 56px;
  height: 56px;
}
#screen-scoring.pin-mode-active .sc-action-row { display: none; }
#screen-scoring.score-mode-active .pin-side-actions { display: none; }
#screen-scoring .score-numpad { grid-template-rows: repeat(2, minmax(58px, 1fr)); }
#screen-scoring .numpad-btn:disabled {
  opacity: 0.32;
  pointer-events: none;
}

@media (max-width: 380px) {
  #screen-scoring .sc-header-right { min-width: 132px; }
  #screen-scoring .sc-header-right .scoring-mode-toggle { width: 132px; }
  #screen-scoring .mode-label-full { display: none; }
  #screen-scoring .mode-label-short { display: inline; }
  #screen-scoring #pin-entry-toggle { min-width: 0; }
  #screen-scoring .sc-pin-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #screen-scoring .sc-pin-action-grid .pin-diagram {
    margin-left: 0;
    width: 100%;
  }
}

.scorecard-frame-ball.is-split-mark {
  font-size: var(--frame-ball-font-size);
  font-weight: 700;
  line-height: 1;
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
}

.game-editor-frame-tile .scorecard-frame-ball.is-split-mark {
  font-size: var(--frame-ball-font-size);
  font-weight: 700;
  line-height: 1;
  width: var(--frame-ball-slot-size);
  min-width: var(--frame-ball-slot-size);
  height: var(--frame-ball-slot-size);
}

.scorecard-frame-ball.is-gutter {
  color: var(--accent-red);
}

.scorecard-frame-context {
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(var(--frame-top-padding) + var(--frame-ball-row-height) - 1px);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.scorecard-frame-context.miss {
  color: var(--accent-red);
}

.scorecard-frame-context-row {
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(var(--frame-top-padding) + var(--frame-ball-row-height) - 1px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--frame-ball-slot-size), auto);
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.scorecard-frame-context-row.miss {
  color: var(--accent-red);
}

.scorecard-frame-context-slot {
  display: inline-flex;
  justify-content: center;
  min-width: var(--frame-ball-slot-size);
}

/* Stats/Games header parity and New Game count selector polish */
#screen-stats .stats-filter-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--screen-pad);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  cursor: default;
}

#screen-stats .stats-mode-tabs {
  position: static;
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
  background: transparent;
  border: 0;
}

#screen-stats .stats-mode-tab {
  flex: 0 0 auto;
  min-height: var(--space-11);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

#screen-stats .stats-mode-tab.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

#screen-stats .stats-filter-summary {
  padding: 8px var(--screen-pad) 0;
}

#screen-new-game .setup-games-section .setup-pill-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--space-11), 1fr));
  gap: 8px;
}

#screen-new-game .setup-games-section .setup-pill {
  width: 100%;
  padding-inline: 0;
}

#screen-new-game .setup-pill.active,
#screen-new-game .setup-pill.selected {
  background: color-mix(in srgb, var(--brand-teal) 18%, var(--surface-raised));
  border-color: var(--brand-teal);
  color: var(--brand-teal);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-teal) 36%, transparent);
}

/* Phase 1: Games/History scorecards */
#screen-history .history-game-card,
#screen-history .scorecard-card--history {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  border-radius: 0;
}

#screen-history .scorecard-card--history {
  background: color-mix(in srgb, var(--surface-card) 74%, #0b1016);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}

#screen-history .history-game-card {
  display: block;
  margin-bottom: 16px;
}

#screen-history .history-scorecard-swipe {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

#screen-history .history-scorecard-swipe .swipe-card-actions {
  inset: 0;
  border-radius: var(--radius-sm);
}

#screen-history .history-scorecard-strip-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  background: color-mix(in srgb, var(--surface-card) 74%, #0b1016);
  transition: transform 0.2s ease;
}

#screen-history .history-card-inner {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
  transition: none;
}

#screen-history .history-game-card:active .history-card-inner {
  background: transparent;
}

#screen-history .scorecard-card--history .scorecard-header {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

#screen-history .scorecard-card--history .scorecard-header-left {
  min-width: 0;
}

#screen-history .scorecard-card--history .scorecard-title-row {
  min-height: 0;
}

#screen-history .scorecard-card--history .scorecard-header-right {
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 78px;
  margin-left: auto;
}

#screen-history .scorecard-card--history .scorecard-total {
  font-size: 36px;
  line-height: 0.95;
  min-width: 58px;
  flex: 0 0 58px;
  text-align: right;
}

#screen-history .scorecard-card--history .scorecard-total.score-white {
  color: var(--text-primary);
}

#screen-history .scorecard-card--history .scorecard-total.score-green {
  color: var(--accent-green);
}

#screen-history .scorecard-card--history .scorecard-total.score-blue {
  color: var(--accent-blue);
}

#screen-history .scorecard-card--history .scorecard-total.score-purple {
  color: #a78bfa;
}

#screen-history .scorecard-card--history .scorecard-total.score-gold,
#screen-history .scorecard-card--history .scorecard-total.score-perfect {
  color: var(--accent-gold);
}

#screen-history .scorecard-card--history .scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
  margin-top: 0;
}

#screen-history .scorecard-card--history .history-mini-frame,
#screen-history .scorecard-card--history .history-mini-frame.frame-10,
#screen-history .scorecard-card--history .history-mini-frame.is-strike,
#screen-history .scorecard-card--history .history-mini-frame.is-spare,
#screen-history .scorecard-card--history .history-mini-frame.is-open,
#screen-history .scorecard-card--history .history-mini-frame.has-split {
  --frame-ball-row-height: 31px;
  --frame-score-row-height: 22px;
  --frame-ball-slot-size: 17px;
  --frame-ball-font-size: 12px;
  min-width: 0;
  width: 100%;
  min-height: 0;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#screen-history .scorecard-card--history .history-mini-frame:last-child {
  border-right: none;
}

#screen-history .scorecard-card--history .scorecard-frame-number {
  border-bottom: 1px solid var(--border);
  padding: 3px 0 2px;
  color: var(--text-muted);
}

#screen-history .scorecard-card--history .scorecard-frame-balls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 31px;
  min-height: 31px;
  padding: 7px 4px 6px;
}

#screen-history .scorecard-card--history .history-mini-frame.frame-10 .scorecard-frame-balls {
  gap: 1px;
  padding-left: 3px;
  padding-right: 3px;
}

#screen-history .scorecard-card--history .scorecard-frame-score {
  min-height: 22px;
  border-top: 1px solid var(--border);
  padding: 5px 2px 4px;
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 800;
}

#screen-history .scorecard-card--history .scorecard-frame-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-hi);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration-line: none;
}

#screen-history .scorecard-card--history .history-mini-frame.frame-10 .scorecard-frame-ball {
  flex-basis: 13px;
  width: 13px;
  min-width: 13px;
}

#screen-history .scorecard-card--history .scorecard-frame-ball.is-strike {
  flex-basis: 16px;
  width: 16px;
  min-width: 16px;
  height: 18px;
  border-radius: 5px;
  color: var(--accent-red);
  border-color: color-mix(in srgb, var(--accent-teal) 76%, var(--border));
  border-style: solid;
  border-width: 1px;
  background: transparent;
}

#screen-history .scorecard-card--history .history-mini-frame.frame-10 .scorecard-frame-ball.is-strike {
  flex-basis: 15px;
  width: 15px;
  min-width: 15px;
}

#screen-history .scorecard-card--history .scorecard-frame-ball.is-spare {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  color: var(--accent-gold);
  border: none;
  outline: none;
  background: transparent;
}

#screen-history .scorecard-card--history .scorecard-frame-ball.is-split-mark {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

#screen-history .scorecard-card--history .history-mini-frame.frame-10 .scorecard-frame-ball.is-spare,
#screen-history .scorecard-card--history .history-mini-frame.frame-10 .scorecard-frame-ball.is-miss,
#screen-history .scorecard-card--history .history-mini-frame.frame-10 .scorecard-frame-ball.is-gutter {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
}

#screen-history .scorecard-card--history .scorecard-frame-ball.is-miss {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-history .scorecard-card--history .scorecard-frame-ball.is-gutter {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-history .scorecard-card--history .scorecard-frame-ball.is-split-circle {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}

#screen-history .scorecard-card--history .pin-diagram-divider {
  background: var(--border);
}

#screen-history .scorecard-card--history .frame-pin-diagram {
  height: 34px;
  gap: 1px;
  padding: 3px 1px;
  background: rgba(0,0,0,0.12);
}

#screen-history .scorecard-card--history .frame-pin-row {
  gap: 1px;
}

#screen-history .scorecard-card--history .pin-dot {
  width: 5px;
  height: 5px;
}

#screen-history .history-filter-chips {
  gap: 8px;
}

#screen-history .hf-chip {
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 12px;
}

#screen-history .hf-chip.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

#screen-history .hf-pins-toggle {
  height: var(--space-11);
  min-height: var(--space-11);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-body);
}

#screen-history .hf-pins-toggle.active {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: #000;
}

#screen-home .recent-scorecard-swipe {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: none;
  box-shadow: none;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  isolation: isolate;
}

#screen-home .recent-scorecard-swipe .swipe-card-actions {
  inset: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#screen-home .recent-scorecard-strip-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--bg-card);
  transition: transform 0.2s ease;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transform: translateZ(0);
}

#screen-home .scorecard-card--recent {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

#screen-home .scorecard-card--recent .scorecard-header {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

#screen-home .scorecard-card--recent .scorecard-header-right {
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 78px;
  margin-left: auto;
}

#screen-home .scorecard-card--recent .scorecard-total {
  font-size: 36px;
  line-height: 0.95;
  min-width: 58px;
  flex: 0 0 58px;
  text-align: right;
}

#screen-home .scorecard-card--recent .scorecard-total.score-white {
  color: var(--text-primary);
}

#screen-home .scorecard-card--recent .scorecard-total.score-green {
  color: var(--accent-green);
}

#screen-home .scorecard-card--recent .scorecard-total.score-blue {
  color: var(--accent-blue);
}

#screen-home .scorecard-card--recent .scorecard-total.score-purple {
  color: #a78bfa;
}

#screen-home .scorecard-card--recent .scorecard-total.score-gold,
#screen-home .scorecard-card--recent .scorecard-total.score-perfect {
  color: var(--accent-gold);
}

#screen-home .scorecard-card--recent .scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
  margin-top: 0;
}

#screen-home .scorecard-card--recent .history-mini-frame,
#screen-home .scorecard-card--recent .history-mini-frame.frame-10,
#screen-home .scorecard-card--recent .history-mini-frame.is-strike,
#screen-home .scorecard-card--recent .history-mini-frame.is-spare,
#screen-home .scorecard-card--recent .history-mini-frame.is-open,
#screen-home .scorecard-card--recent .history-mini-frame.has-split {
  --frame-ball-row-height: 31px;
  --frame-score-row-height: 22px;
  --frame-ball-slot-size: 17px;
  --frame-ball-font-size: 12px;
  min-width: 0;
  width: 100%;
  min-height: 0;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#screen-home .scorecard-card--recent .history-mini-frame:last-child {
  border-right: none;
}

#screen-home .scorecard-card--recent .scorecard-frame-number {
  border-bottom: 1px solid var(--border);
  padding: 3px 0 2px;
  color: var(--text-muted);
}

#screen-home .scorecard-card--recent .scorecard-frame-balls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 31px;
  min-height: 31px;
  padding: 7px 4px 6px;
}

#screen-home .scorecard-card--recent .history-mini-frame.frame-10 .scorecard-frame-balls {
  gap: 1px;
  padding-left: 3px;
  padding-right: 3px;
}

#screen-home .scorecard-card--recent .scorecard-frame-score {
  min-height: 22px;
  border-top: 1px solid var(--border);
  padding: 5px 2px 4px;
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 800;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-hi);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration-line: none;
}

#screen-home .scorecard-card--recent .history-mini-frame.frame-10 .scorecard-frame-ball {
  flex-basis: 13px;
  width: 13px;
  min-width: 13px;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball.is-strike {
  flex-basis: 16px;
  width: 16px;
  min-width: 16px;
  height: 18px;
  border-radius: 5px;
  color: var(--accent-red);
  border-color: color-mix(in srgb, var(--accent-teal) 76%, var(--border));
  border-style: solid;
  border-width: 1px;
  background: transparent;
}

#screen-home .scorecard-card--recent .history-mini-frame.frame-10 .scorecard-frame-ball.is-strike {
  flex-basis: 15px;
  width: 15px;
  min-width: 15px;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball.is-spare {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  color: var(--accent-gold);
  border: none;
  outline: none;
  background: transparent;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball.is-split-mark {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

#screen-home .scorecard-card--recent .history-mini-frame.frame-10 .scorecard-frame-ball.is-spare,
#screen-home .scorecard-card--recent .history-mini-frame.frame-10 .scorecard-frame-ball.is-miss,
#screen-home .scorecard-card--recent .history-mini-frame.frame-10 .scorecard-frame-ball.is-gutter {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball.is-miss {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball.is-gutter {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-home .scorecard-card--recent .scorecard-frame-ball.is-split-circle {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}

#screen-stats .stats-selected-card {
  display: block;
}

#screen-stats .scorecard-card--stats .scorecard-total {
  font-size: 34px;
  line-height: 0.95;
}

#screen-stats .scorecard-card--stats .scorecard-total.score-white {
  color: var(--text-primary);
}

#screen-stats .scorecard-card--stats .scorecard-total.score-green {
  color: var(--accent-green);
}

#screen-stats .scorecard-card--stats .scorecard-total.score-blue {
  color: var(--accent-blue);
}

#screen-stats .scorecard-card--stats .scorecard-total.score-purple {
  color: #a78bfa;
}

#screen-stats .scorecard-card--stats .scorecard-total.score-gold,
#screen-stats .scorecard-card--stats .scorecard-total.score-perfect {
  color: var(--accent-gold);
}

#screen-stats .scorecard-card--stats .scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
}

#screen-stats .scorecard-card--stats .history-mini-frame,
#screen-stats .scorecard-card--stats .history-mini-frame.frame-10,
#screen-stats .scorecard-card--stats .history-mini-frame.is-strike,
#screen-stats .scorecard-card--stats .history-mini-frame.is-spare,
#screen-stats .scorecard-card--stats .history-mini-frame.is-open,
#screen-stats .scorecard-card--stats .history-mini-frame.has-split {
  --frame-ball-row-height: 22px;
  --frame-score-row-height: 15px;
  --frame-ball-slot-size: 15px;
  --frame-ball-font-size: 10px;
  min-width: 0;
  width: 100%;
  min-height: 0;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#screen-stats .scorecard-card--stats .history-mini-frame:last-child {
  border-right: none;
}

#screen-stats .scorecard-card--stats .scorecard-frame-number {
  border-bottom: 1px solid var(--border);
  padding: 3px 0 2px;
  color: var(--text-muted);
}

#screen-stats .scorecard-card--stats .scorecard-frame-balls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 23px;
  min-height: 23px;
  padding: 3px 2px 5px;
}

#screen-stats .scorecard-card--stats .scorecard-frame-score {
  min-height: 18px;
  border-top: 1px solid var(--border);
  padding: 5px 2px 3px;
  color: var(--text-hi);
  font-size: 9px;
}

#screen-stats .scorecard-card--stats .scorecard-frame-ball {
  width: 15px;
  min-width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--text-hi);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration-line: none;
}

#screen-stats .scorecard-card--stats .scorecard-frame-ball.is-strike {
  color: var(--accent-red);
  border-color: color-mix(in srgb, var(--accent-teal) 76%, var(--border));
  background: color-mix(in srgb, var(--accent-teal) 8%, transparent);
}

#screen-stats .scorecard-card--stats .scorecard-frame-ball.is-spare {
  color: var(--accent-gold);
  border-color: color-mix(in srgb, var(--accent-gold) 58%, var(--border));
  background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

#screen-stats .scorecard-card--stats .scorecard-frame-ball.is-miss {
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: transparent;
}

#screen-stats .scorecard-card--stats .scorecard-frame-ball.is-gutter {
  color: var(--accent-red);
  border-color: color-mix(in srgb, var(--accent-red) 42%, var(--border));
  background: color-mix(in srgb, var(--accent-red) 6%, transparent);
}

#screen-stats .scorecard-card--stats .scorecard-frame-ball.is-split-circle {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}

#screen-history .session-card {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}

#screen-history .session-card.swipe-card {
  background: transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}

#screen-history .session-card .swipe-card-actions {
  inset: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#screen-history .session-card .swipe-card-action.edit {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#screen-history .session-card .swipe-card-action.delete {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#screen-history .session-card-inner {
  background: var(--bg-primary);
  border: 1px solid color-mix(in srgb, var(--accent-teal) 42%, var(--border));
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 1px var(--bg-primary);
  transform: translateZ(0);
}

#screen-history .session-card-header {
  gap: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

#screen-history .session-card-header-top {
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--accent-teal) 18%, #061615);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-teal) 42%, transparent);
  box-sizing: border-box;
  gap: 8px;
}

#screen-history .session-card-main {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--accent-teal);
  padding: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}

#screen-history .session-card-type {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--accent-teal);
}

#screen-history .session-card-scores {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  gap: 5px;
}

#screen-history .session-player-count {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-hi);
  font: inherit;
  padding: 2px 0;
  cursor: pointer;
}

#screen-history .session-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

#screen-history .session-menu-btn:active {
  background: color-mix(in srgb, var(--accent-teal) 12%, transparent);
  color: var(--accent-teal);
}

#screen-history .session-venue-line {
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-card) 84%, transparent);
  color: var(--text-body);
  padding: 9px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#screen-history .session-card-games:empty {
  display: none;
}

#screen-history .session-card-games {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
}

#screen-history .session-stats-section {
  border-top: none;
  background: transparent;
}

#screen-history .session-bowler-table {
  padding: 4px 10px 6px;
  background: transparent;
}

#screen-history .session-bowler-table-header,
#screen-history .session-bowler-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.4fr) repeat(5, minmax(34px, 0.55fr));
  gap: 4px;
  align-items: center;
}

#screen-history .session-bowler-table-header {
  padding: 3px 0 6px;
  border-bottom: 1px solid var(--border);
}

#screen-history .session-bowler-row {
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

#screen-history .session-bowler-row:last-child {
  border-bottom: none;
}

#screen-history .session-bowler-row.session-bowler-winner {
  background: transparent;
}

#screen-history .session-bowler-table-header .sbt-name,
#screen-history .session-bowler-table-header .sbt-val {
  min-width: 0;
  font-size: 9px;
  color: var(--text-muted);
}

#screen-history .session-bowler-row .sbt-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#screen-history .session-bowler-row .sbt-val {
  min-width: 0;
  font-size: 12px;
}

#screen-history .sbt-series {
  color: var(--accent-teal);
}

#screen-history .session-rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 17px;
  margin-left: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
}

#screen-history .session-rank-medal.rank-1 {
  color: var(--accent-gold);
  border-color: color-mix(in srgb, var(--accent-gold) 58%, var(--border));
}

#screen-history .session-rank-medal.rank-2 {
  color: #c9d1d9;
  border-color: color-mix(in srgb, #c9d1d9 52%, var(--border));
}

#screen-history .session-rank-medal.rank-3 {
  color: #cd7f32;
  border-color: color-mix(in srgb, #cd7f32 58%, var(--border));
}

#screen-history .session-games-toggle {
  width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 80%, transparent);
  border-top: 1px solid var(--border);
  color: var(--text-body);
  padding-left: 10px;
  padding-right: 10px;
}

#screen-history .session-game-header {
  width: 100%;
  box-sizing: border-box;
  min-height: 31px;
  padding: 0 10px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-teal) 14%, #061615);
  gap: 8px;
}

#screen-history .session-game-header:first-child {
  border-top: 1px solid var(--border);
}

#screen-history .session-game-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-teal);
}

#screen-history .session-game-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#screen-history .session-game-menu-btn {
  appearance: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
}

#screen-history .session-game-menu-btn:active {
  background: color-mix(in srgb, var(--accent-teal) 12%, transparent);
  color: var(--accent-teal);
}

#screen-history .session-round-move-btn {
  display: none;
}

#screen-history .session-scorecard-wrap {
  padding: 0 10px;
  border-top: none;
  background: transparent;
}

#screen-history .session-game-header + .session-scorecard-wrap,
#screen-history .session-scorecard-wrap + .session-game-highlights,
#screen-history .session-game-highlights + .session-game-header,
#screen-history .session-game-highlights + .session-scorecard-wrap,
#screen-history .session-scorecard-wrap + .session-scorecard-wrap,
#screen-history .session-scorecard-wrap + .session-game-header {
  margin-top: 18px;
}

#screen-history .session-scorecard-wrap:active {
  background: color-mix(in srgb, var(--accent-teal) 5%, transparent);
}

#screen-history .session-scorecard-wrap.player-moved {
  background: color-mix(in srgb, var(--accent-teal) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-teal);
}

#screen-history .session-scorecard-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

#screen-history .session-scorecard-inner .scorecard-header {
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#screen-history .session-scorecard-inner .scorecard-header-left {
  min-width: 0;
  align-items: center;
}

#screen-history .session-scorecard-inner .scorecard-title-row {
  min-height: 0;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

#screen-history .session-scorecard-inner .scorecard-name {
  font-size: 14px;
  line-height: 1.05;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-history .session-scorecard-inner .scorecard-badges {
  display: none;
}

#screen-history .session-scorecard-inner .scorecard-header-right {
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 78px;
}

#screen-history .session-scorecard-inner .scorecard-total {
  font-size: 32px;
  line-height: 0.95;
  min-width: 56px;
  text-align: right;
  flex: 0 0 56px;
}

#screen-history .session-player-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-teal) 13%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--accent-teal) 30%, var(--border));
  color: var(--text-hi);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

#screen-history .session-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#screen-history .session-player-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

#screen-history .session-scorecard-inner .scorecard-total.score-white {
  color: var(--text-primary);
}

#screen-history .session-scorecard-inner .scorecard-total.score-green {
  color: var(--accent-green);
}

#screen-history .session-scorecard-inner .scorecard-total.score-blue {
  color: var(--accent-blue);
}

#screen-history .session-scorecard-inner .scorecard-total.score-purple {
  color: #a78bfa;
}

#screen-history .session-scorecard-inner .scorecard-total.score-gold,
#screen-history .session-scorecard-inner .scorecard-total.score-perfect {
  color: var(--accent-gold);
}

#screen-history .session-scorecard-inner .scorecard-frame-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.42fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
  margin-top: 0;
}

#screen-history .session-scorecard-inner .history-mini-frame,
#screen-history .session-scorecard-inner .history-mini-frame.frame-10,
#screen-history .session-scorecard-inner .history-mini-frame.is-strike,
#screen-history .session-scorecard-inner .history-mini-frame.is-spare,
#screen-history .session-scorecard-inner .history-mini-frame.is-open,
#screen-history .session-scorecard-inner .history-mini-frame.has-split {
  --frame-ball-row-height: 31px;
  --frame-score-row-height: 22px;
  --frame-ball-slot-size: 17px;
  --frame-ball-font-size: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  min-height: 0;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 0;
  overflow: visible;
}

#screen-history .session-scorecard-inner .history-mini-frame.has-split {
  z-index: 2;
}

#screen-history .session-scorecard-inner .history-mini-frame:last-child {
  border-right: none;
}

#screen-history .session-scorecard-inner .scorecard-frame-number {
  order: 0;
  border-bottom: 1px solid var(--border);
  padding: 3px 0 2px;
  color: var(--text-muted);
}

#screen-history .session-scorecard-inner .scorecard-frame-balls {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 31px;
  min-height: 31px;
  padding: 7px 4px 6px;
  overflow: visible;
}

#screen-history .session-scorecard-inner .history-mini-frame.frame-10 .scorecard-frame-balls {
  gap: 1px;
  padding-left: 3px;
  padding-right: 3px;
}

#screen-history .session-scorecard-inner .scorecard-frame-score {
  order: 4;
  min-height: 22px;
  border-top: 1px solid var(--border);
  padding: 5px 2px 4px;
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 800;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-hi);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration-line: none;
}

#screen-history .session-scorecard-inner .history-mini-frame.frame-10 .scorecard-frame-ball {
  flex-basis: 13px;
  width: 13px;
  min-width: 13px;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-strike {
  flex-basis: 16px;
  width: 16px;
  min-width: 16px;
  height: 18px;
  border-radius: 5px;
  color: var(--accent-red);
  border-color: color-mix(in srgb, var(--accent-teal) 76%, var(--border));
  border-style: solid;
  border-width: 1px;
  background: transparent;
}

#screen-history .session-scorecard-inner .history-mini-frame.frame-10 .scorecard-frame-ball.is-strike {
  flex-basis: 15px;
  width: 15px;
  min-width: 15px;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-spare {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
  height: 20px;
  border-radius: 0;
  color: var(--accent-gold);
  border: none;
  outline: none;
  background: transparent;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-split-mark {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

#screen-history .session-scorecard-inner .history-mini-frame.frame-10 .scorecard-frame-ball.is-spare,
#screen-history .session-scorecard-inner .history-mini-frame.frame-10 .scorecard-frame-ball.is-miss,
#screen-history .session-scorecard-inner .history-mini-frame.frame-10 .scorecard-frame-ball.is-gutter {
  flex-basis: 12px;
  width: 12px;
  min-width: 12px;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-miss {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-gutter {
  color: var(--accent-red);
  border: none;
  background: transparent;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-split-circle {
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-sizing: border-box;
  padding-inline: 0;
  transform: translateY(-1px);
  overflow: visible;
}

#screen-history .session-scorecard-inner .scorecard-frame-ball.is-split-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 999px;
  pointer-events: none;
  box-sizing: border-box;
}

#screen-history .session-scorecard-inner .pin-diagram-divider {
  order: 2;
  background: var(--border);
}

#screen-history .session-scorecard-inner .frame-pin-diagram {
  order: 3;
  height: 30px;
  gap: 1px;
  padding: 2px 1px;
  background: rgba(0,0,0,0.12);
}

#screen-history .session-scorecard-inner .frame-pin-row {
  gap: 1px;
}

#screen-history .session-scorecard-inner .pin-dot {
  width: 4px;
  height: 4px;
}

#screen-history .history-session-v2-card {
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}

#screen-history .history-session-v2-card.swipe-card {
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-card) 88%, #090b11);
  clip-path: inset(0 round 14px);
}

#screen-history .history-session-v2-card .swipe-card-actions {
  border-radius: 14px;
  inset: 0;
  overflow: hidden;
}

#screen-history .history-session-v2-inner.session-card-inner {
  background: color-mix(in srgb, var(--surface-card) 88%, #090b11);
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent-teal));
  border-radius: 14px;
  box-shadow: none;
}

#screen-history .history-session-v2-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 9px;
  background: color-mix(in srgb, var(--surface-card) 86%, #101722);
}

#screen-history .history-session-v2-header-main {
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

#screen-history .history-session-v2-source {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-teal) 12%, var(--surface-raised));
  color: var(--accent-teal);
  font-size: 13px;
}

#screen-history .history-session-v2-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#screen-history .history-session-v2-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-history .history-session-v2-meta {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-history .history-session-v2-actions,
#screen-history .history-session-v2-game-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 65px;
  justify-content: flex-end;
}

#screen-history .history-session-v2-actions {
  width: 114px;
}

#screen-history .history-session-v2-icon-btn,
#screen-history .history-session-v2-chevron-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  color: var(--text-muted);
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

#screen-history .history-session-v2-icon-btn:has(span) {
  width: auto;
  min-width: 44px;
  padding: 0 8px;
}

#screen-history .history-session-v2-icon-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

#screen-history .history-session-v2-icon-btn:has(span) svg {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

#screen-history .history-session-v2-icon-btn span {
  line-height: 1;
  min-width: 12px;
  text-align: left;
}

#screen-history .history-session-v2-icon-btn:active,
#screen-history .history-session-v2-chevron-btn:active {
  color: var(--accent-teal);
  border-color: color-mix(in srgb, var(--accent-teal) 50%, var(--border));
}

#screen-history .history-session-v2-body.session-card-games {
  border-top: 1px solid var(--border);
  background: transparent;
}

#screen-history .history-session-v2-summary {
  padding: 8px 14px 10px;
  background: color-mix(in srgb, var(--surface-card) 74%, transparent);
}

#screen-history .history-session-v2-table {
  width: 100%;
}

#screen-history .history-session-v2-table-head,
#screen-history .history-session-v2-table-row {
  display: grid;
  grid-template-columns: minmax(92px, 1.45fr) repeat(5, minmax(32px, 0.58fr));
  gap: 5px;
  align-items: center;
}

#screen-history .history-session-v2-table-head {
  padding: 4px 0 7px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

#screen-history .history-session-v2-table-row {
  min-height: 31px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

#screen-history .history-session-v2-table-row:last-child {
  border-bottom: none;
}

#screen-history .history-session-v2-bowler-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#screen-history .history-session-v2-bowler-name > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-history .history-session-v2-series {
  color: var(--accent-teal);
}

#screen-history .history-session-v2-master-toggle.session-games-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent);
  color: var(--text-secondary);
}

#screen-history .history-session-v2-master-toggle.session-games-toggle > svg {
  flex: 0 0 28px;
  width: 28px;
}

#screen-history .history-session-v2-master-toggle.open > svg,
#screen-history .history-session-v2-game-row.open .history-session-v2-chevron-btn > svg {
  transform: rotate(180deg);
}

#screen-history .history-session-v2-games {
  background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
}

#screen-history .history-session-v2-game-row.session-game-header {
  display: flex;
  align-items: center;
  min-height: 37px;
  padding: 0 12px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-teal) 16%, #071716);
  cursor: pointer;
}

#screen-history .history-session-v2-game-row .session-game-label {
  flex: 1;
  min-width: 0;
  color: var(--accent-teal);
  font-size: 9px;
  letter-spacing: 0.02em;
}

#screen-history .history-session-v2-chevron-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

#screen-history .history-session-v2-header-chevron {
  order: 2;
}

#screen-history .history-session-v2-game-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 8px 11px;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
}

#screen-history .history-session-v2-player-row.session-scorecard-wrap {
  padding: 0;
  margin: 0;
}

#screen-history .history-session-v2-player-row.session-scorecard-wrap + .history-session-v2-player-row.session-scorecard-wrap {
  margin-top: 0;
}

#screen-history .history-session-v2-scorecard.session-scorecard-inner {
  background: color-mix(in srgb, var(--surface-card) 74%, #0b1016);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}

#screen-history .history-session-v2-scorecard.session-scorecard-inner.is-winner {
  border-color: color-mix(in srgb, var(--accent-teal) 66%, var(--border));
  background: color-mix(in srgb, var(--surface-card) 74%, #0b1016);
}

#screen-history .history-session-v2-scorecard.session-scorecard-inner .scorecard-frame-row {
  border-radius: 9px;
}

#screen-history .history-session-v2-scorecard.session-scorecard-inner .scorecard-header {
  margin-bottom: 9px;
}

#screen-history .history-session-v2-scorecard.session-scorecard-inner .scorecard-total {
  font-size: 36px;
  min-width: 58px;
  flex-basis: 58px;
}

#screen-history .history-session-v2-game-body .session-game-highlights {
  margin: 2px 0 0;
}

.session-action-title {
  text-transform: uppercase;
}

.session-players-panel {
  gap: 12px;
}

.session-players-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
}

.session-player-row:last-child {
  border-bottom: none;
}

.session-player-name {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.session-player-empty {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 8px 2px;
}