/* ==========================================================================
   VERIDIC - Modern Minimalist Daily Word Game Stylesheet
   ========================================================================== */

:root {
  --bg-color: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-subtle: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border-color: #e2e8f0;
  --border-focus: #8b5cf6;
  
  --color-green: #10b981;
  --color-green-dark: #059669;
  --color-green-light: #ecfdf5;
  --color-green-border: #a7f3d0;
  
  --color-red: #ef4444;
  --color-red-dark: #dc2626;
  --color-red-light: #fef2f2;
  --color-red-border: #fecaca;

  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-accent-light: #f5f3ff;
  --color-accent-border: #ddd6fe;
  --color-accent-glow: rgba(124, 58, 237, 0.25);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.09), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --radius-pill: 9999px;

  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* App Wrapper */
.app-container {
  width: 100%;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: 12px 18px 16px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top Header - Themed to match Bluffcab midnight-purple badge branding */
header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(135deg, #100935 0%, #150d3c 55%, #1b0f48 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-bottom: 2px solid #9333ea;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  box-shadow: 0 4px 20px -2px rgba(124, 58, 237, 0.3), 0 2px 8px rgba(0, 0, 0, 0.35);
  position: relative;
}

.brand-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title {
  font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', ui-rounded, system-ui, -apple-system, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: baseline;
  user-select: none;
  -webkit-user-select: none;
  text-transform: none;
}

.brand-text-bluff {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}

.brand-text-cab {
  color: #c870ff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(200, 112, 255, 0.55);
  letter-spacing: -0.01em;
}

.brand-subtitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-size: 0.62rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #c4b5fd;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.brand-sub-line {
  display: block;
  white-space: nowrap;
}

.brand-daily-num {
  color: #e9d5ff;
  font-weight: 800;
}

.brand-daily-tier {
  color: #c4b5fd;
  opacity: 0.95;
}

.brand-daily-date {
  color: #a78bfa;
  font-size: 0.58rem;
  opacity: 0.85;
}

/* Duolingo-style Streak Shield Pill in Header */
.header-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 9999px !important;
  padding: 5px 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: #ffffff;
  user-select: none;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.header-streak-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(245, 158, 11, 0.8);
  transform: translateY(-1px);
}

.header-streak-pill:active {
  transform: translateY(0);
}

.streak-pill-flame {
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
}

.streak-pill-count {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: -0.02em;
}

.streak-pill-shield {
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.45;
  filter: grayscale(1);
  transition: all var(--transition-fast);
}

/* When Notifications (Streak Shield) are ACTIVE */
.header-streak-pill.shield-active {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(16, 185, 129, 0.18));
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.header-streak-pill.shield-active .streak-pill-shield {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 0 6px rgba(16, 185, 129, 0.85));
}

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

header .icon-btn {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #f1f5f9;
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

header .icon-btn:hover {
  background-color: rgba(168, 85, 247, 0.25);
  border-color: #c870ff;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(200, 112, 255, 0.35);
}

header .icon-btn:active {
  transform: translateY(0);
}

header .icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

header #btnOwnerDashboard {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  background-color: rgba(245, 158, 11, 0.14) !important;
}

header #btnOwnerDashboard:hover {
  background-color: rgba(245, 158, 11, 0.28) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
}

/* Header Menu Dropdown (? icon) */
.menu-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 215px;
  background: linear-gradient(180deg, #180e3d 0%, #120935 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.55), 0 0 20px rgba(139, 92, 246, 0.25);
  padding: 6px 0;
  display: none;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  animation: menuFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-dropdown.active {
  display: flex;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menu-dropdown-item:last-child {
  border-bottom: none;
}

.menu-dropdown-item:hover,
.menu-dropdown-item:focus-visible {
  background-color: rgba(168, 85, 247, 0.2);
  color: #c870ff;
  outline: none;
}

.menu-dropdown-item:active {
  background-color: rgba(168, 85, 247, 0.35);
}

.menu-item-text {
  letter-spacing: -0.01em;
}

.menu-item-arrow {
  font-size: 0.9rem;
  font-weight: 600;
  color: #c4b5fd;
  margin-left: 14px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.menu-dropdown-item:hover .menu-item-arrow {
  color: #ffffff;
  transform: translate(2px, -2px);
}

.menu-item-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all var(--transition-fast);
}

.menu-item-pill.active {
  background-color: #10b981;
  color: #ffffff;
}

.menu-item-pill.enable {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.45);
}

/* Archive / Previous Day Banner */
.archive-banner {
  display: none;
  background-color: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  align-items: center;
  justify-content: space-between;
}

[data-theme="dark"] .archive-banner {
  background-color: #1e3a8a33;
  color: #93c5fd;
  border-color: #1d4ed8;
}

.archive-banner button {
  background: none;
  border: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
}

/* Difficulty Selector Bar */
.difficulty-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 12px;
}

