/* styles.css - Clean, Modern Mobile Baseball Scorekeeper */
/* 1. Powder Dusk (Dark / Twilight Indigo Base) */
body[data-theme="powder-dusk"] {
  --bg-body: #252b3c;           /* Deep Twilight Indigo */
  --bg-card: #3a405a;           /* Twilight Indigo */
  --border-color: #99b2dd;      /* Powder Blue */
  --text-primary: #f9dec9;      /* Powder Petal */
  --text-secondary: #e9afa3;    /* Powder Blush */
  --accent-color: #99b2dd;      /* Powder Blue */
  --arrow-inactive: #4d546a;    /* Muted Slate Indigo */
  --out-circle-active: #f9dec9; /* Powder Petal */
  --drawer-bg: #3a405a;         /* Twilight Indigo */
  --drawer-card: #2e344a;       /* Darker Slate Card */
  --drawer-border: #99b2dd;     /* Powder Blue */
  --shadow-color: rgba(0, 0, 0, 0.6);
  --toast-bg: #2e344a;          /* Darker Slate Base */
  --toast-text: #f9dec9;        /* Powder Petal */
  --toast-badge-bg: #99b2dd;    /* Powder Blue */
  --toast-badge-text: #252b3c;  /* Deep Twilight Indigo */
  --preview-bg: #222736;        /* Subdued Slate Backdrop */
  --preview-border: #99b2dd;    /* Powder Blue */
}

/* 2. Carrot Peach (Warm Light / Earth Tone Base) */
body[data-theme="carrot-peach"] {
  --bg-body: #f8dda4;           /* Soft Peach Base */
  --bg-card: #fff2d6;           /* Brightened Peach Card */
  --border-color: #813405;      /* Rust Brown */
  --text-primary: #5c2200;      /* Dark Rust Brown for High Contrast Text */
  --text-secondary: #813405;    /* Rust Brown */
  --accent-color: #f9a03f;      /* Carrot Orange */
  --arrow-inactive: #e0c890;    /* Muted Beige Arrow */
  --out-circle-active: #d45113; /* Spicy Orange */
  --drawer-bg: #f8dda4;         /* Soft Peach */
  --drawer-card: #fff2d6;       /* Brightened Peach Card */
  --drawer-border: #813405;     /* Rust Brown */
  --shadow-color: rgba(129, 52, 5, 0.15);
  --toast-bg: #ddf9c1;          /* Tea Green */
  --toast-text: #324719;        /* Dark Tea Green Text */
  --toast-badge-bg: #d45113;    /* Spicy Orange */
  --toast-badge-text: #ffffff;  /* White Text */
  --preview-bg: #ddf9c1;        /* Tea Green Backdrop */
  --preview-border: #813405;    /* Rust Brown */
}

/* 3. French Tangerine (French Blue Dark Base) */
body[data-theme="french-tangerine"] {
  --bg-body: #243156;           /* Darker French Blue Base */
  --bg-card: #324376;           /* French Blue */
  --border-color: #f5dd90;      /* Light Gold */
  --text-primary: #f5dd90;      /* Light Gold */
  --text-secondary: #586ba4;    /* Smart Blue */
  --accent-color: #f68e5f;      /* Tangerine Dream */
  --arrow-inactive: #435487;    /* Muted Blue */
  --out-circle-active: #f68e5f; /* Tangerine Dream */
  --drawer-bg: #324376;         /* French Blue */
  --drawer-card: #273662;       /* Deeper French Blue Card */
  --drawer-border: #f5dd90;     /* Light Gold */
  --shadow-color: rgba(0, 0, 0, 0.65);
  --toast-bg: #273662;          /* Deeper French Blue Base */
  --toast-text: #f5dd90;        /* Light Gold */
  --toast-badge-bg: #f68e5f;    /* Tangerine Dream */
  --toast-badge-text: #ffffff;  /* White Text */
  --preview-bg: #1e2847;        /* Subdued Dark Navy Backdrop */
  --preview-border: #f5dd90;    /* Light Gold */
}

/* 4. Royal Pollen (Electric Royal Azure Base) */
body[data-theme="royal-pollen"] {
  --bg-body: #1e41c4;           /* Darker Royal Azure */
  --bg-card: #2f52e0;           /* Royal Azure */
  --border-color: #ffffff;      /* Pure White */
  --text-primary: #ffffff;      /* Pure White */
  --text-secondary: #f9cb40;    /* Golden Pollen */
  --accent-color: #bced09;      /* Chartreuse */
  --arrow-inactive: #5773ee;    /* Muted Azure Arrow */
  --out-circle-active: #bced09; /* Chartreuse */
  --drawer-bg: #2f52e0;         /* Royal Azure */
  --drawer-card: #2243cb;       /* Deep Royal Card */
  --drawer-border: #ffffff;     /* Pure White */
  --shadow-color: rgba(0, 0, 0, 0.5);
  --toast-bg: #ff715b;          /* Vibrant Coral */
  --toast-text: #ffffff;        /* White Text */
  --toast-badge-bg: #bced09;    /* Chartreuse */
  --toast-badge-text: #1b2600;  /* High-Contrast Dark Olive */
  --preview-bg: #2243cb;        /* Deep Royal Backdrop */
  --preview-border: #f9cb40;    /* Golden Pollen */
}

/* 5. Majorelle Grape (Majorelle Blue Base) */
body[data-theme="majorelle-grape"] {
  --bg-body: #512dc9;           /* Deep Majorelle Blue */
  --bg-card: #623cea;           /* Majorelle Blue */
  --border-color: #e7dfc6;      /* Sand Dune */
  --text-primary: #e9f1f7;      /* Alice Blue */
  --text-secondary: #e7dfc6;    /* Sand Dune */
  --accent-color: #e7dfc6;      /* Sand Dune */
  --arrow-inactive: #4321b0;    /* Dark Muted Blue-Purple */
  --out-circle-active: #e7dfc6; /* Sand Dune */
  --drawer-bg: #54426b;         /* Vintage Grape */
  --drawer-card: #45355a;       /* Dark Vintage Grape Card */
  --drawer-border: #e7dfc6;     /* Sand Dune */
  --shadow-color: rgba(0, 0, 0, 0.6);
  --toast-bg: #54426b;          /* Vintage Grape Base */
  --toast-text: #e9f1f7;        /* Alice Blue */
  --toast-badge-bg: #e7dfc6;    /* Sand Dune */
  --toast-badge-text: #512dc9;  /* Majorelle Blue */
  --preview-bg: #4122aa;        /* Deep Blue Backdrop */
  --preview-border: #e7dfc6;    /* Sand Dune */
}

