/* ============================
   Quick Cricket Score — Styles
   ============================ */

:root {
  /* Colors */
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-card: rgba(17, 24, 39, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.05);
  --text-primary: #f0f4ff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #00e5ff;
  --accent-glow: rgba(0, 229, 255, 0.3);
  --green: #22c55e;
  --green-glow: rgba(34, 197, 94, 0.3);
  --red: #ef4444;
  --red-glow: rgba(239, 68, 68, 0.3);
  --yellow: #facc15;
  --yellow-glow: rgba(250, 204, 21, 0.3);
  --purple: #a855f7;
  --purple-glow: rgba(168, 85, 247, 0.3);
  --orange: #f97316;
  --orange-glow: rgba(249, 115, 22, 0.3);
  --border-color: rgba(255, 255, 255, 0.08);

  /* Spacing */
  --container-padding: 16px;
  --radius: 14px;
  --radius-sm: 8px;
}

body.theme-basic {
  /* Basic White Theme Overrides */
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(0, 0, 0, 0.04);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #576574;
  --accent: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.1);
  --green: #16a34a;
  --green-glow: rgba(22, 163, 74, 0.1);
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.1);
  --yellow: #a16207;
  --yellow-glow: rgba(161, 98, 7, 0.1);
  --orange: #c2410c;
  --orange-glow: rgba(194, 65, 12, 0.1);
  --purple: #7e22ce;
  --purple-glow: rgba(126, 34, 206, 0.1);
  --border-color: rgba(15, 23, 42, 0.08);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

input,
button {
  font-family: inherit;
  outline: none;
  border: none;
}

/* ---- Screens ---- */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--container-padding);
  animation: fadeSlideIn 0.35s ease-out;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

#screen-local-match,
#screen-tournament-match {
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ================================================
   HOME SCREEN
   ================================================ */
#screen-home {
  background-image: linear-gradient(to bottom, rgba(10, 14, 26, 0.2), #0a0e1a), url('../public/stadium-bg.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  padding: 0;
}

.home-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  padding: var(--container-padding);
}

.logo-section {
  text-align: center;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
  padding: 24px;
  border-radius: 50%;
}

.logo-icon {
  font-size: 64px;
  animation: logoBounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.6));
}

@keyframes logoBounce {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    transform: translate3d(0, -10px, 0) rotate(-5deg);
  }

  75% {
    transform: translate3d(0, -4px, 0) rotate(3deg);
  }
}

.app-title {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-top: 16px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.1);
}

.app-title span {
  background: linear-gradient(135deg, var(--accent), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
}

.app-tagline {
  color: #fff;
  font-size: 0.95rem;
  margin-top: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Home Screen Mobile Optimizations */
@media (max-width: 480px) {
  .home-container {
    gap: 28px;
    padding: 16px;
  }

  .app-title {
    font-size: 2.1rem;
  }

  .logo-icon {
    font-size: 52px;
    padding: 18px;
  }

  .mode-btn {
    padding: 14px 16px;
  }

  .mode-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }

  .mode-title {
    font-size: 1.1rem;
  }

  .mode-desc {
    font-size: 0.8rem;
  }
}

/* Live Match Banner */
.live-match-banner {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  margin-bottom: 24px;
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 229, 255, 0.1);
  animation: fadeSlideIn 0.5s ease;
  transform: translateZ(0);
  /* Hardware Acceleration Trigger */
}

.live-match-banner:active {
  transform: scale(0.97);
}

.live-matches-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.join-code-card {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.join-code-card.collapsed {
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.join-code-card label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.join-code-toggle {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 900;
}

.join-code-card:not(.collapsed) .join-code-toggle {
  margin-bottom: 10px;
}

.join-code-row {
  display: flex;
  gap: 8px;
}

.join-code-card.collapsed label,
.join-code-card.collapsed .join-code-row,
.join-code-card.collapsed #join-code-error {
  display: none;
}

.join-code-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.join-code-row button,
.share-btn {
  background: linear-gradient(135deg, var(--accent), var(--green));
  color: #06111a;
  font-weight: 900;
}

.join-code-row button {
  padding: 0 16px;
  border-radius: 12px;
}

#join-code-error {
  min-height: 16px;
  margin-top: 6px;
  color: var(--red);
  font-size: 0.78rem;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.live-badge span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulseRed 1.5s infinite;
}

@keyframes pulseRed {
  0% {
    transform: scale(0.95) translateZ(0);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }

  70% {
    transform: scale(1) translateZ(0);
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.95) translateZ(0);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.live-match-teams {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.live-match-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Mode Buttons */
.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.mode-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  background: rgba(10, 14, 26, 0.85);
  /* Darker solid back */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  text-align: left;
  border: 1px solid rgba(0, 229, 255, 0.3);
  /* Base glow border */
}

.local-btn {
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.25), inset 0 0 15px rgba(0, 229, 255, 0.1);
}

.tournament-btn {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25), inset 0 0 15px rgba(168, 85, 247, 0.1);
}

.mode-btn-bg {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}

.local-btn .mode-btn-bg {
  background: linear-gradient(135deg, var(--accent), #0284c7);
}

.tournament-btn .mode-btn-bg {
  background: linear-gradient(135deg, var(--purple), #db2777);
}

.mode-btn:active {
  transform: scale(0.97);
}

.mode-btn:hover .mode-btn-bg,
.mode-btn:active .mode-btn-bg {
  opacity: 0.22;
}

.mode-btn-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.mode-icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mode-text {
  display: flex;
  flex-direction: column;
}

.mode-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mode-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

/* --- Basic Theme Resets --- */
body.theme-basic #screen-home {
  background-image: none;
  background-color: var(--bg-primary);
}

body.theme-basic .app-title {
  text-shadow: none;
}

body.theme-basic .app-title span {
  filter: none;
}

body.theme-basic .logo-section {
  background: none;
}

body.theme-basic .logo-icon {
  filter: none;
}

body.theme-basic .app-tagline {
  background: var(--bg-secondary);
  box-shadow: none;
  border-color: var(--border-color);
  color: var(--text-primary);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-basic .live-match-banner {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-basic .live-match-teams {
  color: var(--text-primary);
}

.privacy-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 16px;
  background: rgba(10, 14, 26, 0.94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.privacy-consent strong,
.privacy-consent span {
  display: block;
}

.privacy-consent strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.privacy-consent span {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.privacy-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.privacy-actions button {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-weight: 700;
}

.privacy-actions button[data-consent="allow"] {
  background: linear-gradient(135deg, var(--accent), var(--green));
  color: #06111a;
}

@media (max-width: 520px) {
  .privacy-consent {
    align-items: stretch;
    flex-direction: column;
  }
}

body.theme-basic .mode-btn {
  background: var(--bg-secondary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.theme-basic .mode-title {
  text-shadow: none;
  color: var(--text-primary);
}

body.theme-basic .mode-desc {
  color: var(--text-secondary);
}

body.theme-basic .mode-icon {
  background: var(--bg-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* --- Basic Theme Component Overrides --- */

/* Buttons & Active/Tap states */
body.theme-basic .run-btn:active,
body.theme-basic .extra-btn.undo:active,
body.theme-basic .action-btn:active,
body.theme-basic .menu-btn:active,
body.theme-basic .dropdown-item:active {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-basic .lsetup-start-btn {
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2) !important;
}
body.theme-basic .lsetup-start-btn::after {
  box-shadow: none !important;
}

body.theme-basic .panel-tab.active {
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

body.theme-basic .extra-run-btn {
  background: var(--orange-glow) !important;
  border-color: rgba(194, 65, 12, 0.3) !important;
}

body.theme-basic .teams-vs-badge {
  background: var(--accent-glow) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
  box-shadow: none !important;
}

body.theme-basic .team-badge.batting {
  background: var(--accent-glow) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

body.theme-basic .premium-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
}

/* Sliders / Toggles */
body.theme-basic .toggle-slider {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-basic .toggle-switch input:checked+.toggle-slider {
  background: var(--accent-glow) !important;
}

/* Scorecard & Ball summaries */
body.theme-basic .scorecard-over {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.theme-basic .mini-ball {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
}

body.theme-basic .mini-ball.four,
body.theme-basic .mini-ball.boundary-four {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
}

body.theme-basic .mini-ball.six,
body.theme-basic .mini-ball.boundary-six {
  background: rgba(126, 34, 206, 0.12) !important;
  color: #7e22ce !important;
}

body.theme-basic .mini-ball.wicket {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #dc2626 !important;
}

body.theme-basic .mini-ball.wide,
body.theme-basic .mini-ball.noball,
body.theme-basic .mini-ball.extra {
  background: rgba(16, 163, 74, 0.12) !important;
  color: #16a34a !important;
}

body.theme-basic .ball-tag {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

body.theme-basic .recent-overs-list .mini-ball {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-primary) !important;
}

body.theme-basic .recent-overs-list .mini-ball.four {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #16a34a !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

body.theme-basic .recent-overs-list .mini-ball.six {
  background: rgba(126, 34, 206, 0.15) !important;
  color: #7e22ce !important;
  border-color: rgba(126, 34, 206, 0.3) !important;
}

body.theme-basic .recent-overs-list .mini-ball.wicket {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

body.theme-basic .recent-overs-list .mini-ball.wide,
body.theme-basic .recent-overs-list .mini-ball.noball {
  background: rgba(161, 98, 7, 0.15) !important;
  color: #a16207 !important;
  border-color: rgba(161, 98, 7, 0.3) !important;
}

body.theme-basic .recent-over-runs {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.theme-basic .hist-over-row {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* Privacy Cookie Consent */
body.theme-basic .privacy-consent {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}

body.theme-basic .privacy-actions button {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
}

body.theme-basic .privacy-actions button[data-consent="allow"] {
  background: linear-gradient(135deg, var(--accent), var(--green)) !important;
  color: #ffffff !important;
}

/* Ripple */
.ripple-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0) translateZ(0);
  will-change: transform, opacity;
  animation: rippleAnim 0.6s ease-out forwards;
}

@keyframes rippleAnim {
  to {
    transform: scale(4) translateZ(0);
    opacity: 0;
  }
}

/* ================================================
   SETUP SCREENS
   ================================================ */
.setup-container {
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  padding-top: 8px;
}

.back-btn {
  background: none;
  color: var(--accent);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px 0;
  font-weight: 500;
}

.setup-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 16px 0 24px;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.form-group input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease;
}

.form-group input:focus {
  border-color: var(--accent);
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.players-info {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 20px;
}

.player-names-section {
  display: flex;
  flex-direction: column;
  gap: min(12px, 1.5vh);
}

.player-names-group {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
}

.player-names-group h4 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-weight: 600;
}

.player-names-group .player-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-names-group input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease;
}

.player-names-group input:focus {
  border-color: var(--accent);
}

.player-names-group input::placeholder {
  color: var(--text-muted);
}

.start-btn {
  position: relative;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), #0284c7);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.start-btn:active {
  transform: scale(0.97);
}

/* ================================================
   PREMIUM LOCAL SETUP STYLES
   ================================================ */

/* Premium Header Card */
.setup-header-card {
  text-align: center;
  padding: 28px 16px 20px;
  margin-bottom: 8px;
  animation: fadeSlideIn 0.5s ease;
}

.setup-header-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  animation: logoBounce 2.5s ease-in-out infinite;
}

.setup-title-premium {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.setup-title-premium span {
  background: linear-gradient(135deg, var(--accent), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.setup-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 6px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* Setup Cards */

.setup-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  will-change: transform, opacity;
  animation: fadeSlideIn 0.5s ease;
  transform: translateZ(0);
  /* Hardware Acceleration Trigger */
}

.setup-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.setup-card-icon {
  font-size: 1.1rem;
}

.setup-card-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

/* Teams Row */
.teams-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.team-input-group {
  flex: 1;
}

.teams-vs-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: 0 0 12px var(--accent-glow);
  margin-bottom: 4px;
}

/* Config Row */
.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(12px, 1.5vh);
}

/* Premium Select */
.premium-select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.premium-select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Glow Button Optimized for Weak Androids */
.glow-btn {
  position: relative;
  z-index: 1;
}

.glow-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 4px 24px rgba(0, 229, 255, 0.4);
  opacity: 0.5;
  z-index: -1;
  transition: opacity 0.3s ease;
  will-change: opacity;
  animation: glowPulseOptimized 2s ease-in-out infinite;
}

@keyframes glowPulseOptimized {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ================================================
   LOCAL SETUP — COMPACT SINGLE-SCREEN LAYOUT
   ================================================ */

/* Remove outer .screen padding so wrapper owns the layout */
#screen-local-setup {
  padding: 0;
}

/* Full-height wrapper — no scroll */
.lsetup-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  padding: 12px 16px 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Compact header */
.lsetup-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.lsetup-back {
  padding: 4px 0;
  font-size: 0.88rem;
}

.lsetup-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lsetup-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.lsetup-title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.lsetup-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* Glass Card (the form itself) */
.lsetup-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  min-height: 0;
}

/* 2-column grid for compact inputs */
.lsetup-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lsetup-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lsetup-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Compact input / select */
.lsetup-input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.lsetup-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
}

.lsetup-input::placeholder {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.lsetup-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2364748b' d='M5 7L1 2h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* Wicket count hint */
.lsetup-players-info {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 500;
  min-height: 0;
  margin-top: -4px;
}

/* Inline toggle row */
.lsetup-toggles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 2px;
}

.lsetup-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.lsetup-toggle-sep {
  width: 1px;
  height: 28px;
  background: var(--border-color);
  margin: 0 12px;
  flex-shrink: 0;
}

.lsetup-toggle-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Footer with Start button */
.lsetup-footer {
  flex-shrink: 0;
  padding: 10px 0 8px;
}

.lsetup-start-btn {
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--accent), #0284c7);
  color: #000;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  font-family: inherit;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.35);
}

.lsetup-start-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.2);
}

/* Subtle pulse glow on start button */
.lsetup-start-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
  opacity: 0.6;
  pointer-events: none;
  animation: glowPulseOptimized 2s ease-in-out infinite;
}

/* Creator credit compact */
.lsetup-credit {
  padding: 6px 0 4px;
  font-size: 0.68rem;
}


/* ================================================
   MAIN MENU & HISTORY
   ================================================ */
.home-top-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100;
}

.menu-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}

.menu-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.15);
}