[data-theme="dark"] .difficulty-bar {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.difficulty-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.difficulty-btn:hover {
  color: var(--text-primary);
  background-color: rgba(124, 58, 237, 0.12);
}

.difficulty-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.38);
}

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

.difficulty-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.difficulty-label {
  line-height: 1;
}

/* Owner Dashboard 4-way Mode Toggle Bar */
.owner-tier-bar {
  margin-bottom: 4px;
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  padding: 4px;
  gap: 4px;
  width: 100%;
}

.owner-tier-bar .difficulty-btn {
  padding: 6px 6px;
  font-size: 0.78rem;
  gap: 4px;
}

.owner-tier-bar .difficulty-btn .difficulty-icon {
  font-size: 0.92rem;
}

.difficulty-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(124, 58, 237, 0.24);
}

.leaderboard-diff-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(124, 58, 237, 0.1);
  color: var(--color-accent);
  margin-left: 6px;
  vertical-align: middle;
}

.summary-difficulty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  width: 100%;
}

.summary-diff-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.summary-diff-bar {
  margin-bottom: 0;
  max-width: 320px;
  flex: 1;
}

/* Summary Unplayed State */
.summary-unplayed-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 20px 16px;
  background: var(--bg-card-subtle);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}

.unplayed-icon {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 12px rgba(124, 58, 237, 0.25));
}

.unplayed-info-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.btn-play-tier-now {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-play-tier-now:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

.btn-play-tier-now:active {
  transform: scale(0.98);
}

/* Status / Score Bar (Visible at all times) */
.status-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.status-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.word-counter-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.word-counter-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
}

/* Step Progress Dots */
.progress-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--border-color);
  background-color: var(--bg-card-subtle);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.step-dot.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: var(--bg-card);
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.step-dot.correct {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: #ffffff;
}

.step-dot.wrong {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: #ffffff;
}

/* Live Score Indicator */
.score-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.score-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.score-badge {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* Main Game Arena — Fills Remaining Viewport Height */
.game-arena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top Rectangle: The Word Card (Expands to Fill Upper Half) */
.word-rectangle {
  flex: 0.9;
  min-height: 0;
  background-color: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game-arena.is-revealed .word-rectangle {
  flex: 0.58;
}

.game-arena.is-revealed .bottom-container {
  flex: 1.42;
}

.word-rectangle:hover {
  box-shadow: var(--shadow-lg);
}

.word-category-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--bg-card-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.word-display-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.target-word {
  font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', ui-rounded, system-ui, -apple-system, sans-serif;
  font-size: clamp(2.3rem, 6vh, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #120935;
  user-select: none;
  line-height: 1.1;
  word-break: break-word;
}

.audio-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.audio-btn:hover {
  color: var(--color-accent);
  background-color: var(--bg-card-subtle);
  transform: scale(1.15);
}

.audio-btn svg {
  width: 22px;
  height: 22px;
}

/* Bottom Container: Controls & Reveal (Expands to Fill Lower Half) */
.bottom-container {
  flex: 1.15;
  min-height: 0;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Two Option Boxes Underneath */
.options-grid {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.options-grid.hidden-fade {
  display: none;
}

.option-box {
  height: 100%;
  background-color: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  user-select: none;
  outline: none;
}

.option-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.option-badge-word {
  background-color: var(--color-green);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
}

.option-badge-not-word {
  background-color: var(--color-red);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

.option-badge-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

#btnIsWord:hover:not(:disabled) {
  border-color: var(--color-green);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.22);
  transform: translateY(-2px);
}

#btnIsWord:hover:not(:disabled) .option-badge {
  transform: scale(1.12);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.45);
}

#btnNotWord:hover:not(:disabled) {
  border-color: var(--color-red);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.22);
  transform: translateY(-2px);
}

#btnNotWord:hover:not(:disabled) .option-badge {
  transform: scale(1.12);
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.45);
}

.option-box:active:not(:disabled) {
  transform: translateY(0);
}

.option-title {
  font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  transition: color var(--transition-fast);
}