/* 6. Coffee Seagrass (Coffee Bean Dark Base) */
body[data-theme="coffee-seagrass"] {
  --bg-body: #13070c;           /* Coffee Bean */
  --bg-card: #221219;           /* Dark Coffee Tint Card */
  --border-color: #61988e;      /* Seagrass */
  --text-primary: #f1e8b8;      /* Vanilla Custard */
  --text-secondary: #e3d8f1;    /* Lavender Veil */
  --accent-color: #ff6f59;      /* Vibrant Coral */
  --arrow-inactive: #422631;    /* Muted Coffee Arrow */
  --out-circle-active: #ff6f59; /* Vibrant Coral */
  --drawer-bg: #221219;         /* Dark Coffee Tint */
  --drawer-card: #2e1a23;       /* Lighter Coffee Card */
  --drawer-border: #61988e;     /* Seagrass */
  --shadow-color: rgba(0, 0, 0, 0.75);
  --toast-bg: #2e1a23;          /* Lighter Coffee Base */
  --toast-text: #f1e8b8;        /* Vanilla Custard */
  --toast-badge-bg: #ff6f59;    /* Vibrant Coral */
  --toast-badge-text: #ffffff;  /* White Text */
  --preview-bg: #1c0d13;        /* Subdued Dark Coffee Backdrop */
  --preview-border: #61988e;    /* Seagrass */
}

:root, body[data-theme="light"] {
  --bg-body: #f4f5f8;
  --bg-card: #ffffff;
  --border-color: #000000;
  --text-primary: #000000;
  --text-secondary: #71717a;
  --accent-color: #000000;
  --arrow-inactive: #a1a1aa;
  --out-circle-active: #000000;
  --drawer-bg: #ffffff;
  --drawer-card: #f4f4f5;
  --drawer-border: #e4e4e7;
  --shadow-color: rgba(0, 0, 0, 0.12);
  --toast-bg: #000000;
  --toast-text: #ffffff;
  --toast-badge-bg: #ffffff;
  --toast-badge-text: #000000;
  --preview-bg: #f8fafc;
  --preview-border: #cbd5e1;
}

body[data-theme="dark"] {
  --bg-body: #090a0f;
  --bg-card: #12151c;
  --border-color: #f1f5f9;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --accent-color: #10b981;
  --arrow-inactive: #475569;
  --out-circle-active: #10b981;
  --drawer-bg: #12151c;
  --drawer-card: #1c222e;
  --drawer-border: #334155;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --toast-bg: #1e2532;
  --toast-text: #ffffff;
  --toast-badge-bg: #10b981;
  --toast-badge-text: #ffffff;
  --preview-bg: #0b0d12;
  --preview-border: #2e384d;
}

body[data-theme="ballpark"] {
  --bg-body: #1c1521;           /* Darker than Midnight Violet for deep background */
  --bg-card: #2f2235;           /* Midnight Violet */
  --border-color: #60495a;        /* Mauve Shadow */
  --text-primary: #bfc3ba;        /* Ash Grey */
  --text-secondary: #a9aca9;      /* Silver */
  --accent-color: #60495a;        /* Mauve Shadow (can also use a brighter tint if needed) */
  --arrow-inactive: #3f3244;      /* Vintage Grape */
  --out-circle-active: #bfc3ba;   /* Ash Grey */
  --drawer-bg: #2f2235;         /* Midnight Violet */
  --drawer-card: #3f3244;       /* Vintage Grape */
  --drawer-border: #60495a;     /* Mauve Shadow */
  --shadow-color: rgba(0, 0, 0, 0.6);
  --toast-bg: #3f3244;          /* Vintage Grape */
  --toast-text: #bfc3ba;        /* Ash Grey */
  --toast-badge-bg: #60495a;    /* Mauve Shadow */
  --toast-badge-text: #bfc3ba;   /* Ash Grey */
  --preview-bg: #281c2e;        /* Dark Purple Accent */
  --preview-border: #60495a;     /* Mauve Shadow */
}

body[data-theme="royal"] {
  --bg-body: #060e1b;
  --bg-card: #0f1c32;
  --border-color: #e2e8f0;
  --text-primary: #ffffff;
  --text-secondary: #93c5fd;
  --accent-color: #ef4444;
  --arrow-inactive: #2a4163;
  --out-circle-active: #ef4444;
  --drawer-bg: #0f1c32;
  --drawer-card: #182b4a;
  --drawer-border: #2b4673;
  --shadow-color: rgba(0, 0, 0, 0.6);
  --toast-bg: #182b4a;
  --toast-text: #ffffff;
  --toast-badge-bg: #ef4444;
  --toast-badge-text: #ffffff;
  --preview-bg: #0b1526;
  --preview-border: #2b4673;
}

body[data-theme="vintage"] {
  --bg-body: #ece3cf;
  --bg-card: #f9f5eb;
  --border-color: #291d15;
  --text-primary: #291d15;
  --text-secondary: #7c6c5b;
  --accent-color: #c2410c;
  --arrow-inactive: #b5a593;
  --out-circle-active: #291d15;
  --drawer-bg: #f9f5eb;
  --drawer-card: #eee6d6;
  --drawer-border: #d4c5ae;
  --shadow-color: rgba(41, 29, 21, 0.18);
  --toast-bg: #291d15;
  --toast-text: #f9f5eb;
  --toast-badge-bg: #c2410c;
  --toast-badge-text: #ffffff;
  --preview-bg: #f2ebd9;
  --preview-border: #d4c5ae;
}

body[data-theme="sunset"] {
  --bg-body: #fff4db;           /* Papaya Whip */
  --bg-card: #ffebd0;           /* Slightly deeper warm cream tint */
  --border-color: #018e42;      /* Sea Green */
  --text-primary: #122119;      /* Dark pine green for excellent legibility */
  --text-secondary: #005a2a;    /* Deep Sea Green tint */
  --accent-color: #b8336a;      /* Berry Crush */
  --arrow-inactive: #e8d3b5;    /* Muted warm beige */
  --out-circle-active: #b8336a; /* Berry Crush */
  --drawer-bg: #fff4db;         /* Papaya Whip */
  --drawer-card: #ffebd0;       /* Warm cream card */
  --drawer-border: #018e42;     /* Sea Green */
  --shadow-color: rgba(18, 33, 25, 0.12);
  --toast-bg: #88d9e6;          /* Frosted Blue */
  --toast-text: #122119;        /* Dark text for contrast on light blue */
  --toast-badge-bg: #f7d002;    /* Gold */
  --toast-badge-text: #122119;  /* Dark text on gold */
  --preview-bg: #88d9e6;        /* Frosted Blue backdrop */
  --preview-border: #018e42;    /* Sea Green */
}