.menu-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-width: 160px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform-origin: top right;
  transition: opacity 0.2s, transform 0.2s;
}

.menu-dropdown.hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item:active {
  background: rgba(255, 255, 255, 0.1);
}

/* History List */
.history-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-bottom: 20px;
}

.history-card {
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.08), transparent 34%),
    var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeSlideIn 0.3s ease;
  position: relative;
  overflow: hidden;
}

.history-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  opacity: 0.85;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.history-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.history-versus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.history-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 800;
}

.history-score-pill {
  flex-shrink: 0;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.94rem;
  font-weight: 900;
}

.history-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.history-result strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--green);
  font-size: 0.96rem;
}

.history-winner-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.theme-basic .history-card {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

body.theme-basic .history-team-row {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}

.history-empty,
.history-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 0.95rem;
}

/* ================================================
   MATCH SCREEN — SCOREBOARD
   ================================================ */
.match-container {
  position: relative;
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(12px, 1.5vh);
  padding-bottom: 16px;
}

/* Auth Corner Button */
.auth-corner-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-corner-btn:active {
  transform: scale(0.9);
}

.auth-corner-icon {
  font-size: 1rem;
  line-height: 1;
}

.auth-corner-btn.authenticated {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

/* Creator Credit */
.creator-credit {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 0.5px;
  padding: 12px 0;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.creator-credit strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Instagram Follow Button */
.insta-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insta-follow-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(131, 58, 180, 0.4);
}

.insta-follow-btn:active {
  transform: scale(0.97);
}

.insta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Tournament Header */
.tournament-header {
  text-align: center;
  padding: 8px 0;
}

.tournament-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Scoreboard */
.scoreboard {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.scoreboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.team-badge {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.team-badge.batting {
  border-color: var(--accent);
  background: rgba(0, 229, 255, 0.06);
  box-shadow: 0 0 12px var(--accent-glow);
}

.team-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.captain-name {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}

.vs-divider {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* Score Display */
.score-display {
  text-align: center;
  margin-bottom: 12px;
}

.current-innings-label {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.score-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.score-runs {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  transition: all 0.25s ease;
}

.score-runs.animate {
  animation: scoreUpdate 0.3s ease;
}

@keyframes scoreUpdate {
  0% {
    transform: scale(1) translateZ(0);
  }

  50% {
    transform: scale(1.2) translateZ(0);
    color: var(--accent);
  }

  100% {
    transform: scale(1) translateZ(0);
  }
}

.score-separator {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--text-muted);
}

.score-wickets {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--red);
}

.score-overs {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 400;
}

/* Wicket Indicator */
.wicket-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.wicket-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 2px solid var(--text-muted);
  transition: all 0.3s ease;
}

.wicket-dot.out {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 6px var(--red-glow);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.stat-item {
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.stat-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2px;
}

/* This Over */
.last-over-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.last-over-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.last-over-balls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ball-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-secondary);
  color: var(--text-primary);
  will-change: transform;
  animation: ballPop 0.25s ease;
}

@keyframes ballPop {
  from {
    transform: scale(0) translateZ(0);
  }

  to {
    transform: scale(1) translateZ(0);
  }
}

.ball-tag.four {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
}

.ball-tag.six {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple);
}

.ball-tag.wicket {
  background: rgba(239, 68, 68, 0.2);
  color: var(--red);
}

.ball-tag.wide,
.ball-tag.noball {
  background: rgba(250, 204, 21, 0.2);
  color: var(--yellow);
}

/* Player List (Tournament) */
.player-list-section {
  margin-top: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

.player-list-section h4 {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.player-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

.player-list-grid .player-item {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 4px 0;
}

.player-item .player-num {
  color: var(--text-muted);
  margin-right: 4px;
  font-size: 0.72rem;
}

/* ================================================
   CONTROLS
   ================================================ */
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.run-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.run-btn {
  position: relative;
  padding: 16px 0;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.run-btn:active {
  transform: scale(0.93);
  background: rgba(255, 255, 255, 0.08);
}

.run-btn.four {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--green);
}

.run-btn.six {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: var(--purple);
}

.extra-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.extra-btn {
  position: relative;
  padding: 14px 0;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.extra-btn:active {
  transform: scale(0.93);
}

/* Custom Undo Button Style */
.extra-btn.undo {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.extra-btn.undo:active {
  background: rgba(255, 255, 255, 0.1);
}

.extra-btn.wide {
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.3);
  color: var(--yellow);
}

.extra-btn.noball {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: var(--orange);
}

.extra-btn.out {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--red);
}

/* ================================================
   TOGGLE SWITCH — Run Options
   ================================================ */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.toggle-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.toggle-row:first-of-type {
  padding-top: 0;
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.toggle-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.toggle-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 300;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.toggle-switch input:checked+.toggle-slider {
  background: rgba(0, 229, 255, 0.15);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow), 0 0 4px rgba(0, 229, 255, 0.5);
}

.toggle-switch input:checked+.toggle-slider::before {
  transform: translateX(24px);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ================================================
   EXTRAS STAT — Emphasis
   ================================================ */
.stat-item-extras .stat-label {
  color: var(--orange);
}

.stat-item-extras .stat-value {
  color: var(--orange);
}

/* ================================================
   EXTRA RUN BUTTON (+1 Extra)
   ================================================ */
.extra-run-row {
  display: flex;
  justify-content: center;
}

.extra-run-btn {
  position: relative;
  padding: 13px 36px;
  border-radius: 50px;
  background: rgba(249, 115, 22, 0.15);
  border: 1.5px solid rgba(249, 115, 22, 0.5);
  color: var(--orange);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  will-change: transform;
}

.extra-run-btn:active {
  transform: scale(0.93);
  background: rgba(249, 115, 22, 0.28);
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.5);
}

.extra-run-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.3);
  opacity: 0.6;
  pointer-events: none;
  animation: extraBtnGlow 2.5s ease-in-out infinite;
}

@keyframes extraBtnGlow {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

/* ================================================
   PENDING EXTRA MODE — hint + run button highlight
   ================================================ */
.pending-hint {
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: var(--radius-sm);
  color: var(--yellow);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 14px;
  letter-spacing: 0.3px;
  animation: fadeSlideIn 0.25s ease;
}

.run-btn.pending-highlight {
  border-color: rgba(250, 204, 21, 0.6);
  background: rgba(250, 204, 21, 0.08);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.25);
  color: var(--yellow);
}

/* ================================================
   BOTTOM ACTIONS
   ================================================ */
.match-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.action-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

.action-btn.delete-btn {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--red);
}

.action-btn.delete-btn:active {
  background: rgba(239, 68, 68, 0.2);
}

.viewer-mode .controls {
  display: none !important;
}