.option-box.answered-correct .option-badge,
.option-box.answered-wrong .option-badge {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

/* Click feedback: Green if correct, Red if wrong */
.option-box.answered-correct {
  background-color: var(--color-green) !important;
  border-color: var(--color-green-dark) !important;
  color: #ffffff !important;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
  animation: pulse-correct 0.4s ease-in-out;
}

.option-box.answered-correct .option-title {
  color: #ffffff !important;
}

.option-box.answered-wrong {
  background-color: var(--color-red) !important;
  border-color: var(--color-red-dark) !important;
  color: #ffffff !important;
  transform: scale(0.98);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
  animation: shake-wrong 0.4s ease-in-out;
}

.option-box.answered-wrong .option-title {
  color: #ffffff !important;
}

.option-box.revealed-actual {
  border-color: var(--color-green) !important;
  background-color: var(--color-green-light) !important;
  color: var(--color-green-dark) !important;
}

.option-box:disabled {
  cursor: default;
}

/* Reveal Box: The Single Merged Bottom Box */
.reveal-rectangle {
  display: none;
  flex: 1;
  min-height: 0;
  height: 100%;
  background-color: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
  width: 100%;
  animation: morphIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  overflow-y: auto;
}

.reveal-rectangle.visible {
  display: flex;
}

/* Result Header inside Reveal Box */
.reveal-status-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.status-badge.real {
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
  border: 1px solid var(--color-green-border);
}

.status-badge.fake {
  background-color: var(--color-red-light);
  color: var(--color-red-dark);
  border: 1px solid var(--color-red-border);
}

.user-verdict-tag {
  font-size: 0.82rem;
  font-weight: 700;
}

.user-verdict-tag.correct {
  color: var(--color-green);
}

.user-verdict-tag.wrong {
  color: var(--color-red);
}

/* Real Word Details */
.real-word-details {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 8px;
}

/* Pronunciation Display */
.reveal-pronunciation-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pronunciation-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pronunciation-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.pronounce-mini-btn {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pronounce-mini-btn:hover {
  background-color: var(--border-color);
  color: var(--text-main);
  transform: scale(1.03);
}

.pronounce-mini-btn svg {
  color: var(--color-accent);
}

.reveal-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reveal-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.reveal-content {
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--text-main);
}

.reveal-sentence {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-main);
  background-color: var(--bg-card-subtle);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent);
}

/* Not A Word Details: Simply displays "Not a word" */
.not-word-details {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  text-align: center;
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-color);
}

.not-a-word-message {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

/* Next Word Button */
.btn-next-word {
  flex-shrink: 0;
  background-color: var(--color-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all var(--transition-fast);
  margin-top: 4px;
}

.btn-next-word:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-next-word:active {
  transform: translateY(0);
}

/* Modal Overlay & Dialogs */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

#nicknameModal,
#nicknameSetupModal {
  z-index: 1200;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 500px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  transition: transform var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-overlay.active .modal-card {
  transform: scale(1);
}

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

.modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.btn-close-modal {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-close-modal:hover {
  background-color: var(--bg-card-subtle);
  color: var(--text-main);
}

/* Summary Modal Content */
#summaryModal .modal-card {
  gap: 6px;
  padding: 14px 12px 18px 12px;
}

#summaryPlayedContent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-hero {
  text-align: center;
  padding: 2px 0 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.score-circle {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-accent), #6366f1);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.25);
  margin-bottom: 2px;
}

.score-circle-num {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.score-circle-denom {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.85;
}

.summary-headline {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.summary-subtext {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.25;
}

/* Wordle-style Emoji Share Row */
.emoji-grid-display {
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-align: center;
  user-select: all;
  border: 1px dashed var(--border-color);
}

/* Outcomes List Breakdown */
.outcomes-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

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

.outcome-card {
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outcome-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.outcome-word {
  font-size: 0.98rem;
  font-weight: 800;
}

.outcome-guess-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.outcome-guess-badge.correct {
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
}

.outcome-guess-badge.wrong {
  background-color: var(--color-red-light);
  color: var(--color-red-dark);
}

.outcome-nature {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.outcome-meaning {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.32;
}

.outcome-sentence {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-muted);
}

.outcome-simple-fake {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  background-color: var(--bg-card);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  align-self: flex-start;
}

/* Actions in Summary Modal */
.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-actions .btn-leaderboard-summary,
.summary-actions .btn-share,
.summary-actions .btn-past-days {
  padding: 9px 12px;
  font-size: 0.88rem;
}

.btn-share {
  background-color: var(--color-green);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-share:hover {
  background-color: var(--color-green-dark);
  transform: translateY(-1px);
}

.btn-past-days {
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-past-days:hover {
  background-color: var(--bg-card-subtle);
  border-color: var(--text-light);
}

/* Past Days List & Items */
.past-days-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.past-day-item {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.past-day-item:hover {
  border-color: var(--color-accent);
}

.past-day-item.is-current {
  border-color: var(--color-accent);
  background-color: rgba(37, 99, 235, 0.05);
}

.past-day-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.past-day-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.past-day-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.past-day-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.past-day-score {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-play-day {
  background-color: var(--color-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-play-day:hover {
  background-color: var(--color-accent-hover);
}

/* Countdown to Next Day */
.next-game-timer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  margin: 2px 0 0 0;
}

.home-countdown-timer {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 8px 12px;
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-top: 8px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.timer-digits {
  font-family: monospace;
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 700;
}

/* Streak Shield Card (High-Converting Opt-In) */
.streak-shield-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(99, 102, 241, 0.14) 100%);
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 10px 0 6px 0;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.12);
  text-align: left;
  position: relative;
  transition: all var(--transition-smooth);
}

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

.streak-shield-badge {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #ffffff;
  text-transform: uppercase;
}

.streak-shield-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.streak-shield-close:hover {
  color: var(--text-main);
}

.streak-shield-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.streak-shield-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.3));
}

.streak-shield-content {
  flex: 1;
  min-width: 0;
}

.streak-shield-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.streak-shield-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

.btn-enable-streak-shield {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-enable-streak-shield:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45);
}

.btn-enable-streak-shield:active {
  transform: translateY(0);
}

.streak-shield-ios-tip {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
}

/* Streak Modal Styling */
.streak-modal-card {
  max-width: 360px;
  padding: 16px 18px 18px 18px;
  gap: 10px;
  text-align: center;
}

.streak-hero-section {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.streak-hero-flame-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(239, 68, 68, 0.05) 70%, transparent 100%);
  padding: 6px 16px;
  border-radius: 9999px;
}

.streak-hero-flame {
  font-size: 2.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
  animation: flamePulse 2s infinite ease-in-out;
}

@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.9)); }
}