body[data-theme="neon"] {
  --bg-body: #090302;           /* Pitch Black */
  --bg-card: #201113;           /* Dark Bordeaux Tint (derived from Night Bordeaux) */
  --border-color: #5a2328;      /* Night Bordeaux */
  --text-primary: #c8bfc7;      /* Pale Slate */
  --text-secondary: #8a7e72;    /* Grey Olive */
  --accent-color: #7a9b76;      /* Sage Green */
  --arrow-inactive: #5a2328;    /* Night Bordeaux */
  --out-circle-active: #c8bfc7; /* Pale Slate */
  --drawer-bg: #14090a;         /* Deep Pitch Black Tint */
  --drawer-card: #201113;       /* Dark Bordeaux Tint */
  --drawer-border: #5a2328;     /* Night Bordeaux */
  --shadow-color: rgba(0, 0, 0, 0.75);
  --toast-bg: #5a2328;        /* Night Bordeaux */
  --toast-text: #c8bfc7;        /* Pale Slate */
  --toast-badge-bg: #7a9b76;  /* Sage Green */
  --toast-badge-text: #090302;  /* Pitch Black */
  --preview-bg: #160a0c;      /* Subdued Dark Background */
  --preview-border: #5a2328;   /* Night Bordeaux */
}

body[data-theme="frost"] {
  --bg-body: #0d111d;           /* Deep dark navy tint (derived from Electric Sapphire) */
  --bg-card: #171d2e;           /* Dark slate blue card background */
  --border-color: #be6e46;      /* Cinnamon Wood */
  --text-primary: #e7f9a9;      /* Lime Cream */
  --text-secondary: #c8bfc7;    /* Pale Slate */
  --accent-color: #5465ff;      /* Electric Sapphire */
  --arrow-inactive: #252e46;    /* Muted navy blue */
  --out-circle-active: #54c6eb; /* Sky Aqua */
  --drawer-bg: #111624;         /* Dark background for drawer */
  --drawer-card: #171d2e;       /* Card background inside drawer */
  --drawer-border: #be6e46;     /* Cinnamon Wood */
  --shadow-color: rgba(0, 0, 0, 0.65);
  --toast-bg: #171d2e;          /* Dark card base for toast */
  --toast-text: #e7f9a9;        /* Lime Cream */
  --toast-badge-bg: #5465ff;    /* Electric Sapphire */
  --toast-badge-text: #e7f9a9;  /* Lime Cream */
  --preview-bg: #111624;        /* Dark preview backdrop */
  --preview-border: #54c6eb;    /* Sky Aqua */
}
body[data-theme="clay"] {
  --bg-body: #183642;           /* Jet Black (Dark Teal Base) */
  --bg-card: #204555;           /* Lighter Teal Tint for cards */
  --border-color: #018e42;      /* Sea Green */
  --text-primary: #ffffff;      /* Pure White for optimal legibility */
  --text-secondary: #88d9e6;    /* Frosted Blue */
  --accent-color: #f7d002;      /* Gold */
  --arrow-inactive: #2b5567;    /* Muted dark teal */
  --out-circle-active: #f7d002; /* Gold */
  --drawer-bg: #142e39;         /* Darker Teal Tint for drawer background */
  --drawer-card: #204555;       /* Lighter Teal Tint for drawer cards */
  --drawer-border: #018e42;     /* Sea Green */
  --shadow-color: rgba(0, 0, 0, 0.7);
  --toast-bg: #204555;          /* Card teal base for toast */
  --toast-text: #ffffff;        /* White text */
  --toast-badge-bg: #b8336a;    /* Berry Crush */
  --toast-badge-text: #ffffff;  /* White badge text */
  --preview-bg: #142e39;        /* Dark preview backdrop */
  --preview-border: #88d9e6;    /* Frosted Blue */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Fix mobile browser pull-to-refresh / page reload on swipe down */
html {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  overscroll-behavior-y: none !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch;
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px 12px;
  transition: background-color 0.35s ease, color 0.35s ease;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-y: none !important;
  overscroll-behavior: none !important;
}

.scoreboard-container {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: transparent;
  position: relative;
  overscroll-behavior-y: none !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Base button resets */
button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  color: inherit;
}

/* Standard thick stadium border styling */
.top-row .icon-btn,
.timer-display,
.score-card,
.outs-container,
.inning-container {
  border: 5px solid var(--border-color);
  background-color: var(--bg-card);
  box-shadow: 0 6px 20px var(--shadow-color);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================================= */
/* Top Row Header & Game Clock                                               */
/* ========================================================================= */

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.icon-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--text-primary);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.35s ease;
}

.icon-btn:hover {
  transform: scale(1.06);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn.spinning i {
  animation: spinGear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spinGear {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

/* Interactive Compact Timer Display */
.timer-display {
  flex: 1;
  min-width: 0;
  height: 56px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  user-select: none;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease;
}

.timer-display:hover {
  transform: scale(1.02);
}

.timer-display:active {
  transform: scale(0.97);
}

.timer-status-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  color: var(--accent-color);
  background-color: rgba(125, 125, 125, 0.12);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.timer-digits {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  transition: opacity 0.3s ease, color 0.3s ease;
}

.timer-display.paused {
  border-color: #ef4444;
}

.timer-display.paused .timer-status-badge {
  background-color: #ef4444;
  color: #ffffff;
  animation: pulseBadge 1.2s infinite ease-in-out;
}

.timer-display.paused .timer-digits {
  animation: timerBlink 1.4s infinite ease-in-out;
  color: #ef4444;
}

@keyframes pulseBadge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes timerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ========================================================================= */
/* Main Score Card & Sliding Underline                                       */
/* ========================================================================= */

.score-card {
  border-radius: 34px;
  padding: 24px 18px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  height: auto;
  touch-action: none !important;
  overscroll-behavior-y: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: min-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease;
}

.scores {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
  touch-action: none !important;
}

.score-num {
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  padding: 0 10px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none !important;
  cursor: pointer;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.score-num:hover {
  transform: scale(1.04);
}

.score-num:active {
  transform: scale(0.92);
}

.score-dash {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  user-select: none;
  color: var(--text-primary);
  opacity: 0.65;
}

/* Team Labels & Smooth Sliding Underline with Responsive Vertical Scaling */
.labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 0 14px;
  margin-top: 10px;
  position: relative;
  gap: 12px;
}

.team-label {
  font-size: clamp(17px, 5.2vw, 26px);
  font-weight: 800;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, font-size 0.25s ease;
  position: relative;
  padding-bottom: 8px;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  max-width: 48%;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}

.team-label.compact {
  font-size: 20px;
}

.team-label.ultra-compact {
  font-size: 16px;
}

.team-label:hover {
  opacity: 0.85;
}

.team-label.batting {
  opacity: 1;
  transform: translateY(-2px);
}

.team-label:not(.batting) {
  opacity: 0.35;
}

/* Physical Sliding Underline Indicator */
.sliding-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background-color: var(--accent-color);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
  pointer-events: none;
  will-change: transform, width;
}

/* ========================================================================= */
/* Inning Transition Notification                                            */
/* ========================================================================= */

.inning-transition-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-110px);
  width: calc(100% - 28px);
  max-width: 480px;
  background-color: var(--toast-bg);
  color: var(--toast-text);
  border: 3px solid var(--border-color);
  border-radius: 20px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 10px 30px var(--shadow-color);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

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

.toast-badge {
  background-color: var(--toast-badge-bg);
  color: var(--toast-badge-text);
  font-size: 13px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 14px;
  letter-spacing: 0.8px;
}

.toast-text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* ========================================================================= */
/* Bottom Controls Row: Outs & Inning Stepper                               */
/* ========================================================================= */

.bottom-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

/* Outs Indicator */
.outs-container {
  flex: 1;
  height: 84px;
  border-radius: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  user-select: none;
  cursor: pointer;
  touch-action: none !important;
}

.outs-container:hover {
  transform: scale(1.02);
}

.out-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid var(--border-color);
  background-color: transparent;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  pointer-events: none;
  padding: 0;
}