.viewer-mode .match-bottom-panel::before {
  content: "Viewer Mode";
  display: block;
  width: fit-content;
  margin: 0 auto 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ================================================
   MATCH END SCREEN
   ================================================ */
.match-end-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.celebration-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.celebration-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: particleFall linear forwards;
}

@keyframes particleFall {
  0% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 100vh, 0) rotate(720deg);
    opacity: 0;
  }
}

.winner-card {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: winnerSlideIn 0.5s ease;
}

@keyframes winnerSlideIn {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.trophy-icon {
  font-size: 4rem;
  will-change: transform;
  animation: trophyBounce 1.5s ease-in-out infinite;
}

@keyframes trophyBounce {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -10px, 0) scale(1.1);
  }
}

.winner-title {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: 12px;
  font-weight: 500;
}

.winner-team {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 8px 0 16px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.final-scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.final-score-line {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.final-score-line span {
  font-weight: 700;
  color: var(--text-primary);
}

.scorecard-over {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.scorecard-over > span {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scorecard-over > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.mini-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.mini-ball.four,
.mini-ball.boundary-four {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
}

.mini-ball.six,
.mini-ball.boundary-six {
  background: rgba(250, 204, 21, 0.22);
  color: #fde68a;
}

.mini-ball.wicket {
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
}

.mini-ball.wide,
.mini-ball.noball,
.mini-ball.extra {
  background: rgba(16, 185, 129, 0.2);
  color: #bbf7d0;
}

/* ================================================
   MODALS
   ================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 360px;
  will-change: transform, opacity;
  animation: modalIn 0.25s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateZ(0);
  }

  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

.modal h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.modal p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.modal-input {
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

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

.modal-error {
  color: var(--red);
  font-size: 0.82rem;
  min-height: 20px;
  margin-bottom: 8px;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-btn.cancel {
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.modal-btn.confirm {
  background: var(--accent);
  color: var(--bg-primary);
}

.modal-btn.danger {
  background: var(--red);
  color: #fff;
}

.share-modal {
  max-width: 390px;
}

.share-qr-img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 16px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
}

.share-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
}

.share-code-row span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.share-code-row strong {
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}

/* ================================================
   ANIMATION OVERLAY
   ================================================ */
.animation-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease, background 0.3s ease;
  overflow: hidden;
}

.animation-overlay.active {
  display: flex;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(10, 14, 26, 0.75);
}

.animation-content {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.animation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* --- Premium Ball Styling --- */
.premium-ball-wrapper {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.premium-ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff2e54, #b50e29 60%, #5d0411 100%);
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.5), 
    inset -10px -10px 25px rgba(0,0,0,0.8),
    inset 10px 10px 20px rgba(255,255,255,0.4);
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.premium-ball::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #fff,
    #fff 4px,
    #b50e29 4px,
    #b50e29 8px
  );
  transform: translateX(-50%) rotateY(0deg);
  border-radius: 3px;
  opacity: 0.8;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.premium-ball::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #fff,
    #fff 4px,
    #b50e29 4px,
    #b50e29 8px
  );
  transform: translateX(-50%) rotateY(90deg);
  border-radius: 3px;
  opacity: 0.4;
}

.animate-six-ball {
  animation: sixBallSpin 1.08s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes sixBallSpin {
  0% {
    transform: translate3d(0, 0, 0) scale(0.1) rotate(0deg);
    opacity: 0;
  }
  45% {
    transform: translate3d(0, 0, 0) scale(1.8) rotate(360deg);
    opacity: 1;
    filter: blur(0px);
  }
  65% {
    transform: translate3d(0, 0, 0) scale(1.6) rotate(540deg);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(6) rotate(720deg);
    opacity: 0;
    filter: blur(15px);
  }
}

.animate-four-ball {
  animation: fourBallBounce 1.15s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes fourBallBounce {
  0% {
    transform: translate3d(-150px, -150px, 0) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: translate3d(-40px, 60px, 0) scale(0.8) rotate(180deg);
    opacity: 1;
  }
  45% {
    transform: translate3d(20px, 0px, 0) scale(1.1) rotate(270deg);
    opacity: 1;
  }
  65% {
    transform: translate3d(80px, 80px, 0) scale(1.4) rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(5) rotate(450deg);
    opacity: 0;
    filter: blur(10px);
  }
}

/* --- Boundary Flash --- */
.boundary-flash {
  position: absolute;
  inset: 0;
  border: 15px solid var(--green);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.active-boundary-flash {
  animation: boundaryFlash 0.48s ease-out forwards;
}

@keyframes boundaryFlash {
  0% { opacity: 0; transform: scale(1.05); }
  20% { opacity: 1; transform: scale(1); }
  40% { opacity: 0.5; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Event Texts --- */
.fairy-six-text {
  font-size: 5.5rem;
  font-weight: 950;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffe600, #ff5e00, #ff0077, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(255, 94, 0, 0.6)) drop-shadow(0 0 30px rgba(168, 85, 247, 0.4));
  animation: textRevealSix 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.68s forwards;
  opacity: 0;
  transform: scale(0.5);
  letter-spacing: 2px;
  will-change: transform, opacity;
}

@keyframes textRevealSix {
  0% { opacity: 0; transform: scale(0.5) rotate(-5deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.fairy-four-text {
  font-size: 5.5rem;
  font-weight: 950;
  text-transform: uppercase;
  background: linear-gradient(135deg, #00ff66, #22c55e, #00e5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(0, 255, 102, 0.6)) drop-shadow(0 0 30px rgba(0, 229, 255, 0.4));
  animation: textRevealFour 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.7s forwards;
  opacity: 0;
  transform: scale(0.5);
  letter-spacing: 2px;
  will-change: transform, opacity;
}

@keyframes textRevealFour {
  0% { opacity: 0; transform: scale(0.5) rotate(5deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- Wicket Animation (Out) --- */
.wicket-wrapper {
  position: absolute;
  width: 200px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 8;
  perspective: 1000px;
}

.stump-container {
  display: flex;
  justify-content: space-between;
  width: 110px;
  height: 140px;
  position: relative;
  transform-style: preserve-3d;
}

.stump {
  width: 14px;
  height: 140px;
  background: linear-gradient(to right, #e0a96d, #b88b5c, #916d48);
  border-radius: 7px/4px;
  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.2), 3px 5px 10px rgba(0,0,0,0.5);
  position: absolute;
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stump.left {
  left: 10px;
}
.stump.middle {
  left: 48px;
}
.stump.right {
  left: 86px;
}

.stump.middle-bottom {
  left: 48px;
  bottom: 0;
  height: 55px;
  display: none;
}

.stump.middle-top {
  left: 48px;
  bottom: 55px;
  height: 85px;
  display: none;
  transform-origin: bottom center;
}

.bail-container {
  position: absolute;
  top: -12px;
  left: 6px;
  width: 98px;
  height: 12px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.bail {
  width: 44px;
  height: 8px;
  background: linear-gradient(to bottom, #e0a96d, #916d48);
  border-radius: 4px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  position: absolute;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bail.left-bail {
  left: 3px;
}

.bail.right-bail {
  left: 51px;
}

.shatter-left-stump {
  animation: shatterLeftStump 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.shatter-right-stump {
  animation: shatterRightStump 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.shatter-middle-top {
  animation: shatterMiddleTop 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.shatter-left-bail {
  animation: shatterLeftBail 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.shatter-right-bail {
  animation: shatterRightBail 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shatterLeftStump {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-22deg) translate3d(-8px, 0, 10px); }
}

@keyframes shatterRightStump {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(22deg) translate3d(8px, 0, 10px); }
}

@keyframes shatterMiddleTop {
  0% { transform: rotate(0deg) translate3d(0,0,0); }
  100% { transform: rotate(50deg) translate3d(20px, -25px, 50px); opacity: 0.7; }
}

@keyframes shatterLeftBail {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-35px, -80px, 80px) rotate(-320deg); opacity: 0; }
}

@keyframes shatterRightBail {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(35px, -80px, 80px) rotate(380deg); opacity: 0; }
}

.out-ball {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff2e54, #5d0411);
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  opacity: 0;
}

.animate-out-ball {
  animation: outBallFly 0.68s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes outBallFly {
  0% {
    transform: translate3d(-100px, 150px, 0) scale(1.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, -65px, 0) scale(0.85);
    opacity: 1;
    filter: drop-shadow(0 0 8px #fff);
  }
}

.wicket-impact-flash {
  position: absolute;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #fff 10%, rgba(255, 255, 255, 0.8) 40%, transparent 70%);
  border-radius: 50%;
  top: 55px;
  left: 75px;
  z-index: 10;
  opacity: 0;
  transform: scale(0.1);
  pointer-events: none;
}

.animate-wicket-flash {
  animation: wicketFlash 0.48s ease-out forwards;
}

@keyframes wicketFlash {
  0% { transform: scale(0.1); opacity: 0; }
  25% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

.shattered-out-text {
  font-size: 5.5rem;
  font-weight: 950;
  text-transform: uppercase;
  color: #ef4444;
  text-shadow: 0 0 20px #ef4444, 0 0 45px #7f1d1d;
  animation: textRevealOut 0.78s cubic-bezier(0.19, 1, 0.22, 1) 0.55s forwards;
  opacity: 0;
  transform: scale(0.3);
  letter-spacing: 4px;
  will-change: transform, opacity;
}

@keyframes textRevealOut {
  0% { opacity: 0; transform: scale(0.3); }
  65% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Extras Animations (Wide / No Ball) --- */
.neon-wide-text {
  font-size: 4.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #facc15;
  text-shadow: 0 0 10px #facc15, 0 0 30px #ca8a04;
  animation: wideTextIn 0.85s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  letter-spacing: 3px;
  will-change: transform, opacity;
}

@keyframes wideTextIn {
  0% { opacity: 0; transform: translateY(-40px) scale(0.75); }
  70% { opacity: 1; transform: translateY(8px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.neon-noball-text {
  font-size: 4.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #f97316;
  text-shadow: 0 0 10px #f97316, 0 0 30px #c2410c;
  animation: noballTextIn 0.85s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  letter-spacing: 2px;
  will-change: transform, opacity;
}

@keyframes noballTextIn {
  0% { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.crease-wireframe {
  position: absolute;
  width: 220px;
  height: 120px;
  border-bottom: 4px solid rgba(255,255,255,0.25);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 7;
}

.crease-wide-line-left {
  position: absolute;
  bottom: 0;
  left: 20px;
  height: 30px;
  width: 4px;
  background: rgba(250, 204, 21, 0.35);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.2);
}

.crease-wide-line-right {
  position: absolute;
  bottom: 0;
  right: 20px;
  height: 30px;
  width: 4px;
  background: rgba(250, 204, 21, 0.35);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.2);
}

.wide-ball-path {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #facc15, #ca8a04);
  position: absolute;
  z-index: 8;
  box-shadow: 0 0 12px #facc15;
  opacity: 0;
}

.animate-wide-path-left {
  animation: widePathLeft 0.95s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.animate-wide-path-right {
  animation: widePathRight 0.95s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes widePathLeft {
  0% { transform: translate3d(0px, 120px, 0) scale(1.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(-85px, -30px, 0) scale(0.65); opacity: 0; }
}

@keyframes widePathRight {
  0% { transform: translate3d(0px, 120px, 0) scale(1.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(85px, -30px, 0) scale(0.65); opacity: 0; }
}

.noball-foot {
  position: absolute;
  width: 70px;
  height: 28px;
  background: rgba(249, 115, 22, 0.2);
  border: 2px solid #f97316;
  border-radius: 35px 8px 8px 15px;
  z-index: 8;
  transform-origin: bottom right;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
  opacity: 0;
}

.animate-noball-foot {
  animation: noballFootStep 0.92s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes noballFootStep {
  0% { transform: translate3d(-90px, -40px, 0) rotate(-18deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate3d(25px, 15px, 0) rotate(0deg); opacity: 1; }
}

.crease-danger-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.4);
}

.crease-danger-line.active {
  animation: creaseDanger 0.8s ease-in-out infinite;
}

@keyframes creaseDanger {
  0%, 100% { background-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
  50% { background-color: rgba(239, 68, 68, 1); box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

.premium-event-sub {
  font-size: 1.4rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-top: 20px;
  opacity: 0;
  animation: premiumSubFade 0.7s ease forwards 0.68s;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  will-change: transform, opacity;
}

@keyframes premiumSubFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ================================================
   RESPONSIVE
   ================================================ */
@media (min-width: 500px) {
  .run-buttons {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Mobile optimization for setup page */
@media (max-width: 400px) {
  .setup-header-card {
    padding: 20px 12px 16px;
  }

  .setup-header-icon {
    font-size: 2.4rem;
  }

  .setup-title-premium {
    font-size: 1.5rem;
  }

  .setup-subtitle {
    font-size: 0.78rem;
  }

  .teams-row {
    flex-direction: column;
    gap: 8px;
  }

  .teams-vs-badge {
    align-self: center;
    width: 32px;
    height: 32px;
    font-size: 0.65rem;
  }

  .setup-card {
    padding: 12px;
  }

  .setup-card-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .config-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .setup-form {
    gap: min(12px, 1.5vh);
  }

  .form-group input,
  .premium-select {
    padding: 12px 14px;
    font-size: 0.95rem;
  }
}

@media (max-height: 680px) {
  .logo-icon {
    font-size: 48px;
  }

  .app-title {
    font-size: 1.8rem;
  }

  .home-container {
    gap: 32px;
  }

  .score-runs {
    font-size: 2.8rem;
  }

  .run-btn {
    padding: 12px 0;
  }

  .extra-btn {
    padding: 10px 0;
  }
}

/* Disable hover effects on touch devices */
@media (hover: none) {
  .mode-btn:hover .mode-btn-bg {
    opacity: 0.12;
  }
}

/* ================================================
   CINEMATIC MATCH INTRO
   ================================================ */
.cinematic-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at center, #1e0030 0%, #0a0e1a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cinematic-intro.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-bg-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 40%, rgba(0, 229, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(255, 0, 106, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(250, 204, 21, 0.1) 0%, transparent 50%);
  z-index: 1;
  animation: bgPulse 5s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.intro-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

.intro-match-type {
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: 800;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(-30px);
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
}

.cinematic-intro:not(.hidden) .intro-match-type {
  animation: fadeDownIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.intro-teams-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.intro-team {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.2);
  max-width: 40vw;
  word-wrap: break-word;
  line-height: 1.1;
}

.intro-team-a {
  transform: translateX(-80px) scale(0.9);
}

.intro-team-b {
  transform: translateX(80px) scale(0.9);
}

.cinematic-intro:not(.hidden) .intro-team-a {
  animation: slideInLeft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards, popScaleIntro 0.4s ease 1s forwards;
}

.cinematic-intro:not(.hidden) .intro-team-b {
  animation: slideInRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards, popScaleIntro 0.4s ease 1s forwards;
}

@keyframes popScaleIntro {
  to {
    transform: translateX(0) scale(1.05) translateZ(0);
  }
}

.intro-vs {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--red);
  font-style: italic;
  opacity: 0;
  transform: scale(0) rotate(-15deg);
  text-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
}

.cinematic-intro:not(.hidden) .intro-vs {
  animation: zoomFlash 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
}

.intro-details {
  font-size: 1.2rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(20px);
}

.cinematic-intro:not(.hidden) .intro-details {
  animation: fadeUpIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s forwards;
}

.intro-sub-details {
  font-size: 0.95rem;
  color: var(--accent);
  margin-top: 15px;
  letter-spacing: 1px;
  opacity: 0;
}

.cinematic-intro:not(.hidden) .intro-sub-details {
  animation: fadeIn 0.8s ease 1.8s forwards;
}

.intro-skip-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
}

.cinematic-intro:not(.hidden) .intro-skip-btn {
  animation: fadeIn 1s ease 1.5s forwards;
}

.intro-skip-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Animations Core */
@keyframes fadeDownIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomFlash {
  50% {
    opacity: 1;
    transform: scale(1.3);
    text-shadow: 0 0 30px rgba(239, 68, 68, 1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .intro-team {
    font-size: 1.8rem;
  }

  .intro-vs {
    font-size: 1.5rem;
  }

  .intro-teams-container {
    gap: 1rem;
    flex-direction: column;
  }

  .intro-team-a {
    transform: translateY(-30px);
  }

  .intro-team-b {
    transform: translateY(30px);
  }

  .intro-skip-btn {
    bottom: 20px;
    right: 20px;
  }

  @keyframes slideInLeft {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInRight {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ================================================
   ANIMATED PITCH LAYOUT (60/40 Split)
   ================================================ */

.match-container.with-pitch {
  height: 100dvh;
  margin: 0 auto;
  padding: 0;
  max-width: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pitch-container {
  flex: 0 0 20%;
  position: relative;
  width: 90%;
  max-width: 480px;
  margin: 12px auto 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.2), transparent 35%),
    radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.2), transparent 35%),
    repeating-linear-gradient(45deg, #134e1e 0 24px, #185e25 24px 48px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  box-shadow: inset 0 -10px 30px rgba(0,0,0,0.5);
}

/* Stadium Boundary Rope */
.pitch-container::before {
  content: '';
  position: absolute;
  width: 106%;
  height: 125%;
  top: -12%;
  left: -3%;
  border: 3px solid rgba(255, 255, 255, 0.32);
  border-radius: 50% / 22%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15), inset 0 0 15px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* Scrolling LED Board */
.pitch-container::after {
  content: '⚡ QUICK CRICKET SCORE • PREMIUM LIVE SCORING • FOLLOW ON INSTAGRAM @IAM.SANUWAR • REAL-TIME FIREBASE SYNC • WORM & MANHATTAN GRAPH STATS • ⚡ QUICK CRICKET SCORE • PREMIUM LIVE SCORING • FOLLOW ON INSTAGRAM @IAM.SANUWAR • REAL-TIME FIREBASE SYNC • WORM & MANHATTAN GRAPH STATS •';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  background: rgba(8, 12, 22, 0.95);
  color: #00e5ff;
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 3.5px 0;
  text-transform: uppercase;
  border-bottom: 2px solid #00e5ff;
  box-shadow: 0 3px 8px rgba(0, 229, 255, 0.3);
  z-index: 15;
  white-space: nowrap;
  animation: scrollAds 24s linear infinite;
}

@keyframes scrollAds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pitch Surface & Depth */
.pitch-surface {
  position: relative;
  width: 86%;
  height: clamp(75px, 12vh, 102px);
  background:
    /* Bowling foothole wear patches */
    radial-gradient(ellipse at 18% 50%, rgba(92, 63, 22, 0.22) 0%, transparent 22%),
    radial-gradient(ellipse at 82% 50%, rgba(92, 63, 22, 0.22) 0%, transparent 22%),
    /* Soil clay turf mix */
    linear-gradient(to right, 
      #bfa576 0%, 
      #d0b98f 15%, 
      #dfcfad 50%, 
      #d0b98f 85%, 
      #bfa576 100%
    );
  border-radius: 8px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  transform: rotateX(20deg);
  transform-style: preserve-3d;
  box-shadow: 
    0 12px 28px rgba(0, 0, 0, 0.6), 
    inset 0 0 16px rgba(100, 68, 28, 0.3);
}

/* Pitch Creases */
.pitch-strip {
  position: absolute;
  inset: 0;
}

.crease {
  position: absolute;
  width: 2.5px;
  height: 100%;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.left-crease {
  left: 15%;
}

.right-crease {
  right: 15%;
}

/* Return creases using pseudo-elements */
.crease::before,
.crease::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
}

.left-crease::before { top: 0; left: 0; }
.left-crease::after { bottom: 0; left: 0; }
.right-crease::before { top: 0; right: 0; }
.right-crease::after { bottom: 0; right: 0; }

/* Stumps */
.stumps {
  position: absolute;
  width: 14px;
  height: 38px;
  top: 50%;
  transform-origin: bottom center;
  transform: translateY(-90%) rotateX(-20deg); /* Stand upright */
  z-index: 10;
  background-image:
    linear-gradient(to right,
      #d99f4d 0px, #d99f4d 2.5px,
      transparent 2.5px, transparent 5px,
      #d99f4d 5px, #d99f4d 7.5px,
      transparent 7.5px, transparent 10px,
      #d99f4d 10px, #d99f4d 12.5px);
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s ease;
}

.stumps::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -1px;
  width: 16px;
  height: 3px;
  background: #c2883c;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.left-stumps {
  left: 15%;
  margin-left: -7px;
}

.right-stumps {
  right: 15%;
  margin-right: -7px;
}

/* Pitch Runners (Player Graphics) */
.runner {
  position: absolute;
  width: 32px;
  height: 55px;
  left: 50%;
  top: 50%;
  transform-origin: bottom center;
  transform: translateY(-96%) rotateX(-20deg); /* Stand upright */
  background-color: transparent;
  transition: left 1s ease-in-out, scale 0.2s ease;
  z-index: 11;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.5));
}

.runner[data-dir="left"] {
  scale: -1 1;
}

/* Realistic CSS Player Graphic */
.player-graphic {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Base parts */
.p-head {
  position: absolute;
  width: 14px;
  height: 16px;
  border-radius: 50%;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.p-cap {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 18px;
  height: 10px;
  background: inherit;
  border-radius: 8px 8px 0 0;
}

.p-cap::after {
  content: '';
  position: absolute;
  top: 4px;
  right: -6px;
  width: 10px;
  height: 4px;
  background: inherit;
  border-radius: 2px;
}

.p-torso {
  position: absolute;
  width: 14px;
  height: 22px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  z-index: 8;
}

.p-arm {
  position: absolute;
  width: 6px;
  height: 18px;
  border-radius: 3px;
  top: 20px;
  transform-origin: top center;
}

.p-arm-back {
  left: 8px;
  z-index: 7;
  filter: brightness(0.8);
}

.p-arm-front {
  left: 16px;
  z-index: 9;
}

.p-leg {
  position: absolute;
  width: 6px;
  height: 22px;
  background: #fff;
  /* white pads */
  border-radius: 3px;
  top: 40px;
  transform-origin: top center;
}

.p-leg.p-leg-back {
  left: 10px;
  z-index: 6;
  filter: brightness(0.8);
}

.p-leg.p-leg-front {
  left: 16px;
  z-index: 10;
  border-left: 2px solid #ccc;
}

.p-bat {
  position: absolute;
  width: 5px;
  height: 35px;
  background: #d4af37;
  border-radius: 2px;
  top: 15px;
  left: 10px;
  z-index: 8;
  transform-origin: top center;
  transform: rotate(-25deg);
}

/* Colors for specific teams */
.runner-a .p-head,
.runner-a .p-cap,
.runner-a .p-torso,
.runner-a .p-arm {
  background: var(--accent);
}

.runner-b .p-head,
.runner-b .p-cap,
.runner-b .p-torso,
.runner-b .p-arm {
  background: var(--red);
}

/* Layout lanes */
.runner-a {
  top: 30%;
  left: 18%;
}

.runner-b {
  top: 70%;
  left: 80%;
}

/* Realistic Running Animation Keyframes */
.runner.is-running {
  animation: runTranslate 0.4s infinite linear;
}

.runner.is-running .p-torso {
  animation: runTorso 0.4s infinite alternate ease-in-out;
}

.runner.is-running .p-head {
  animation: runHead 0.4s infinite alternate ease-in-out;
}

.runner.is-running .p-arm-front {
  animation: runArmFront 0.4s infinite alternate ease-in-out;
}

.runner.is-running .p-arm-back {
  animation: runArmBack 0.4s infinite alternate ease-in-out;
}

.runner.is-running .p-leg-front {
  animation: runLegFront 0.4s infinite alternate ease-in-out;
}

.runner.is-running .p-leg-back {
  animation: runLegBack 0.4s infinite alternate ease-in-out;
}

.runner.is-running .p-bat {
  animation: runBat 0.4s infinite alternate ease-in-out;
}

@keyframes runTranslate {

  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -4px;
  }
}

@keyframes runTorso {
  0% {
    transform: translateX(-50%) rotate(10deg);
  }

  100% {
    transform: translateX(-50%) rotate(18deg);
  }
}

@keyframes runHead {
  0% {
    transform: translateX(-50%) rotate(0deg);
    top: 4px;
  }

  100% {
    transform: translateX(-50%) rotate(5deg);
    top: 5px;
  }
}

@keyframes runArmFront {
  0% {
    transform: rotate(50deg);
  }

  100% {
    transform: rotate(-50deg);
  }
}

@keyframes runArmBack {
  0% {
    transform: rotate(-50deg);
  }

  100% {
    transform: rotate(50deg);
  }
}

@keyframes runLegFront {
  0% {
    transform: rotate(-40deg);
  }

  100% {
    transform: rotate(30deg);
  }
}

@keyframes runLegBack {
  0% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(-40deg);
  }
}

@keyframes runBat {
  0% {
    transform: rotate(-35deg) scale(1) translateY(5px);
  }

  100% {
    transform: rotate(15deg) scale(0.9) translateY(0px);
  }
}

/* Four & Six Event Overlay on Pitch */
.pitch-event-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 5px;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  transform: translateZ(50px) scale(0.5);
  /* 3D popup */
}

.pitch-event-overlay.show-four {
  color: var(--green);
  text-shadow: 0 0 30px var(--green-glow), 0 0 60px var(--green-glow);
  animation: explodeEvent 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pitch-event-overlay.show-six {
  color: var(--purple);
  text-shadow: 0 0 30px var(--purple-glow), 0 0 60px var(--purple-glow);
  animation: explodeEvent 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pitch-event-overlay.show-out {
  color: var(--red);
  text-shadow: 0 0 24px var(--red-glow), 0 0 58px rgba(239, 68, 68, 0.6);
  animation: pitchEventSmash 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pitch-event-overlay.show-wide {
  color: var(--yellow);
  text-shadow: 0 0 24px var(--yellow-glow), 0 0 54px rgba(250, 204, 21, 0.5);
  animation: pitchEventSlide 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pitch-event-overlay.show-noball {
  color: var(--orange);
  text-shadow: 0 0 24px var(--orange-glow), 0 0 54px rgba(249, 115, 22, 0.5);
  animation: pitchEventStamp 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes explodeEvent {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(0);
  }

  20% {
    opacity: 1;
    transform: translateZ(100px) scale(1.2);
  }

  80% {
    opacity: 1;
    transform: translateZ(100px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateZ(50px) scale(0.8);
  }
}

@keyframes pitchEventSmash {
  0% { opacity: 0; transform: translateZ(0) scale(0.2) rotate(-10deg); }
  22% { opacity: 1; transform: translateZ(120px) scale(1.25) rotate(3deg); }
  34% { transform: translateZ(120px) scale(1.1) rotate(-2deg); }
  78% { opacity: 1; transform: translateZ(100px) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateZ(40px) scale(0.8) rotate(8deg); }
}

@keyframes pitchEventSlide {
  0% { opacity: 0; transform: translate3d(-28px, 0, 0) scale(0.72); }
  24% { opacity: 1; transform: translate3d(0, 0, 80px) scale(1.08); }
  78% { opacity: 1; transform: translate3d(0, 0, 80px) scale(1); }
  100% { opacity: 0; transform: translate3d(28px, 0, 30px) scale(0.86); }
}

@keyframes pitchEventStamp {
  0% { opacity: 0; transform: translateZ(0) scale(1.7) rotate(-4deg); filter: blur(8px); }
  22% { opacity: 1; transform: translateZ(120px) scale(1) rotate(0); filter: blur(0); }
  78% { opacity: 1; transform: translateZ(100px) scale(1); }
  100% { opacity: 0; transform: translateZ(20px) scale(0.82); }
}

/* 40% Bottom Section: Scoreboard & Controls */
.match-bottom-panel {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: min(12px, 1.5vh);
  background: var(--bg-primary);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-top: -16px;
  position: relative;
  z-index: 20;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.5);
}

/* Adjustments for the inner scoreboard to fit 40% space */
.match-container.with-pitch .scoreboard {
  margin-bottom: 0;
  padding: min(12px, 1.5vh);
}

.match-container.with-pitch .score-runs {
  font-size: min(2.5rem, 6vh);
}

.match-container.with-pitch .score-wickets,
.match-container.with-pitch .score-separator {
  font-size: min(1.8rem, 4.5vh);
}

.match-container.with-pitch .controls {
  gap: 6px;
}

.match-container.with-pitch .run-btn {
  padding: min(10px, 1.5vh) 0;
  font-size: min(1.05rem, 3vh);
}

.match-container.with-pitch .extra-btn {
  padding: min(8px, 1.2vh) 0;
  font-size: min(0.85rem, 2.5vh);
}

.match-container.with-pitch .extra-run-btn {
  padding: 8px 24px;
}

.match-container.with-pitch .last-over-section {
  display: flex;
  /* Restored for mobile view */
  margin-top: 4px;
}

.match-container.with-pitch .last-over-section .ball-tag {
  min-width: 22px;
  height: 22px;
  font-size: 0.65rem;
  padding: 0 4px;
}

.match-container.with-pitch .last-over-label {
  font-size: 0.68rem;
}

/* Recent Overs scoreboard styles */
.recent-overs-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  padding-top: 6px;
  overflow: hidden;
}

.recent-overs-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.recent-overs-list {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.recent-overs-list::-webkit-scrollbar {
  display: none;
}

.recent-over-block {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px 6px;
  gap: 6px;
  white-space: nowrap;
}

.recent-over-number {
  font-size: 0.65rem;
  font-weight: 800;
  color: #00e5ff;
}

.recent-over-balls {
  display: flex;
  gap: 3px;
  align-items: center;
}

.recent-overs-list .mini-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0;
  width: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
}

.recent-overs-list .mini-ball.four {
  background: rgba(16, 185, 129, 0.25);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.recent-overs-list .mini-ball.six {
  background: rgba(168, 85, 247, 0.25);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.recent-overs-list .mini-ball.wicket {
  background: rgba(239, 68, 68, 0.25);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.recent-overs-list .mini-ball.wide,
.recent-overs-list .mini-ball.noball {
  background: rgba(250, 204, 21, 0.18);
  color: #fef08a;
  border: 1.5px solid rgba(250, 204, 21, 0.3);
  border-radius: 4px;
}

.recent-over-runs {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 4px;
}

/* For larger/taller screens, we can restore standard sizes in bottom panel */
@media (min-height: 800px) {
  .match-container.with-pitch .score-runs {
    font-size: 3.2rem;
  }

  .match-container.with-pitch .score-wickets {
    font-size: 2.2rem;
  }

  .match-container.with-pitch .run-btn {
    padding: 14px 0;
  }

  .match-container.with-pitch .last-over-section {
    display: flex;
  }
}

/* Banner Menu styles */
.live-match-banner {
  position: relative;
}

.banner-menu-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.banner-menu-dropdown {
  position: absolute;
  top: 50px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.banner-menu-dropdown.hidden {
  display: none !important;
}

.banner-menu-dropdown .dropdown-item {
  text-align: left;
  min-width: 140px;
}

body.theme-basic .banner-menu-dropdown {
  background: #ffffff;
}

body.theme-basic .banner-menu-btn {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

/* ================================================
   PINNED SCORE FLOATING WIDGET
   Universal: works on iPhone, Android, all browsers
   ================================================ */

.pinned-widget {
  /* Fixed bottom-right pill — never blocks main UI */
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 10000;

  /* Pill sizing */
  min-width: 180px;
  max-width: 230px;

  /* Premium dark glass */
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 18px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 229, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Hidden by default — slides up when active */
  transform: translateY(110%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.28s ease;
  will-change: transform, opacity;
}

.pinned-widget:not(.hidden) {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Hide on desktop — mobile only feature */
@media (min-width: 769px) {
  .pinned-widget {
    display: none !important;
  }
}

/* === Inner layout === */
.pw-inner {
  padding: 10px 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Top row: live dot + team names + close */
.pw-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pw-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4444;
  flex-shrink: 0;
  animation: pw-pulse 1.4s infinite;
}

@keyframes pw-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(255, 68, 68, 0);
  }
}

.pw-live-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #ff4444;
  letter-spacing: 1.2px;
  flex-shrink: 0;
}

.pw-teams {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.pw-close:active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Score row */
.pw-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pw-score {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
  letter-spacing: -0.5px;
  line-height: 1;
}

.pw-overs {
  font-size: 0.85rem;
  font-weight: 700;
  color: #00e5ff;
}

.pw-left {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  margin-left: auto;
}

/* Basic/light theme overrides */
body.theme-basic .pinned-widget {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 100, 200, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

body.theme-basic .pw-score {
  color: #111;
  text-shadow: none;
}

body.theme-basic .pw-overs {
  color: #0070f3;
}

body.theme-basic .pw-teams {
  color: rgba(0, 0, 0, 0.5);
}

body.theme-basic .pw-left {
  color: rgba(0, 0, 0, 0.35);
}

body.theme-basic .pw-close {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.06);
}

body.theme-basic .pw-live-dot {
  background: #e53e3e;
}

body.theme-basic .pw-live-label {
  color: #e53e3e;
}

/* ==========================================================
   PREMIUM LIVE MATCH CARDS — Compact Sports Broadcast Style
   ========================================================== */

.live-matches-container {
  padding: 0 0 4px 0;
  margin-bottom: 4px;
}

.live-match-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.06) 0%, rgba(10, 14, 26, 0.92) 60%, rgba(249, 115, 22, 0.06) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 14px;
  padding: 10px 14px 10px 14px;
  margin-bottom: 8px !important;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.10), 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  overflow: visible;
}

.live-match-banner:active,
.live-match-banner:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.22), 0 8px 30px rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 229, 255, 0.6);
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ff5252;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.live-badge span {
  width: 6px;
  height: 6px;
  background: #ff4444;
  border-radius: 50%;
  animation: livePulse 1.3s infinite;
  flex-shrink: 0;
}

@keyframes livePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(255, 68, 68, 0);
  }
}

/* Teams row */
.live-match-teams {
  font-size: 1.0rem;
  font-weight: 800;
  color: #f0f4ff;
  letter-spacing: 0.2px;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

/* Sub description */
.live-match-desc {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.8);
  margin-top: 3px;
}

/* Three-dot menu button */
.banner-menu-btn {
  position: absolute;
  top: 9px;
  right: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.banner-menu-btn:hover,
.banner-menu-btn:active {
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
}

/* Dropdown */
.banner-menu-dropdown {
  position: absolute;
  top: 42px;
  right: 8px;
  background: rgba(10, 14, 26, 0.97);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 10px;
  padding: 4px 0;
  z-index: 999;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.banner-menu-dropdown.hidden {
  display: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.dropdown-item:hover,
.dropdown-item:active {
  background: rgba(0, 229, 255, 0.1);
  color: #00e5ff;
}

/* ==========================================================
   CINEMATIC MATCH WIN SCREEN
   ========================================================== */

/* Full-screen bg */
.match-end-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 20%, rgba(249, 115, 22, 0.18) 0%, rgba(10, 14, 26, 1) 65%);
  overflow: hidden;
}

/* Canvas fireworks — fullscreen absolute overlay */
.fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Victory glow orb behind the card */
.victory-orb {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(250, 204, 21, 0.12) 40%, transparent 70%);
  animation: orbPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes orbPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* Winner card */
.winner-card {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 28px;
  max-width: 380px;
  width: 100%;
  background: rgba(10, 14, 26, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 24px;
  box-shadow: 0 0 60px rgba(249, 115, 22, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Trophy */
.trophy-icon-wrap {
  margin-bottom: 8px;
}

.trophy-icon-anim {
  font-size: 3.5rem;
  display: inline-block;
  animation: trophyBounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, trophyGlow 2s 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.8));
}

@keyframes trophyBounce {
  0% {
    transform: translateY(-60px) scale(0.6);
    opacity: 0;
  }

  70% {
    transform: translateY(8px) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes trophyGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.7));
  }

  50% {
    filter: drop-shadow(0 0 32px rgba(249, 115, 22, 1));
  }
}

/* Win message line */
.winner-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
  margin-bottom: 10px;
  animation: fadeSlideIn 0.5s 0.3s both;
}

/* ── Letter-drop team name ─────────────────────── */
.winner-team-letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-bottom: 14px;
}

.letter-drop {
  display: inline-block;
  font-size: clamp(2rem, 10vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(170deg, #fff 10%, #facc15 45%, #f97316 75%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.75));
  opacity: 0;
  transform: translateY(-80px) scale(0.7);
  animation: letterFall 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes letterFall {
  0% {
    opacity: 0;
    transform: translateY(-80px) scale(0.7);
  }

  70% {
    opacity: 1;
    transform: translateY(6px) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Congratulations message ───────────────────── */
.congrats-msg {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
  margin-bottom: 18px;
  opacity: 0;
  /* shown by JS after letter animation */
  will-change: opacity, transform;
}

/* Final scores block */
.final-scores {
  width: 100%;
  margin-bottom: 20px;
}

.final-score-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.final-score-line span {
  color: #94a3b8;
  font-weight: 700;
}

/* Confetti particles */
.celebration-particle {
  position: absolute;
  top: -12px;
  border-radius: 3px;
  animation: confettiFall linear forwards;
  pointer-events: none;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* Celebration bg wrapper */
.celebration-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

/* ==========================================================
   PREMIUM CRICKET SVG ICON — Logo Section
   ========================================================== */

.cricket-svg-icon {
  width: 88px;
  height: 88px;
  display: block;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.45)) drop-shadow(0 0 28px rgba(249, 115, 22, 0.25));
  animation: iconFloat 3.5s ease-in-out infinite, iconGlowPulse 2.8s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes iconGlowPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.4)) drop-shadow(0 0 24px rgba(249, 115, 22, 0.2));
  }

  50% {
    filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.7)) drop-shadow(0 0 40px rgba(249, 115, 22, 0.45));
  }
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* ==========================================================
   NEW CUSTOM FEATURE STYLES: SETUPS, TABS, CHARTS, REACTIONS
   ========================================================== */

.setup-section-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 1.2px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.15);
  padding-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.team-setup-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s ease;
}

.team-setup-card:focus-within {
  border-color: rgba(0, 229, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.jersey-color-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.jersey-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.jersey-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

/* Tab Panels Navigation */
.panel-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 30px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.panel-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 0;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  outline: none;
}

.panel-tab.active {
  background: linear-gradient(135deg, var(--accent), #0284c7);
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 229, 255, 0.2);
}

.tab-panelactive {
  animation: tabFadeIn 0.3s ease-out forwards;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

/* Charts styles */
.charts-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.chart-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.chart-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 160px;
}

/* Emoji reactions */
.cheering-reactions-wrapper {
  padding: 8px 4px;
}

.cheer-title {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}

.cheer-buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cheer-btn-trigger {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  outline: none;
}

.cheer-btn-trigger:active {
  transform: scale(0.9);
  background: rgba(0, 229, 255, 0.08);
  border-color: var(--accent);
}

.cheer-icon {
  font-size: 1.4rem;
}

.cheer-name {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Floating emojis particles */
.floating-emoji {
  position: absolute;
  bottom: 30px;
  font-size: 2.2rem;
  pointer-events: none;
  z-index: 100;
  animation: floatReaction 3.8s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
}

@keyframes floatReaction {
  0% {
    transform: translateY(0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translateY(-30px) scale(1.1) rotate(15deg);
  }
  100% {
    transform: translateY(-280px) scale(0.7) rotate(-25deg);
    opacity: 0;
  }
}

/* Pitch Fielders & Ball & LED stumps */
.pitch-surface {
  border: 2px solid rgba(255, 255, 255, 0.25);
  overflow: visible !important;
}

.team-emblem {
  font-size: 1.2rem;
  margin-right: 4px;
}

.pitch-fielder {
  position: absolute;
  width: 30px;
  height: 52px;
  z-index: 12;
  --fielder-color: #ef4444;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.5));
  transform-origin: bottom center;
  transition: transform 0.2s ease;
}

.fielder-keeper {
  top: 56%;
  left: 3.5%;
  transform: translateY(-90%) rotateX(-20deg) scale(0.95);
}

.fielder-bowler {
  top: 47%;
  right: 3.5%;
  transform: translateY(-90%) rotateX(-20deg) scaleX(-1);
}

.pitch-fielder .p-head,
.pitch-fielder .p-cap,
.pitch-fielder .p-torso,
.pitch-fielder .p-arm {
  background: var(--fielder-color);
}

.pitch-fielder .p-leg {
  background: #f8fafc;
}

.fielder-keeper .p-torso {
  height: 19px;
  top: 22px;
  transform: translateX(-50%) rotate(12deg);
}

.fielder-keeper .p-leg {
  top: 39px;
  height: 18px;
}

.fielder-keeper .p-arm-front,
.fielder-keeper .p-arm-back {
  top: 26px;
  height: 16px;
}

.fielder-keeper .p-arm-front {
  transform: rotate(-48deg);
}

.fielder-keeper .p-arm-back {
  transform: rotate(48deg);
}

.p-glove {
  position: absolute;
  top: 37px;
  width: 9px;
  height: 8px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.28);
  z-index: 12;
}

.glove-back {
  left: 2px;
}

.glove-front {
  right: 2px;
}

.p-ball-hand {
  position: absolute;
  top: 19px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.7);
  z-index: 14;
}

.fielder-bowler.is-bowling {
  animation: bowlerRunDelivery 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.fielder-bowler.is-bowling .p-arm-front {
  animation: bowlArmWhip 1.1s ease forwards;
}

.fielder-bowler.is-bowling .p-leg-front,
.fielder-bowler.is-bowling .p-leg-back {
  animation: bowlStride 0.32s ease-in-out 3 alternate;
}

.fielder-keeper.is-catching {
  animation: keeperTake 1.1s ease forwards;
}

.fielder-keeper.is-catching .p-glove {
  animation: gloveCatch 1.1s ease forwards;
}

@keyframes bowlerRunDelivery {
  0% { transform: translateY(-90%) rotateX(-20deg) translateX(0) scaleX(-1); }
  30% { transform: translateY(-90%) rotateX(-20deg) translateX(-20px) scaleX(-1) rotate(-8deg); }
  58% { transform: translateY(-90%) rotateX(-20deg) translateX(-30px) scaleX(-1) rotate(18deg); }
  78% { transform: translateY(-90%) rotateX(-20deg) translateX(-18px) scaleX(-1) rotate(6deg); }
  100% { transform: translateY(-90%) rotateX(-20deg) translateX(0) scaleX(-1); }
}

@keyframes bowlArmWhip {
  0% { transform: rotate(30deg); }
  45% { transform: rotate(-130deg); }
  70% { transform: rotate(-25deg); }
  100% { transform: rotate(20deg); }
}

@keyframes bowlStride {
  from { transform: rotate(-25deg); }
  to { transform: rotate(35deg); }
}

@keyframes keeperTake {
  0%, 100% { transform: translateY(-90%) rotateX(-20deg) scale(0.95); }
  55% { transform: translateY(-82%) rotateX(-20deg) translateX(8px) scale(0.98); }
}

@keyframes gloveCatch {
  0%, 45%, 100% { top: 37px; }
  65% { top: 28px; }
}

/* Outfield Tactical Fielders styling */
.field-fielder {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--fielder-color, #ef4444);
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: #ffffff;
  z-index: 4;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
}

.field-fielder:hover {
  transform: scale(1.25) translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.5), 0 0 8px var(--fielder-color);
}

/* Ball Delivery Physics (3D Bouncing) keyframes */
@keyframes deliveryDot {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  35% {
    left: 50%;
    top: 66%; /* Bounces on pitch */
    transform: scale(0.72);
  }
  75% {
    left: 18%;
    top: 44%; /* Hits bat height */
    transform: scale(0.85);
  }
  100% {
    left: 5%;
    top: 52%; /* Keeper catches */
    transform: scale(0.78);
    opacity: 0.9;
  }
}

@keyframes deliveryOut {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  35% {
    left: 50%;
    top: 66%;
    transform: scale(0.72);
  }
  75% {
    left: 15%;
    top: 50%; /* Hits stumps */
    transform: scale(0.8);
  }
  90% {
    left: 10%;
    top: 35%; /* Deflects up */
    transform: scale(0.78);
  }
  100% {
    left: 5%;
    top: 25%;
    transform: scale(0.7);
    opacity: 0;
  }
}

@keyframes deliveryFour {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  30% {
    left: 50%;
    top: 66%;
    transform: scale(0.72);
  }
  65% {
    left: 18%;
    top: 44%; /* Hits bat */
    transform: scale(0.85);
  }
  85% {
    left: -15%;
    top: 75%; /* Bounces in outfield */
    transform: scale(1.1);
  }
  100% {
    left: -50px;
    top: 85%; /* Passes boundary */
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes deliverySix {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  30% {
    left: 50%;
    top: 66%;
    transform: scale(0.72);
  }
  65% {
    left: 18%;
    top: 44%; /* Hits bat */
    transform: scale(0.85);
  }
  85% {
    left: -30px;
    top: -50px; /* High aerial trajectory */
    transform: scale(1.9);
  }
  100% {
    left: -100px;
    top: -100px;
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes deliveryRuns {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  35% {
    left: 50%;
    top: 66%;
    transform: scale(0.72);
  }
  70% {
    left: 18%;
    top: 44%;
    transform: scale(0.85);
  }
  100% {
    left: 45%;
    top: 10%; /* Rolls to outfield */
    transform: scale(0.65);
    opacity: 0;
  }
}

@keyframes deliveryWide {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  42% {
    left: 58%;
    top: 78%;
    transform: scale(0.72);
  }
  76% {
    left: 20%;
    top: 72%;
    transform: scale(0.8);
  }
  100% {
    left: 2%;
    top: 64%;
    transform: scale(0.72);
    opacity: 0.35;
  }
}

@keyframes deliveryNoBall {
  0% {
    left: 88%;
    top: 48%;
    transform: scale(0.9);
    opacity: 1;
  }
  28% {
    left: 68%;
    top: 64%;
    transform: scale(0.76);
  }
  48% {
    left: 49%;
    top: 55%;
    transform: scale(0.9);
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.2), 0 0 18px rgba(249, 115, 22, 0.8);
  }
  82% {
    left: 20%;
    top: 45%;
    transform: scale(0.82);
  }
  100% {
    left: 7%;
    top: 44%;
    transform: scale(0.72);
    opacity: 0;
  }
}

.pitch-ball {
  position: absolute;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #ff2c4b 0%, #b3001e 80%);
  border-radius: 50%;
  z-index: 15;
  box-shadow: 0 0 10px rgba(255, 44, 75, 0.8), 0 0 4px rgba(255, 44, 75, 0.4);
  will-change: left, top, transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.pitch-ball.animate-dot {
  animation: deliveryDot 0.72s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.pitch-ball.animate-out {
  animation: deliveryOut 0.72s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.pitch-ball.animate-four {
  animation: deliveryFour 0.86s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.pitch-ball.animate-six {
  animation: deliverySix 0.86s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.pitch-ball.animate-runs {
  animation: deliveryRuns 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.pitch-ball.animate-wide {
  animation: deliveryWide 0.86s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.pitch-ball.animate-noball {
  animation: deliveryNoBall 0.86s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.stumps.led-glow {
  animation: stumpsLEDGlow 0.8s ease-in-out 3 alternate;
}

.stumps.stump-break {
  animation: pitchStumpBreak 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pitchStumpBreak {
  0% {
    transform: translateY(-90%) rotateX(-20deg) rotateZ(0);
  }
  35% {
    transform: translateY(-90%) rotateX(-20deg) rotateZ(-8deg) scaleX(1.08);
  }
  58% {
    transform: translateY(-75%) rotateX(-20deg) rotateZ(24deg) scaleY(0.9);
  }
  100% {
    transform: translateY(-58%) rotateX(-20deg) rotateZ(-36deg) scaleY(0.82);
  }
}

@keyframes stumpsLEDGlow {
  0% {
    filter: drop-shadow(0 0 0px #ff0055);
    background-image: linear-gradient(to right, #d99f4d, transparent, #d99f4d);
  }
  100% {
    filter: drop-shadow(0 0 15px #ff0055) brightness(1.8);
    background-color: #ff0055;
    background-image: none;
  }
}

/* TV Broadcast Cinematic event labels styling overrides */
.animation-overlay.active {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.event-text {
  font-size: 5rem;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(255,255,255,0.4);
  letter-spacing: 4px;
}

.four-text {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.4));
  animation: textGlitchSwipe 0.5s ease forwards;
}

.six-text {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
  animation: textExplodeZoom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.out-text {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 25px rgba(239, 68, 68, 0.6));
  animation: outGlitchShake 0.4s infinite;
}

@keyframes textGlitchSwipe {
  0% { transform: scale(0.6) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

@keyframes textExplodeZoom {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.4) rotate(8deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes outGlitchShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(0px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Cinematic scoring event scenes */
.animation-content {
  width: min(92vw, 520px);
  min-height: 320px;
  display: grid;
  place-items: center;
}

.event-scene {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.event-scene .event-text {
  position: relative;
  z-index: 6;
  line-height: 0.9;
}

.event-scene .event-sub {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 6;
  transform: translateX(-50%);
  width: 100%;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  animation: eventSubLift 1.15s ease forwards;
}

.event-big-ball {
  position: absolute;
  width: 124px;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 2;
  background:
    radial-gradient(circle at 34% 28%, #ff8597 0 8%, transparent 9%),
    radial-gradient(circle at 65% 72%, #7f0018 0 18%, transparent 19%),
    radial-gradient(circle at 38% 35%, #ff2c4b 0, #b3001e 72%);
  box-shadow:
    inset -18px -24px 36px rgba(49, 0, 11, 0.45),
    inset 10px 10px 22px rgba(255, 255, 255, 0.18),
    0 18px 45px rgba(255, 44, 75, 0.45);
}

.event-big-ball::before,
.event-big-ball::after {
  content: '';
  position: absolute;
  inset: 18px 44px;
  border-left: 2px dashed rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  transform: rotate(24deg);
}

.event-big-ball::after {
  transform: rotate(-24deg);
}

.event-six-ball {
  animation: sixBallCharge 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.event-four-ball {
  width: 82px;
  animation: fourBallSkid 1.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.event-four-trail {
  position: absolute;
  left: 11%;
  top: 46%;
  width: 76%;
  height: 8px;
  border-radius: 999px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.85), transparent);
  filter: blur(2px);
  animation: trailFlash 1.25s ease forwards;
}

.event-boundary-rope {
  position: absolute;
  bottom: 78px;
  left: 12%;
  width: 76%;
  height: 7px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #fff 0 12px, #22c55e 12px 24px);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
  animation: ropeBounce 1.25s ease forwards;
}

.event-orbit {
  position: absolute;
  width: 220px;
  aspect-ratio: 1;
  border: 2px solid rgba(236, 72, 153, 0.38);
  border-radius: 50%;
  z-index: 1;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.45));
}

.orbit-one {
  animation: orbitSpinOne 1.55s ease forwards;
}

.orbit-two {
  width: 280px;
  border-color: rgba(250, 204, 21, 0.28);
  animation: orbitSpinTwo 1.55s ease forwards;
}

.event-sparkle {
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 4;
  background: #fff7ad;
  box-shadow: 0 0 14px #facc15, 0 0 28px rgba(250, 204, 21, 0.85);
  opacity: 0;
  animation: sparklePop 1.25s ease forwards;
}

.sparkle-1 { left: 16%; top: 23%; animation-delay: 0.08s; }
.sparkle-2 { left: 76%; top: 24%; animation-delay: 0.14s; }
.sparkle-3 { left: 24%; top: 62%; animation-delay: 0.2s; }
.sparkle-4 { left: 70%; top: 62%; animation-delay: 0.26s; }
.sparkle-5 { left: 46%; top: 16%; animation-delay: 0.32s; }
.sparkle-6 { left: 52%; top: 76%; animation-delay: 0.38s; }
.sparkle-7 { left: 12%; top: 48%; animation-delay: 0.44s; }
.sparkle-8 { left: 84%; top: 44%; animation-delay: 0.5s; }
.sparkle-9 { left: 34%; top: 32%; animation-delay: 0.56s; }
.sparkle-10 { left: 64%; top: 34%; animation-delay: 0.62s; }

.event-stump-stage {
  position: absolute;
  top: 58px;
  width: 210px;
  height: 160px;
  z-index: 3;
}

.event-stump {
  position: absolute;
  bottom: 18px;
  width: 18px;
  height: 118px;
  border-radius: 8px 8px 4px 4px;
  transform-origin: bottom center;
  background: linear-gradient(90deg, #9a5c21, #f6bf6b 45%, #8b4f1d);
  box-shadow: inset -3px 0 5px rgba(0, 0, 0, 0.24), 0 8px 18px rgba(0, 0, 0, 0.45);
}

.stump-one { left: 70px; animation: stumpOneBreak 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stump-two { left: 96px; animation: stumpTwoBreak 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stump-three { left: 122px; animation: stumpThreeBreak 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.event-bail {
  position: absolute;
  top: 18px;
  width: 58px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #facc15, #fef3c7, #b45309);
  z-index: 4;
}

.bail-left {
  left: 64px;
  animation: bailLeftFly 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bail-right {
  left: 94px;
  animation: bailRightFly 1.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.event-out-ball {
  position: absolute;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 186px;
  top: 82px;
  z-index: 5;
  background: radial-gradient(circle at 35% 30%, #ff8495, #d30026 55%, #5c0012);
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.8);
  animation: outBallImpact 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.event-dust {
  position: absolute;
  bottom: 18px;
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.75);
  filter: blur(1px);
  opacity: 0;
  z-index: 2;
}

.dust-one { left: 70px; animation: dustBurst 0.9s ease 0.35s forwards; }
.dust-two { left: 98px; animation: dustBurst 0.9s ease 0.42s forwards; }
.dust-three { left: 126px; animation: dustBurst 0.9s ease 0.48s forwards; }

.event-scene-out .event-text {
  margin-top: 160px;
}

.event-scene-extra {
  min-height: 300px;
}

.event-umpire {
  position: absolute;
  top: 34px;
  width: 180px;
  height: 140px;
  z-index: 3;
  animation: umpirePop 1.1s ease forwards;
}

.umpire-head {
  position: absolute;
  top: 0;
  left: 70px;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8d7b0, #bf7a4c);
  box-shadow: 0 -9px 0 #f8fafc;
}

.umpire-body {
  position: absolute;
  top: 48px;
  left: 60px;
  width: 62px;
  height: 86px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
}

.umpire-arm {
  position: absolute;
  top: 58px;
  width: 88px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f8fafc, #94a3b8);
  transform-origin: center right;
}

.umpire-arm.arm-left {
  left: 0;
  transform: rotate(0deg);
  animation: wideArmLeft 1.15s ease forwards;
}

.umpire-arm.arm-right {
  right: 0;
  transform-origin: center left;
  animation: wideArmRight 1.15s ease forwards;
}

.event-warning-ring {
  position: absolute;
  top: 30px;
  width: 162px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 10px solid rgba(249, 115, 22, 0.88);
  box-shadow: 0 0 36px rgba(249, 115, 22, 0.62), inset 0 0 28px rgba(249, 115, 22, 0.28);
  animation: warningRingPulse 1.15s ease forwards;
}

.event-crease-line {
  position: absolute;
  top: 108px;
  width: 260px;
  height: 9px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #fff 0 22px, rgba(255,255,255,0.25) 22px 34px);
  transform: rotate(-5deg);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.event-foot-mark {
  position: absolute;
  top: 72px;
  width: 46px;
  height: 86px;
  border-radius: 55% 45% 48% 52%;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(249, 115, 22, 0.82));
  transform: rotate(18deg);
  box-shadow: 0 0 26px rgba(249, 115, 22, 0.7);
  animation: footStamp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sixBallCharge {
  0% { transform: translate3d(0, 120px, 0) scale(0.16) rotate(-80deg); opacity: 0; }
  38% { transform: translate3d(0, -8px, 0) scale(1.22) rotate(28deg); opacity: 1; }
  72% { transform: translate3d(0, 0, 0) scale(1.05) rotate(120deg); opacity: 1; }
  100% { transform: translate3d(0, -220px, 0) scale(2.15) rotate(260deg); opacity: 0; }
}

@keyframes fourBallSkid {
  0% { transform: translate3d(-240px, 62px, 0) scale(0.35) rotate(-120deg); opacity: 0; }
  28% { opacity: 1; }
  72% { transform: translate3d(0, 22px, 0) scale(1.05) rotate(80deg); opacity: 1; }
  100% { transform: translate3d(250px, 72px, 0) scale(0.72) rotate(240deg); opacity: 0; }
}

@keyframes trailFlash {
  0% { transform: scaleX(0); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes ropeBounce {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  40% { transform: translateY(-10px); opacity: 1; }
}

@keyframes orbitSpinOne {
  0% { transform: scale(0.4) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.15) rotate(220deg); opacity: 0; }
}

@keyframes orbitSpinTwo {
  0% { transform: scale(0.3) rotate(80deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.1) rotate(-180deg); opacity: 0; }
}

@keyframes sparklePop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  30% { transform: scale(1.5) rotate(45deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(180deg) translateY(-32px); opacity: 0; }
}

@keyframes eventSubLift {
  0% { opacity: 0; transform: translate(-50%, 14px); }
  28% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

@keyframes outBallImpact {
  0% { transform: translate3d(120px, -24px, 0) scale(0.72); opacity: 0; }
  32% { transform: translate3d(-56px, 6px, 0) scale(1.05); opacity: 1; }
  48% { transform: translate3d(-70px, 2px, 0) scale(0.92); }
  100% { transform: translate3d(-142px, -86px, 0) scale(0.48); opacity: 0; }
}

@keyframes stumpOneBreak {
  0%, 26% { transform: rotate(0deg); }
  58% { transform: rotate(-26deg) translate(-18px, 8px); }
  100% { transform: rotate(-62deg) translate(-42px, 18px); }
}

@keyframes stumpTwoBreak {
  0%, 30% { transform: rotate(0deg); }
  56% { transform: rotate(9deg) translateY(8px) scaleY(0.9); }
  100% { transform: rotate(16deg) translateY(18px) scaleY(0.78); }
}

@keyframes stumpThreeBreak {
  0%, 28% { transform: rotate(0deg); }
  58% { transform: rotate(28deg) translate(20px, 10px); }
  100% { transform: rotate(66deg) translate(46px, 20px); }
}

@keyframes bailLeftFly {
  0%, 24% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-96px, -76px) rotate(-290deg); opacity: 0; }
}

@keyframes bailRightFly {
  0%, 24% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(104px, -84px) rotate(320deg); opacity: 0; }
}

@keyframes dustBurst {
  0% { transform: scale(0) translateY(0); opacity: 0; }
  35% { opacity: 0.85; }
  100% { transform: scale(5) translateY(-12px); opacity: 0; }
}

@keyframes umpirePop {
  0% { transform: translateY(28px) scale(0.72); opacity: 0; }
  35% { transform: translateY(0) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes wideArmLeft {
  0% { transform: rotate(52deg) translate(18px, 12px); }
  42%, 100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes wideArmRight {
  0% { transform: rotate(-52deg) translate(-18px, 12px); }
  42%, 100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes warningRingPulse {
  0% { transform: scale(0.2); opacity: 0; }
  34% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 0.92; }
}

@keyframes footStamp {
  0% { transform: translateY(-100px) rotate(18deg) scale(0.72); opacity: 0; }
  46% { transform: translateY(0) rotate(18deg) scale(1.12); opacity: 1; }
  70% { transform: translateY(-8px) rotate(18deg) scale(1); }
  100% { transform: translateY(0) rotate(18deg) scale(1); opacity: 0.9; }
}

@media (max-width: 480px) {
  .animation-content {
    width: 96vw;
    min-height: 290px;
  }

  .event-scene {
    min-height: 290px;
  }

  .event-scene .event-text {
    font-size: 4rem;
  }

  .event-big-ball {
    width: 102px;
  }

  .event-orbit {
    width: 190px;
  }

  .orbit-two {
    width: 232px;
  }
}

/* History Scorecard Details Modal styling */
.history-detail-modal {
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 255, 0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.hist-modal-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: -6px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.hist-scorecard-content {
  overflow-y: auto;
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}

.winner-msg-banner {
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: #facc15;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.hist-team-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
}

.hist-team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.hist-team-title {
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hist-team-score {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffffff;
}

.hist-team-captain {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: -4px;
  margin-bottom: 10px;
}

.hist-overs-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.hist-overs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hist-over-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
  padding-bottom: 4px;
}

.hist-over-num {
  font-weight: 700;
  color: var(--text-muted);
  min-width: 48px;
}

.hist-over-balls {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.hist-squad-section {
  margin-top: 4px;
}

.hist-squad-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.hist-squad-list {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-style: italic;
}

body.theme-basic .history-detail-modal {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

body.theme-basic .hist-team-section {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-basic .hist-team-header {
  border-bottom-color: #cbd5e1;
}

body.theme-basic .hist-team-score {
  color: var(--text-primary);
}

body.theme-basic .winner-msg-banner {
  background: #fef9c3;
  border-color: #fef08a;
  color: #a16207;
}

/* --- Live Win Probability Predictor --- */
.win-probability-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 12px auto 0;
  width: 90%;
  max-width: 480px;
  text-align: center;
  transform: translateZ(0);
}

.win-prob-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.win-prob-team-a {
  color: var(--team-a-color, #3b82f6);
  text-align: left;
  flex: 1;
}

.win-prob-title {
  color: var(--text-muted);
  font-size: 0.58rem;
  letter-spacing: 1px;
  flex: 1;
  text-align: center;
  font-weight: 800;
}

.win-prob-team-b {
  color: var(--team-b-color, #ef4444);
  text-align: right;
  flex: 1;
}

.win-prob-bar-container {
  display: flex;
  height: 6px; /* Sleek progress line */
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.win-prob-bar {
  height: 100%;
  transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: width;
  transform: translateZ(0);
}

.win-prob-bar.team-a-bar {
  background: var(--team-a-color, #3b82f6);
}

.win-prob-bar.team-b-bar {
  background: var(--team-b-color, #ef4444);
  margin-left: auto;
}