.streak-hero-count {
  font-size: 2.1rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: -0.03em;
  font-family: inherit;
}

.streak-hero-headline {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

/* Streak Shield Card in Modal */
.streak-shield-status-card {
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 2px 0 4px 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--transition-smooth);
}

.streak-shield-status-card.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 95, 70, 0.15));
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}

.streak-shield-status-card.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.15));
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

.shield-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shield-card-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.shield-card-text {
  flex: 1;
}

.shield-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  margin: 0 0 2px 0;
  color: var(--text-main);
}

.shield-card-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin: 0;
}

.btn-streak-modal-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  transition: all var(--transition-fast);
}

.btn-streak-modal-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.streak-milestones-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 0;
}

.streak-milestone-pill {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.milestone-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.milestone-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}

/* Summary Daily Reminder Prompt Row */
.summary-reminder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-top: 2px;
}

.summary-reminder-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.summary-reminder-icon {
  font-size: 1rem;
}

.btn-toggle-reminder {
  border: none;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-toggle-reminder:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-toggle-reminder.active {
  background-color: #10b981;
}

/* Toast Notification */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--text-main);
  color: var(--bg-card);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all var(--transition-smooth);
  z-index: 2000;
  pointer-events: none;
}

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

/* Animations */
@keyframes morphIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse-correct {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1.02); }
}

@keyframes shake-wrong {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Canvas Confetti */
#confettiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1500;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .app-container {
    padding: 10px 12px 14px 12px;
  }

  header {
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 10px;
  }

  .brand-title {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
  }

  .brand-subtitle {
    font-size: 0.58rem;
    line-height: 1.15;
  }
  .brand-daily-date {
    font-size: 0.54rem;
  }

  /* Mobile Header Streak Pill */
  .header-streak-pill {
    padding: 4px 9px;
    gap: 4px;
    border-radius: 9999px !important;
  }
  .streak-pill-flame {
    font-size: 0.85rem;
  }
  .streak-pill-count {
    font-size: 0.8rem;
  }
  .streak-pill-shield {
    font-size: 0.75rem;
  }

  .header-actions {
    gap: 5px;
  }

  header .icon-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  header .icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .difficulty-bar {
    padding: 3px;
    gap: 4px;
    margin-bottom: 10px;
  }

  .difficulty-btn {
    padding: 6px 8px;
    font-size: 0.8rem;
    gap: 4px;
  }

  .owner-tier-bar {
    padding: 3px;
    gap: 3px;
    margin-bottom: 6px;
  }

  .owner-tier-bar .difficulty-btn {
    padding: 5px 3px;
    font-size: 0.72rem;
    gap: 3px;
  }

  .owner-tier-bar .difficulty-btn .difficulty-icon {
    font-size: 0.82rem;
  }

  .status-bar {
    padding: 10px 12px;
    margin-bottom: 12px;
    gap: 6px;
  }

  .word-counter-value {
    font-size: 0.88rem;
  }

  .progress-dots {
    gap: 5px;
  }

  .step-dot {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  .score-badge {
    font-size: 1rem;
  }

  .target-word {
    font-size: 2rem;
  }

  .word-rectangle {
    padding: 18px 14px;
    min-height: 0;
  }

  .option-box {
    padding: 12px 8px;
    gap: 6px;
  }

  .option-badge {
    width: 36px;
    height: 36px;
  }

  .option-badge-svg {
    width: 18px;
    height: 18px;
  }

  .option-title {
    font-size: 1.05rem;
  }

  .reveal-rectangle {
    padding: 18px 14px;
  }

  .modal-overlay {
    padding: 12px;
  }

  .modal-card {
    padding: 18px 14px;
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Shared Friend Leaderboard Styles
   ========================================================================== */

.btn-leaderboard-summary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.btn-leaderboard-summary:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-1px);
}