.out-circle.active {
  background-color: var(--out-circle-active);
  transform: scale(1.1);
}

.out-circle:active {
  transform: scale(0.9);
}

/* 3 Outs Flash Effect */
.outs-container.flash-3outs {
  animation: flashRedOuts 0.45s ease-out;
}

@keyframes flashRedOuts {
  0% {
    background-color: rgba(239, 68, 68, 0.6);
    border-color: #ef4444;
    transform: scale(1.04);
  }
  100% {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    transform: scale(1);
  }
}

/* Inning Stepper */
.inning-container {
  flex: 1;
  height: 84px;
  border-radius: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  user-select: none;
  cursor: pointer;
  touch-action: none !important;
}

.inning-container:hover {
  transform: scale(1.02);
}

.inning-num {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  min-width: 36px;
  text-align: center;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.inning-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arrow-btn {
  font-size: 26px;
  line-height: 1;
  color: var(--arrow-inactive);
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.arrow-btn.active {
  color: var(--accent-color);
  transform: scale(1.2);
}

/* Pop Feedback Animation */
.pop-feedback {
  animation: popScale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popScale {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.inning-container.pulse-transition {
  animation: pulseInningEffect 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pulseInningEffect {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ========================================================================= */
/* Pitch Counter Main Screen Section & Controls                              */
/* ========================================================================= */

.pitch-counter-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
  animation: fadeInPitchRow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.pitch-view-simple,
.pitch-view-advanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* Simple Mode Capsule Button */
.pitch-capsule-btn {
  flex: 1.15;
  height: 84px;
  border-radius: 42px;
  border: 5px solid var(--border-color);
  background-color: var(--bg-card);
  box-shadow: 0 6px 20px var(--shadow-color);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.35s ease, 
              border-color 0.35s ease, 
              box-shadow 0.35s ease;
}

.pitch-capsule-btn:hover {
  transform: scale(1.02);
}

.pitch-capsule-btn:active {
  transform: scale(0.96);
}

.pitch-capsule-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.6px;
  line-height: 1;
  color: var(--text-primary);
}

.pitch-capsule-num {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Advanced Mode Split Capsule */
.pitch-split-capsule {
  flex: 1.15;
  height: 84px;
  border-radius: 42px;
  border: 5px solid var(--border-color);
  background-color: var(--bg-card);
  box-shadow: 0 6px 20px var(--shadow-color);
  color: var(--text-primary);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.35s ease, 
              border-color 0.35s ease, 
              box-shadow 0.35s ease;
}

.pitch-split-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
  will-change: transform;
}

.pitch-split-side:active {
  background-color: rgba(0, 0, 0, 0.08);
  transform: scale(0.96);
}

.pitch-split-side.pop-feedback {
  animation: pitchSidePop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pitchSidePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

[data-theme="dark"] .pitch-split-side:active,
[data-theme="neon"] .pitch-split-side:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.pitch-split-separator {
  width: 4px;
  background-color: var(--border-color);
}

.pitch-split-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--text-primary);
}

.pitch-split-num {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Pitch Counter Stats on Right */
.pitch-stats-block {
  flex: 0.85;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.pitch-stats-block.advanced-stats {
  gap: 2px;
}

.pitch-stat-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 900;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.pitch-view-simple .pitch-stat-line {
  font-size: 26px;
}

.pitch-view-advanced .pitch-stat-line {
  font-size: 20px;
}

.pitch-stat-label {
  font-weight: 900;
  letter-spacing: 0.5px;
}

.pitch-stat-value {
  font-weight: 900;
}

/* Pitch Counter Module Controls in Drawer */
.pitch-settings-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-color: var(--drawer-bg);
  border: 2px solid var(--drawer-border);
  border-radius: 16px;
  padding: 16px 14px;
}

.pitch-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.pitch-checkbox {
  width: 22px;
  height: 22px;
  accent-color: var(--accent-color);
  cursor: pointer;
  border-radius: 6px;
}

.pitch-checkbox-label {
  cursor: pointer;
}

.pitch-settings-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: var(--drawer-card);
  border: 1px solid var(--drawer-border);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.pitch-settings-hint i {
  color: var(--accent-color);
  margin-top: 2px;
  font-size: 14px;
}

/* ========================================================================= */
/* Advanced Tools Button                                                     */
/* ========================================================================= */

.advanced-tools-btn {
  width: 100%;
  height: 56px;
  border-radius: 28px;
  border: 5px solid var(--border-color);
  background-color: var(--bg-card);
  box-shadow: 0 6px 20px var(--shadow-color);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.35s ease, 
              border-color 0.35s ease, 
              box-shadow 0.35s ease, 
              color 0.35s ease;
}

.advanced-tools-btn:hover {
  transform: scale(1.02);
}

.advanced-tools-btn:active {
  transform: scale(0.96);
}

.advanced-tools-btn i {
  font-size: 17px;
  color: var(--accent-color);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.advanced-tools-btn:hover i {
  transform: rotate(20deg);
}

/* ========================================================================= */
/* Drawers: Settings & Share                                                 */
/* ========================================================================= */

.settings-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.settings-drawer {
  width: 100%;
  max-width: 420px;
  background-color: var(--drawer-bg);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  border: 5px solid var(--border-color);
  border-bottom: none;
  box-shadow: 0 -16px 48px var(--shadow-color);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  transform: translateY(105%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}

.settings-backdrop.open .settings-drawer {
  transform: translateY(0);
}

/* Reset Confirmation Modal Dialog */
.reset-confirm-backdrop {
  align-items: center;
  justify-content: center;
  z-index: 250;
  padding: 20px;
}

.reset-confirm-dialog {
  width: 100%;
  max-width: 360px;
  background-color: var(--drawer-bg);
  border-radius: 26px;
  border: 4px solid var(--border-color);
  box-shadow: 0 16px 48px var(--shadow-color);
  padding: 26px 20px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
  color: var(--text-primary);
}

.reset-confirm-backdrop.open .reset-confirm-dialog {
  transform: scale(1);
}

.reset-confirm-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.reset-confirm-dialog h3 {
  font-size: 19px;
  font-weight: 900;
  margin: 0;
  color: var(--text-primary);
}

.reset-confirm-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.reset-confirm-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.reset-cancel-btn,
.reset-proceed-btn {
  flex: 1;
  height: 46px;
  border-radius: 23px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease, background-color 0.2s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reset-cancel-btn {
  background-color: var(--drawer-card);
  border: 2px solid var(--drawer-border);
  color: var(--text-primary);
}

.reset-cancel-btn:hover {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

.reset-proceed-btn {
  background-color: #ef4444;
  border: 2px solid #ef4444;
  color: #ffffff;
}

.reset-proceed-btn:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

.reset-cancel-btn:active,
.reset-proceed-btn:active {
  transform: scale(0.96);
}

.drawer-header {
  position: sticky;
  top: 0;
  background-color: var(--drawer-bg);
  padding: 16px 20px 10px 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--drawer-border);
}

.drawer-handle-bar {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background-color: var(--drawer-border);
}

.drawer-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.drawer-title-row h2 {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-drawer-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: var(--drawer-card);
  color: var(--text-primary);
  border: 2px solid var(--drawer-border);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.close-drawer-btn:hover {
  transform: scale(1.08);
  border-color: var(--border-color);
}

.drawer-body {
  padding: 18px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Color Themes Grid */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 16px;
  border: 2.5px solid var(--drawer-border);
  background-color: var(--drawer-card);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.theme-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-color);
}

.theme-card.active {
  border-color: var(--accent-color);
  background-color: var(--bg-card);
  box-shadow: 0 4px 12px var(--shadow-color);
  transform: scale(1.02);
}

/* Color Palette Swatch Card */
.theme-palette-card {
  width: 100%;
  height: 24px;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  border: 2px solid var(--border-color);
  box-shadow: 0 2px 6px var(--shadow-color);
  transition: transform 0.2s ease;
}

.theme-card:hover .theme-palette-card {
  transform: scale(1.04);
}

.palette-swatch {
  height: 100%;
  display: block;
}

.palette-swatch.bg { flex: 2; }
.palette-swatch.card { flex: 2; }
.palette-swatch.accent { flex: 1.2; }

/* Palette Theme Colors */
.theme-palette-card.light .palette-swatch.bg { background-color: #f4f5f8; }
.theme-palette-card.light .palette-swatch.card { background-color: #ffffff; }
.theme-palette-card.light .palette-swatch.accent { background-color: #000000; }

.theme-palette-card.dark .palette-swatch.bg { background-color: #090a0f; }
.theme-palette-card.dark .palette-swatch.card { background-color: #12151c; }
.theme-palette-card.dark .palette-swatch.accent { background-color: #10b981; }

.theme-palette-card.ballpark .palette-swatch.bg { background-color: #1c1521; }
.theme-palette-card.ballpark .palette-swatch.card { background-color: #2f2235; }
.theme-palette-card.ballpark .palette-swatch.accent { background-color: #60495a; }

.theme-palette-card.royal .palette-swatch.bg { background-color: #060e1b; }
.theme-palette-card.royal .palette-swatch.card { background-color: #0f1c32; }
.theme-palette-card.royal .palette-swatch.accent { background-color: #ef4444; }

.theme-palette-card.vintage .palette-swatch.bg { background-color: #ece3cf; }
.theme-palette-card.vintage .palette-swatch.card { background-color: #f9f5eb; }
.theme-palette-card.vintage .palette-swatch.accent { background-color: #c2410c; }

.theme-palette-card.sunset .palette-swatch.bg { background-color: #fff4db; }
.theme-palette-card.sunset .palette-swatch.card { background-color: #ffebd0; }
.theme-palette-card.sunset .palette-swatch.accent { background-color: #b8336a; }

.theme-palette-card.neon .palette-swatch.bg { background-color: #090302; }
.theme-palette-card.neon .palette-swatch.card { background-color: #201113; }
.theme-palette-card.neon .palette-swatch.accent { background-color: #7a9b76; }

.theme-palette-card.frost .palette-swatch.bg { background-color: #0d111d; }
.theme-palette-card.frost .palette-swatch.card { background-color: #171d2e; }
.theme-palette-card.frost .palette-swatch.accent { background-color: #5465ff; }

.theme-palette-card.clay .palette-swatch.bg { background-color: #183642; }
.theme-palette-card.clay .palette-swatch.card { background-color: #204555; }
.theme-palette-card.clay .palette-swatch.accent { background-color: #f7d002; }

/* New Palette Theme Colors */
.theme-palette-card.powder-dusk .palette-swatch.bg { background-color: #252b3c; }
.theme-palette-card.powder-dusk .palette-swatch.card { background-color: #3a405a; }
.theme-palette-card.powder-dusk .palette-swatch.accent { background-color: #99b2dd; }

.theme-palette-card.carrot-peach .palette-swatch.bg { background-color: #f8dda4; }
.theme-palette-card.carrot-peach .palette-swatch.card { background-color: #fff2d6; }
.theme-palette-card.carrot-peach .palette-swatch.accent { background-color: #f9a03f; }

.theme-palette-card.french-tangerine .palette-swatch.bg { background-color: #243156; }
.theme-palette-card.french-tangerine .palette-swatch.card { background-color: #324376; }
.theme-palette-card.french-tangerine .palette-swatch.accent { background-color: #f68e5f; }

.theme-palette-card.royal-pollen .palette-swatch.bg { background-color: #1e41c4; }
.theme-palette-card.royal-pollen .palette-swatch.card { background-color: #2f52e0; }
.theme-palette-card.royal-pollen .palette-swatch.accent { background-color: #bced09; }

.theme-palette-card.majorelle-grape .palette-swatch.bg { background-color: #512dc9; }
.theme-palette-card.majorelle-grape .palette-swatch.card { background-color: #623cea; }
.theme-palette-card.majorelle-grape .palette-swatch.accent { background-color: #e7dfc6; }

.theme-palette-card.coffee-seagrass .palette-swatch.bg { background-color: #13070c; }
.theme-palette-card.coffee-seagrass .palette-swatch.card { background-color: #221213; }
.theme-palette-card.coffee-seagrass .palette-swatch.accent { background-color: #ff6f59; }

.theme-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
}

/* Circular Paint-Out Theme Animation Overlay */
.theme-circle-reveal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  pointer-events: none;
  background-color: #ffffff;
}

.theme-circle-reveal[data-theme="light"] { background-color: #f4f5f8; }
.theme-circle-reveal[data-theme="dark"] { background-color: #090a0f; }
.theme-circle-reveal[data-theme="ballpark"] { background-color: #06170f; }
.theme-circle-reveal[data-theme="royal"] { background-color: #060e1b; }
.theme-circle-reveal[data-theme="vintage"] { background-color: #ece3cf; }
.theme-circle-reveal[data-theme="sunset"] { background-color: #140b0b; }
.theme-circle-reveal[data-theme="neon"] { background-color: #0a0714; }
.theme-circle-reveal[data-theme="frost"] { background-color: #080f18; }
.theme-circle-reveal[data-theme="clay"] { background-color: #1c0e09; }

/* Preferences Haptic Toggle */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--drawer-card);
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid var(--drawer-border);
}

.toggle-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.toggle-desc {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.apple-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.apple-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.apple-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--drawer-border);
  border: 2px solid var(--border-color);
  border-radius: 28px;
  transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-primary);
  border-radius: 50%;
  transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-switch input:checked + .apple-slider {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.apple-switch input:checked + .apple-slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}

/* Team Names Inputs */
.team-inputs-row {
  display: flex;
  gap: 12px;
}

.input-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-block label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
}

.input-block input {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--drawer-border);
  background-color: var(--bg-card);
  color: var(--text-primary);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  transition: border-color 0.2s ease;
}

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

/* Action Buttons */
.actions-row {
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  height: 46px;
  border-radius: 14px;
  border: 2.5px solid var(--drawer-border);
  background-color: var(--drawer-card);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-btn:hover {
  border-color: var(--border-color);
  transform: translateY(-1px);
}

.action-btn:active {
  transform: scale(0.96);
}

.action-btn.danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

.action-btn.danger:hover {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

/* ========================================================================= */
/* Share Menu & Broadcaster Formats                                          */
/* ========================================================================= */

.summary-type-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--drawer-border);
  background-color: var(--drawer-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.summary-card:hover {
  border-color: var(--border-color);
  transform: translateY(-2px);
}

.summary-card.active {
  border-color: var(--border-color);
  background-color: var(--bg-card);
  box-shadow: 0 4px 12px var(--shadow-color);
}

.summary-card i {
  font-size: 20px;
  color: var(--text-primary);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.summary-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-card-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.summary-card-desc {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Preview Box */
.preview-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-preview-btn {
  padding: 6px 12px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  transition: all 0.18s ease;
  cursor: pointer;
}

.copy-preview-btn:hover {
  background-color: var(--border-color);
  color: var(--bg-card);
}

.copy-preview-btn.announcer-btn {
  background-color: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}

.copy-preview-btn.announcer-btn:hover {
  background-color: var(--border-color);
  border-color: var(--border-color);
  color: var(--bg-card);
}

.share-preview-box {
  background-color: var(--preview-bg);
  border: 2px solid var(--preview-border);
  border-radius: 14px;
  padding: 14px 16px;
  max-height: 140px;
  overflow-y: auto;
}

.share-preview-box pre {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Clean 4-Button Channels Grid */
.share-channels-grid.clean-channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 360px) {
  .share-channels-grid.clean-channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.share-channel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 14px;
  border: 2px solid var(--drawer-border);
  background-color: var(--drawer-card);
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 800;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-align: center;
}

.share-channel-btn i {
  font-size: 18px;
}

.share-channel-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-color);
}

.share-channel-btn:active {
  transform: scale(0.94);
}

.share-channel-btn.sms:hover {
  border-color: #22c55e;
  color: #22c55e;
}

.share-channel-btn.email:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}

.share-channel-btn.copy:hover,
.share-channel-btn.native:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* ========================================================================= */
/* Advanced Tools Drawer                                                     */
/* ========================================================================= */

.advanced-drawer {
  max-width: 420px;
}

/* ========================================================================= */
/* Advanced Tools Drawer: Canvas Instructure Style Modules                   */
/* ========================================================================= */

.advanced-drawer {
  max-width: 440px;
}

.advanced-drawer-body {
  padding: 16px 16px 36px 16px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

/* Canvas Instructure Modules Container */
.canvas-modules-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.canvas-module {
  background-color: var(--drawer-card);
  border: 2px solid var(--drawer-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px var(--shadow-color);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.canvas-module.open {
  border-color: var(--border-color);
}

.module-header {
  padding: 14px 16px;
  background-color: var(--drawer-bg);
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.canvas-module.open .module-header {
  border-bottom-color: var(--drawer-border);
}

.module-header:hover {
  background-color: var(--bg-card);
}

.module-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-chevron {
  font-size: 13px;
  color: var(--text-secondary);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.canvas-module.open .module-chevron {
  transform: rotate(0deg);
  color: var(--accent-color);
}

.canvas-module.collapsed .module-chevron {
  transform: rotate(-90deg);
}

.module-title-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.module-title-text i {
  color: var(--accent-color);
}

.module-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  background-color: var(--drawer-card);
  border: 1px solid var(--drawer-border);
  color: var(--text-secondary);
  letter-spacing: 0.4px;
}

/* Silky-smooth module collapse transition */
.module-collapse-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s ease;
  overflow: hidden;
  opacity: 1;
  will-change: grid-template-rows, opacity;
}

.canvas-module.collapsed .module-collapse-wrapper {
  grid-template-rows: 0fr;
  opacity: 0;
}

.module-body {
  min-height: 0;
  padding: 14px 14px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: padding 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.canvas-module.collapsed .module-body {
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Hit Form Card */
.hit-form-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-color: var(--drawer-bg);
  border: 2px solid var(--drawer-border);
  border-radius: 16px;
  padding: 14px 12px;
}

.hit-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

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

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

.hit-text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--drawer-border);
  background-color: var(--drawer-card);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hit-text-input:focus {
  border-color: var(--border-color);
  background-color: var(--bg-card);
}

.hit-dropdown {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--drawer-border);
  background-color: var(--drawer-card);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.hit-dropdown:focus {
  border-color: var(--border-color);
}

/* Diamond Section */
.diamond-section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.2s ease;
}

.diamond-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hit-location-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  background-color: var(--accent-color);
  color: #ffffff;
  letter-spacing: 0.3px;
}

/* Stadium Responsive Viewport & Diamond Layout (Snug Box Fitted to Field) */
.stadium-viewport {
  position: relative;
  width: 100%;
  height: 290px;
  background: radial-gradient(circle at 50% 55%, #0d2817 0%, #05140b 100%);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

#stadium {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 820px;
  transform-origin: 490px 380px;
  transform: translate(-490px, -380px) scale(0.42);
  pointer-events: auto;
}

/* No Diamond Message for Walk / Strikeout */
.no-diamond-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  border-radius: 14px;
  border: 2px dashed var(--drawer-border);
  background-color: var(--drawer-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.no-diamond-msg i {
  font-size: 18px;
  color: var(--accent-color);
}

/* User's Exact Baseball Diamond CSS */
#field { 
  position: absolute;
  top: -110px;
  left: 145px;
  height: 700px;
  width: 700px;
  border-radius: 1% 65% 1% 1%;
  border: 1px solid green;
  background-color: green;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#in-field { 
  position: absolute;
  top: 170px;
  left: 265px;
  height: 450px;
  width: 450px;
  border-radius: 1% 50% 1% 1%;
  border: 1px solid #836539;
  background-color: #836539;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#base-lines {
  position: absolute;
  top: -120px;
  left: 155px;
  height: 670px;
  width: 670px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#in-field-grass {
  position: absolute;
  top: 330px;
  left: 359px;
  height: 260px;
  width: 260px;
  border: 2px solid green;
  background-color: green;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.base {
  position: absolute;
  height: 13px;
  width: 13px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid white;
  background-color: white;
  z-index: 1000;
}

#first-base {
  top: 450px;
  left: 706px;
}

#second-base {
  top: 231px;
  left: 484px;
}

#thrid-base {
  top: 450px;
  left: 262px;
}

#home-plate {
  position: absolute;
  height: 7px;
  width: 13px;
  top: 678px;
  left: 485px;
  border: 1px solid white;
  background-color: white;
}

#home-plate:before, #home-plate:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#home-plate:before {
  border-top-color: white;
  border-width: 8px;
  left: 50%;
  margin-left: -9.5px;
}

.home-plate-pulse {
  position: absolute;
  height: 7px;
  width: 13px;
  top: 678px;
  left: 485px;
}

#pitchers-mound { 
  position: absolute;
  top: 420px;
  left: 450px;
  height: 80px;
  width: 80px;
  border-radius: 100% 100% 100% 100%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid #836539;
  background-color: #836539;
}

#pitchers-plate { 
  position: absolute;
  top: 458px;
  left: 482px;
  height: 5px;
  width: 16px;
  border: 1px solid white;
  background-color: white;
}

#vertical {
  position: absolute;
  top: 14px;
  left: 491px;
  height: 1115px;
  width: 1px;
  border-left: 1px solid black;
}

.half-circle {    
  position: absolute;
  height: 40px;
  width: 40px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid #836539;
  background-color: #836539;
}

#third-circle {
  top: 440px;
  left: 300px;
  border-radius: 1% 1% 100% 1%;
}

#first-circle {
  top: 440px;
  left: 642px;
  border-radius: 100% 1% 1% 1%;
}

#second-circle {
  top: 275px;
  left: 470px;
  border-radius: 1% 1% 1% 100%;
}

.batters-box {
  position: absolute;
  height: 25px;
  width: 15px;
  border: 2px solid white;
  background-color: #836539;
  opacity: 1.0;
  top: 670px;
}

#batters-box-right {
  box-shadow: 6px 0 #836539;
  left: 461px;
}

#batters-box-left {
  box-shadow: -6px 0 #836539;
  left: 503px;
}

#batting-circle { 
  position: absolute;
  top: 634px;
  left: 440px;
  height: 100px;
  width: 100px;
  border-radius: 100% 100% 100% 100%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid #836539;
  background-color: #836539;
}

#first-base-thing {
  top: 430px;
  left: 667px;
  position: absolute;
  height: 170px;
  width: 13px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

.mowed-grass {
  background-color: #ac0;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size: 200px 200px;
}

.action-area {
  position: relative;
  z-index: 2000;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin: -50px;
}

.pulse {
  z-index: 1000;
  border: 1px solid #999;
  border-radius: 100%;
  margin: -8px;
  width: 27px;
  height: 27px;
  animation: pulsate 1s ease-out infinite;
  opacity: 0.0;
}

@keyframes pulsate {
  0% { transform: scale(1.0, 1.0); opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { transform: scale(2.0, 2.0); opacity: 0.0; }
}

/* Stadium Hit Marker */
.stadium-ball-pin {
  position: absolute;
  top: 440px;
  left: 485px;
  z-index: 3000;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ball-pin-core {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #c2410c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 3.5px solid #000000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
  animation: pinPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pinPop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.ball-pin-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  transform: translate(-50%, -50%);
  animation: pinRadar 1.5s ease-out infinite;
}

@keyframes pinRadar {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Submit Log Button */
.log-hit-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background-color: var(--accent-color);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow-color);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.log-hit-submit-btn:hover {
  transform: translateY(-2px);
}

.log-hit-submit-btn:active {
  transform: scale(0.96);
}

/* Logged Hits List */
.logged-hits-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.logged-hits-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logged-hits-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

.hits-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reorder-hint-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  opacity: 0.8;
}

.clear-hits-btn {
  font-size: 11px;
  font-weight: 800;
  color: #ef4444;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 6px;
  transition: opacity 0.2s ease;
}

.clear-hits-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.logged-hits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  position: relative;
}

.logged-hit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--drawer-border);
  background-color: var(--drawer-bg);
  gap: 8px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.logged-hit-card:active {
  cursor: grabbing;
}

.logged-hit-card.dragging {
  opacity: 0.7;
  transform: scale(1.03);
  box-shadow: 0 10px 24px var(--shadow-color);
  border-color: var(--accent-color);
  background-color: var(--drawer-card);
  z-index: 20;
}

.logged-hit-card.drag-over {
  border-color: var(--accent-color);
  border-top-width: 3px;
}

.reorder-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 4px 6px 4px 2px;
  cursor: grab;
  touch-action: none;
}

.hit-card-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}

.hit-play-sentence {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}

.hit-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hit-inning-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 8px;
  background-color: var(--drawer-card);
  border: 1.5px solid var(--drawer-border);
  color: var(--accent-color);
  letter-spacing: 0.6px;
  flex-shrink: 0;
}

.delete-hit-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-hit-btn:hover {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.hit-empty-hint {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  border: 1.5px dashed var(--drawer-border);
  border-radius: 12px;
}

/* ========================================================================= */
/* Circular Magnifying Glass Theme Transitions (Slow & Smooth, 60fps GPU)    */
/* ========================================================================= */

/* Prevent competing CSS property transitions during theme switch for 60fps butter-smooth rendering */
html.in-theme-transition *,
html.in-theme-transition,
body.in-theme-transition,
body.in-theme-transition * {
  transition: none !important;
}

/* CSS View Transitions API:
   Slow, smooth 1.35s expansion curve revealing new theme inside the circular lens */
::view-transition-group(root) {
  animation-duration: 2.2s;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

::view-transition-old(root) {
  animation: none;
  z-index: 1;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: themeMagnifierCircle 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  z-index: 2;
  will-change: clip-path;
  mix-blend-mode: normal;
}

@keyframes themeMagnifierCircle {
  0% {
    clip-path: circle(0px at 50% 50%);
  }
  100% {
    clip-path: circle(150vmax at 50% 50%);
  }
}

/* Magnifying Glass Expanding Rim Effect (Pure GPU Composite Transform) */
.theme-magnifier-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 50%;
  border: 4px solid var(--accent-color);
  box-shadow: 0 0 35px 6px var(--accent-color), inset 0 0 20px 4px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  z-index: 999999;
  will-change: transform, opacity;
  transform: translateZ(0) scale(0);
  animation: ringExpandGpu 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ringExpandGpu {
  0% {
    transform: translateZ(0) scale(0);
    opacity: 1;
  }
  85% {
    opacity: 0.95;
  }
  100% {
    transform: translateZ(0) scale(40);
    opacity: 0;
  }
}

/* DOM Clone Overlay Fallback (For non-View-Transition environments) */
.theme-magnifier-clone-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 12px;
  background-color: var(--bg-body);
  color: var(--text-primary);
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
}

/* ========================================================================= */
/* THE BUNS BUTTON: Incredibly Realistic Red Nuke Activation Button Module   */
/* ========================================================================= */

.buns-module-body {
  padding: 24px 16px 30px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
}

.buns-warning-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.12);
  border: 1.5px dashed rgba(239, 68, 68, 0.45);
  padding: 6px 14px;
  border-radius: 20px;
}

/* Realistic Heavy Industrial Nuke Button Housing */
.nuke-housing {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #475569, #1e293b 65%, #0f172a 100%);
  border: 6px solid #334155;
  box-shadow: 
    0 18px 32px rgba(0, 0, 0, 0.65),
    inset 0 4px 6px rgba(255, 255, 255, 0.25),
    inset 0 -6px 10px rgba(0, 0, 0, 0.8),
    0 0 0 3px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Metal Bezel Ring */
.nuke-bezel-ring {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #64748b, #334155 70%, #1e293b 100%);
  border: 4px solid #1e293b;
  box-shadow: 
    inset 0 3px 5px rgba(255, 255, 255, 0.35),
    inset 0 -4px 8px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Industrial Danger Stripes around Rim */
.nuke-housing::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 4px dashed rgba(239, 68, 68, 0.35);
  pointer-events: none;
}

/* Realistic 3D Red Button Cap */
.nuke-red-button {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  /* Deep glossy cherry-red concave dome */
  background: radial-gradient(circle at 38% 30%, #ff4d4d 0%, #dc2626 42%, #991b1b 75%, #450a0a 100%);
  box-shadow: 
    0 12px 18px rgba(0, 0, 0, 0.6),
    0 4px 10px rgba(220, 38, 38, 0.5),
    inset 0 5px 8px rgba(255, 255, 255, 0.65),
    inset 0 -8px 14px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ffffff;
  transform: translateY(-4px);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
  will-change: transform, box-shadow;
}

.nuke-red-button:hover {
  filter: brightness(1.08);
  box-shadow: 
    0 14px 22px rgba(0, 0, 0, 0.65),
    0 6px 14px rgba(239, 68, 68, 0.7),
    inset 0 5px 8px rgba(255, 255, 255, 0.7),
    inset 0 -8px 14px rgba(0, 0, 0, 0.85);
}

.nuke-red-button:active,
.nuke-red-button.pressed {
  transform: translateY(4px);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(220, 38, 38, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.9);
  filter: brightness(0.92);
}

/* Button Engraved Text */
.nuke-btn-icon {
  font-size: 26px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.nuke-btn-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.buns-status-msg {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  text-align: center;
  min-height: 18px;
}

/* Falling Bun Drop Graphic */
.bun-drop {
  position: fixed;
  top: -100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 9999999;
  animation: bunFalling linear forwards;
  will-change: transform;
}

@keyframes bunFalling {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(115vh) rotate(540deg);
    opacity: 0;
  }
}

/* Custom Scrollbar for Settings & Advanced Tools Drawers */
.settings-drawer::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.advanced-drawer-body::-webkit-scrollbar,
.logged-hits-list::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

.settings-drawer::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track,
.advanced-drawer-body::-webkit-scrollbar-track,
.logged-hits-list::-webkit-scrollbar-track {
  background: var(--drawer-card);
  border-radius: 3px;
}

.settings-drawer::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.advanced-drawer-body::-webkit-scrollbar-thumb,
.logged-hits-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
  opacity: 0.8;
}

.settings-drawer::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
.advanced-drawer-body::-webkit-scrollbar-thumb:hover,
.logged-hits-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Firefox scrollbar support */
.settings-drawer,
.drawer-body,
.advanced-drawer-body,
.logged-hits-list {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-color) var(--drawer-card) !important;
}

/* Custom Wide Mobile Scrollbar for Settings & Advanced Tools Drawers */
.settings-drawer::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.advanced-drawer-body::-webkit-scrollbar,
.logged-hits-list::-webkit-scrollbar {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
}

.settings-drawer::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track,
.advanced-drawer-body::-webkit-scrollbar-track,
.logged-hits-list::-webkit-scrollbar-track {
  background: var(--drawer-card);
  border-radius: 6px;
  margin: 4px;
}

.settings-drawer::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.advanced-drawer-body::-webkit-scrollbar-thumb,
.logged-hits-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
  border: 2px solid var(--drawer-card); /* Creates a neat inner spacing effect */
}

.settings-drawer::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
.advanced-drawer-body::-webkit-scrollbar-thumb:hover,
.logged-hits-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Firefox scrollbar support */
.settings-drawer,
.drawer-body,
.advanced-drawer-body,
.logged-hits-list {
  scrollbar-width: auto !important;
  scrollbar-color: var(--border-color) var(--drawer-card) !important;
}

/* Floating Scroll to Top Button */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 3px solid var(--border-color);
  box-shadow: 0 6px 20px var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 99999;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.2s ease, 
              border-color 0.2s ease;
}

.scroll-top-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  transform: translateY(-2px) scale(1.06);
  background-color: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}

.scroll-top-btn:active {
  transform: scale(0.92);
}