.room-bar {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

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

.room-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.room-code-badge {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.room-actions-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-room-action {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-room-action:hover {
  border-color: var(--text-light);
  background-color: var(--border-color);
}

.btn-room-action.primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.btn-room-action.primary:hover {
  background-color: var(--color-accent-hover);
}

.room-edit-panel,
.nickname-edit-panel {
  background-color: var(--bg-card-subtle);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: morphIn 0.2s ease-out;
}

.custom-input {
  flex: 1;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  font-family: inherit;
}

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

.player-nickname-bar {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-refresh {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.btn-refresh:hover {
  background-color: var(--bg-card-subtle);
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.leaderboard-item {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.leaderboard-item.is-user {
  border-color: var(--color-accent);
  background-color: rgba(37, 99, 235, 0.06);
}

.leaderboard-item.rank-1 {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent);
}

.leaderboard-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rank-badge {
  width: 28px;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

.player-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.you-tag {
  font-size: 0.68rem;
  font-weight: 700;
  background-color: var(--color-accent);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.player-emojis {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.leaderboard-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.player-score {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.player-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.empty-leaderboard-msg {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Saved Vocabulary & Bookmark Buttons
   ========================================================================== */

.btn-save-word {
  transition: all var(--transition-fast);
}

.btn-save-word.saved {
  background-color: rgba(245, 158, 11, 0.14);
  border-color: #f59e0b;
  color: #d97706;
}

[data-theme="dark"] .btn-save-word.saved {
  background-color: rgba(245, 158, 11, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

.outcome-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* ==========================================================================
   Score Distribution Bar Chart (Stats Modal)
   ========================================================================== */

.score-dist-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

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

.dist-label {
  width: 34px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dist-bar-track {
  flex: 1;
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-sm);
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.dist-bar-fill {
  height: 100%;
  min-width: 28px;
  background-color: var(--text-light);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-variant-numeric: tabular-nums;
}

.dist-bar-fill.highlight {
  background-color: var(--color-green);
}

/* ==========================================================================
   Multi-Group Friend Leaderboard Extensions (Directory & Group Detail Views)
   ========================================================================== */

.nickname-header-pill {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.nickname-header-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.groups-directory-view,
.group-detail-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.btn-add-group {
  background-color: var(--color-accent);
  color: #ffffff;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-add-group:hover {
  background-color: var(--color-accent-hover);
}

.leaderboard-nickname-pill {
  background-color: var(--bg-card-subtle);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.leaderboard-nickname-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: rgba(124, 58, 237, 0.08);
  transform: translateY(-1px);
}

.leaderboard-nickname-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

.btn-edit-nickname-subtle {
  background-color: var(--bg-card-subtle);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-edit-nickname-subtle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: rgba(124, 58, 237, 0.08);
}

.groups-directory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.group-directory-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.group-directory-card:hover {
  border-color: var(--color-accent);
  background-color: rgba(37, 99, 235, 0.04);
  transform: translateY(-1px);
}

.group-directory-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.group-directory-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.group-directory-name {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.group-directory-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.group-directory-open-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.group-directory-card:hover .group-directory-open-btn {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.group-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.btn-back-groups {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-back-groups:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.group-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background-color: var(--bg-card-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.group-mode-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.group-mode-tab.active {
  background-color: var(--bg-card);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.leaderboard-tier-filter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-top: 2px;
}

.tier-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 2px;
  font-family: inherit;
  font-size: clamp(0.7rem, 2.2vw, 0.76rem);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tier-filter-btn:hover {
  color: var(--text-main);
  background-color: rgba(124, 58, 237, 0.08);
}

.tier-filter-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.32);
}

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

.creator-pill {
  background-color: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.room-sub-note {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-room-action.nudge-btn {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #b45309;
  font-weight: 700;
}

.btn-room-action.nudge-btn:hover {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

.btn-room-action.nudge-btn.nudged {
  background-color: var(--color-green-light);
  border-color: var(--color-green-border);
  color: var(--color-green-dark);
  cursor: default;
  opacity: 0.9;
}

.btn-room-action.nudge-btn.nudged:hover {
  background-color: var(--color-green-light);
  border-color: var(--color-green-border);
  color: var(--color-green-dark);
}

.group-completion-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.group-completion-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.group-completion-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-main);
}

.group-avg-pill {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-green-dark);
  background-color: var(--color-green-light);
  border: 1px solid var(--color-green-border);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.group-progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--border-color);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.group-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-green));
  border-radius: var(--radius-full);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.group-nudge-alert {
  background-color: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #b45309;
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.leaderboard-item.pending-member {
  background-color: var(--bg-card);
  border-style: dashed;
  opacity: 0.92;
}

.pending-status-tag {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.btn-nudge-member {
  background-color: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #b45309;
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-nudge-member:hover {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

.btn-nudge-member.nudged {
  background-color: var(--color-green-light);
  border-color: var(--color-green-border);
  color: var(--color-green-dark);
  cursor: default;
  opacity: 0.9;
}

.btn-nudge-member.nudged:hover {
  background-color: var(--color-green-light);
  border-color: var(--color-green-border);
  color: var(--color-green-dark);
}

.group-manage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.btn-group-danger-outline {
  flex: 1;
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-group-danger-outline:hover,
.btn-group-danger-outline.confirming {
  border-color: var(--color-red);
  color: var(--color-red);
  background-color: var(--color-red-light);
}

.btn-group-danger-solid {
  flex: 1;
  background-color: var(--color-red-light);
  border: 1px solid var(--color-red-border);
  color: var(--color-red-dark);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-group-danger-solid:hover,
.btn-group-danger-solid.confirming {
  background-color: var(--color-red);
  border-color: var(--color-red-dark);
  color: #ffffff;
}

/* ==========================================================================
   Feedback Modal & Form Elements
   ========================================================================== */

.feedback-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px 0;
}

.feedback-topic-pill {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.feedback-topic-pill:hover {
  background-color: var(--border-color);
}

.feedback-topic-pill.active {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 95px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.feedback-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Nickname Setup Chips */
.nickname-chip {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nickname-chip:hover {
  border-color: var(--color-accent);
  background-color: rgba(168, 85, 247, 0.1);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* Settings Navigation Buttons */
.settings-nav-btn {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
  text-align: left;
}

.settings-nav-btn:hover {
  background-color: rgba(168, 85, 247, 0.08);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

/* Bluffcab Official Group Styling */
.group-directory-card.official-card {
  border-color: rgba(168, 85, 247, 0.45);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.09) 0%, rgba(59, 130, 246, 0.04) 100%);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.06);
}

.group-directory-card.official-card:hover {
  border-color: #a855f7;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.2);
}

.official-badge {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.official-group-banner-join {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px dashed rgba(168, 85, 247, 0.5);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.btn-join-official-pill {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.btn-join-official-pill:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ==========================================================================
   Bluffcab Growth & Analytics Cockpit Styles
   ========================================================================== */

#ownerModal .modal-card.owner-modal-card {
  max-width: 660px;
  width: 100%;
  box-sizing: border-box;
  max-height: 90vh;
  padding: 22px 20px;
  gap: 14px;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  overflow-x: hidden;
}

.owner-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.owner-badge-icon {
  font-size: 1.25rem;
}

.owner-live-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background-color: rgba(16, 185, 129, 0.12);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.owner-day-subtitle {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
}

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

.btn-refresh-pill {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-refresh-pill:hover {
  background-color: var(--bg-card);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Owner Auth Panel */
.owner-auth-box {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.owner-auth-icon {
  font-size: 2.2rem;
}

.owner-auth-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.owner-auth-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.4;
}

.owner-auth-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 380px;
}

.owner-dashboard-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

/* Segmented Navigation Bar */
.analytics-nav-bar {
  display: flex !important;
  flex-shrink: 0 !important;
  min-height: 44px !important;
  width: 100%;
  box-sizing: border-box;
  gap: 4px;
  background-color: var(--bg-card-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 20;
}

.analytics-nav-bar::-webkit-scrollbar {
  display: none;
}

.analytics-tab-btn {
  flex: 1;
  flex-shrink: 0 !important;
  min-height: 36px !important;
  min-width: fit-content;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.analytics-tab-btn:hover {
  color: var(--text-main);
}

.analytics-tab-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
  font-weight: 800;
}

.analytics-tab-btn.active .feedback-count-badge {
  background-color: #ffffff;
  color: #7c3aed;
}

.feedback-count-badge {
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

/* Tab Panels */
.analytics-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* North Star KPI Grid */
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.analytics-kpi-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.analytics-kpi-card:hover {
  border-color: var(--color-accent-border);
}

.analytics-kpi-card.accent-card {
  border-left: 4px solid var(--color-accent);
}

.analytics-kpi-card.green-card {
  border-left: 4px solid var(--color-green);
}

.analytics-kpi-card.amber-card {
  border-left: 4px solid #f59e0b;
}

.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.kpi-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.kpi-chip {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.kpi-chip.green {
  background-color: rgba(16, 185, 129, 0.12);
  color: var(--color-green);
}

.kpi-chip.purple {
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--color-accent);
}

.kpi-chip.amber {
  background-color: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.kpi-value {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.1;
  margin-top: 2px;
}

.analytics-kpi-card.accent-card .kpi-value {
  color: var(--color-accent);
}

.analytics-kpi-card.green-card .kpi-value {
  color: var(--color-green);
}

.analytics-kpi-card.amber-card .kpi-value {
  color: #d97706;
}

.kpi-foot {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Clickable KPI Cards & Inspect Hint */
.analytics-kpi-card.clickable {
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.analytics-kpi-card.clickable:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.15);
}

.analytics-kpi-card.clickable:active {
  transform: translateY(0);
}

.kpi-inspect-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-top: 2px;
}

.kpi-inspect-hint:hover {
  text-decoration: underline;
}

/* Secondary Sub-Grid */
.analytics-sub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.analytics-mini-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  box-sizing: border-box;
}

.mini-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.mini-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}

.mini-sub {
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* Smart Growth Engine */
.analytics-growth-engine {
  background-color: var(--bg-card);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.growth-engine-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.growth-engine-icon {
  font-size: 1.1rem;
}

.growth-engine-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.growth-engine-tag {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 800;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.growth-engine-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.growth-recommendation-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rec-card-icon {
  font-size: 1.15rem;
  margin-top: 1px;
}

.rec-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rec-card-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-main);
}

.rec-card-text {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Retention Hero */
.analytics-retention-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.retention-cohort-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cohort-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.cohort-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cohort-status-badge {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.cohort-status-badge.healthy {
  background-color: rgba(16, 185, 129, 0.12);
  color: var(--color-green);
}

.cohort-status-badge.moderate {
  background-color: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.cohort-status-badge.attention {
  background-color: rgba(239, 68, 68, 0.12);
  color: var(--color-red);
}

.cohort-rate {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1.1;
  margin: 4px 0 2px 0;
}

.cohort-bench {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.cohort-bench strong {
  color: var(--text-main);
}

.cohort-context {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Card Container */
.analytics-card-container {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.container-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  display: block;
}

.container-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
}

.container-counter {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* Lifecycle Progress Bars */
.lifecycle-bars-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lifecycle-bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

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

.bar-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
}

.bar-stage-icon {
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.bar-stage-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.bar-stage-desc {
  font-size: 0.70rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.bar-track {
  width: 100%;
  height: 8px;
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.4s ease-out;
}

.bar-fill.grey { background-color: #94a3b8; }
.bar-fill.blue { background-color: #38bdf8; }
.bar-fill.purple { background-color: #a855f7; }
.bar-fill.green { background-color: #10b981; }

.bar-val {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

.lifecycle-footer-note {
  font-size: 0.67rem;
  color: var(--text-muted);
  line-height: 1.35;
  border-top: 1px dashed var(--border-color);
  padding-top: 8px;
}

/* Tier Comparison Grid */
.tier-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.tier-scorecard {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.tier-scorecard.active {
  border-color: var(--color-accent);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.tier-card-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-main);
}

.tier-card-score {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-green);
}

.tier-card-meta {
  font-size: 0.64rem;
  color: var(--text-muted);
}

/* Score Distribution Histogram */
.score-histogram-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.histogram-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.histogram-label {
  width: 38px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.histogram-track {
  flex: 1;
  height: 10px;
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.histogram-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #10b981);
  border-radius: var(--radius-pill);
  transition: width 0.3s;
}

.histogram-count {
  width: 48px;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
}

/* The Bluff Index */
.bluff-index-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.bluff-highlight-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-sizing: border-box;
}

.bluff-highlight-card.deceptive {
  border-top: 3px solid var(--color-red);
}

.bluff-highlight-card.toughest {
  border-top: 3px solid #38bdf8;
}

.bluff-card-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bluff-word-headline {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-main);
}

.bluff-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  margin-top: 2px;
}

.bluff-badge.wrong {
  background-color: rgba(239, 68, 68, 0.12);
  color: var(--color-red);
}

.bluff-badge.correct {
  background-color: rgba(56, 189, 248, 0.12);
  color: #0284c7;
}

/* Social Growth Studio */
.social-studio-intro {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.studio-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-accent);
}

.studio-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
}

.studio-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.social-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-hook-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.broadcast-hook-card {
  border-left: 4px solid var(--color-accent);
}

.hook-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hook-icon {
  font-size: 1.1rem;
}

.hook-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-main);
}

.hook-tag {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 700;
  background-color: rgba(124, 58, 237, 0.1);
  color: var(--color-accent);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.hook-preview-text {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-main);
  white-space: pre-line;
}

.btn-copy-hook {
  background-color: var(--color-accent);
  border: none;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: all var(--transition-fast);
}

.btn-copy-hook:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* Feedback Inbox */
.feedback-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.feedback-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feedback-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.feedback-author {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-main);
}

.feedback-category-chip {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--color-accent);
}

.feedback-message {
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.4;
}

.feedback-date {
  font-size: 0.66rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  #ownerModal {
    padding: 8px;
  }

  #ownerModal .modal-card.owner-modal-card {
    padding: 14px 12px;
    max-height: 94vh;
    border-radius: var(--radius-md);
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .owner-header-left {
    max-width: calc(100% - 90px);
  }

  .owner-header-title-row {
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
  }

  #ownerModal .modal-title {
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: normal;
  }

  .owner-badge-icon {
    font-size: 1.05rem;
  }

  .owner-live-tag {
    font-size: 0.58rem;
    padding: 1px 5px;
  }

  .owner-day-subtitle {
    font-size: 0.7rem;
  }

  .owner-header-actions {
    gap: 4px;
  }

  .btn-refresh-pill {
    padding: 4px 7px;
    font-size: 0.7rem;
  }

  /* Segmented Nav Bar */
  .analytics-nav-bar {
    display: flex !important;
    flex-shrink: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 3px;
    gap: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--bg-card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .analytics-tab-btn {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: 34px !important;
    padding: 6px 9px;
    font-size: 0.72rem;
    scroll-snap-align: start;
  }

  /* KPI Grid */
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .analytics-kpi-card {
    padding: 10px 10px;
    min-width: 0;
  }

  .kpi-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .kpi-label {
    font-size: 0.62rem;
    letter-spacing: 0.2px;
  }

  .kpi-chip {
    font-size: 0.56rem;
    padding: 1px 5px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kpi-value {
    font-size: 1.5rem;
  }

  .kpi-subtext {
    font-size: 0.62rem;
    line-height: 1.25;
    word-break: break-word;
  }

  /* Sub-Grid (4 mini cards) */
  .analytics-sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .analytics-mini-card {
    padding: 8px 6px;
    min-width: 0;
  }

  .mini-label {
    font-size: 0.58rem;
  }

  .mini-val {
    font-size: 1.05rem;
  }

  .mini-sub {
    font-size: 0.56rem;
  }

  /* Smart Growth Engine */
  .analytics-growth-engine {
    padding: 12px 10px;
    gap: 8px;
  }

  .growth-engine-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .growth-engine-title {
    font-size: 0.76rem;
  }

  .growth-engine-tag {
    margin-left: 0;
    font-size: 0.58rem;
  }

  .growth-recommendation-card {
    padding: 8px 10px;
    gap: 8px;
  }

  .rec-card-icon {
    font-size: 1rem;
  }

  .rec-card-title {
    font-size: 0.74rem;
  }

  .rec-card-text {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  /* Retention Tab */
  .analytics-retention-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .retention-cohort-card {
    padding: 10px 10px;
    min-width: 0;
  }

  .cohort-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .cohort-title {
    font-size: 0.65rem;
  }

  .cohort-status-badge {
    font-size: 0.58rem;
    padding: 1px 5px;
  }

  .cohort-rate {
    font-size: 1.5rem;
    margin: 2px 0;
  }

  .cohort-bench, .cohort-context {
    font-size: 0.6rem;
    line-height: 1.25;
  }

  .bar-info {
    width: auto;
    font-size: 0.72rem;
  }

  .bar-info span:first-child {
    font-size: 0.8rem;
  }

  .bar-count {
    font-size: 0.65rem;
  }

  /* Content Tab */
  .tier-comparison-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .tier-scorecard {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tier-card-score {
    font-size: 1.15rem;
    margin: 0;
  }

  .bluff-index-container {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bluff-highlight-card {
    padding: 10px 10px;
  }

  .bluff-word-headline {
    font-size: 0.98rem;
  }

  .histogram-row {
    font-size: 0.68rem;
    gap: 6px;
  }

  .histogram-label {
    width: 32px;
    font-size: 0.65rem;
  }

  .histogram-count {
    min-width: 44px;
    font-size: 0.65rem;
  }

  /* Social Tab */
  .social-hook-card {
    padding: 12px 10px;
  }

  .hook-card-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .hook-tag {
    margin-left: 0;
    font-size: 0.58rem;
  }

  .btn-copy-hook {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Feedback Tab */
  .feedback-card {
    padding: 10px 10px;
  }

  .feedback-message {
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   Player Insights & User Directory Modal Styles
   ========================================================================== */

#playerInsightsModal {
  z-index: 1250;
}

.player-insights-card {
  max-width: 540px;
  max-height: 86vh;
  padding: 20px 18px;
  gap: 12px;
}

.player-insights-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-insights-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* Tabs */
.insights-view-tabs {
  display: flex;
  background-color: var(--bg-card-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  gap: 4px;
}

.insights-view-tab {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.insights-view-tab.active {
  background-color: var(--color-accent);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

/* DAU Explainer Banner */
.dau-explainer-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-main);
}

.dau-explainer-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Insights Summary Chips */
.insights-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.insights-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
}

.insights-chip.highlight {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--color-green-dark);
}

/* Search Bar */
.insights-search-bar {
  width: 100%;
}

.insights-search-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card-subtle);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 500;
  box-sizing: border-box;
}

.insights-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--bg-card);
}

/* Players List */
.insights-player-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 46vh;
  padding-right: 2px;
}

.insights-player-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--transition-fast);
}

.insights-player-card:hover {
  border-color: var(--color-accent-border);
}

.insights-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

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

.insights-player-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}

.insights-player-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insights-country-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  color: var(--text-main);
  flex-shrink: 0;
}

.insights-player-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.insights-tier-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.12);
  color: var(--color-accent);
}

.insights-meta-pill {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

.insights-push-pill {
  font-size: 0.66rem;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.insights-push-pill.active {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--color-green-dark);
}

.insights-push-pill.inactive {
  background-color: rgba(156, 163, 175, 0.15);
  color: var(--text-muted);
}