/* Theme CSS Variables */
:root {
  --primary: #739384;
  --primary-dark: #34473e;
  --accent-bg: #f4f7f5;
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-color: #e3eae5;
  --card-header-bg: #f8fafc;
}

body {
  background-color: var(--accent-bg);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  touch-action: manipulation;
}

.custom-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
  color: var(--text-main);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* TV Game Show Stage Viewport Frame */
.tv-stage-frame {
  position: relative;
  background-color: var(--card-bg);
  border: 4px solid #334155;
  border-radius: 1.75rem;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tv-stage-header-bezel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  padding: 0.5rem 1rem;
  border-bottom: 2px solid #334155;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tv-led-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: tv-pulse 2s infinite;
}

@keyframes tv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================================================
   FULL VISUAL THEME OVERRIDES (Sage, Boho, Rose, Cloud, Celestial)
   ========================================================================== */

/* Theme 1: Botanical Sage */
html.theme-sage body, body.theme-sage {
  background-color: #f3f7f4 !important;
  color: #2d3b34 !important;
}
html.theme-sage header {
  background-color: rgba(243, 247, 244, 0.95) !important;
  border-color: #d2ded6 !important;
}
html.theme-sage nav {
  background-color: #e4eee7 !important;
  border-color: #d2ded6 !important;
}
html.theme-sage .tab-btn { color: #4a6859; }
html.theme-sage .tab-btn.tab-active, html.theme-sage .mnav-btn.mnav-active {
  background-color: #4a6859 !important;
  color: #ffffff !important;
}
html.theme-sage .custom-card {
  background-color: #ffffff !important;
  border-color: #d2ded6 !important;
  color: #2d3b34 !important;
}
html.theme-sage .gsel-btn {
  background-color: #ffffff !important;
  border-color: #d2ded6 !important;
  color: #37473f !important;
}
html.theme-sage .gsel-btn:hover {
  border-color: #5a786a !important;
  background-color: #f3f7f4 !important;
}
html.theme-sage .gsel-btn.gsel-active {
  background-color: #4a6859 !important;
  color: #ffffff !important;
  border-color: #4a6859 !important;
}
html.theme-sage .timeline-btn.timeline-active {
  background-color: #4a6859 !important;
  color: #ffffff !important;
}
html.theme-sage .tv-stage-frame {
  border-color: #5a786a !important;
}

/* Theme 2: Boho Terracotta */
html.theme-boho body, body.theme-boho {
  background-color: #faf4f0 !important;
  color: #3c2016 !important;
}
html.theme-boho header {
  background-color: rgba(250, 244, 240, 0.95) !important;
  border-color: #f0dacd !important;
}
html.theme-boho nav {
  background-color: #f7ebe4 !important;
  border-color: #f0dacd !important;
}
html.theme-boho .tab-btn { color: #785a4f; }
html.theme-boho .tab-btn.tab-active, html.theme-boho .mnav-btn.mnav-active {
  background-color: #c86d51 !important;
  color: #ffffff !important;
}
html.theme-boho .custom-card {
  background-color: #ffffff !important;
  border-color: #f0dacd !important;
  color: #3c2016 !important;
}
html.theme-boho .gsel-btn {
  background-color: #ffffff !important;
  border-color: #f0dacd !important;
  color: #4a2d21 !important;
}
html.theme-boho .gsel-btn:hover {
  border-color: #c86d51 !important;
  background-color: #faf4f0 !important;
}
html.theme-boho .gsel-btn.gsel-active {
  background-color: #c86d51 !important;
  color: #ffffff !important;
  border-color: #c86d51 !important;
}
html.theme-boho .timeline-btn.timeline-active {
  background-color: #c86d51 !important;
  color: #ffffff !important;
}
html.theme-boho .tv-stage-frame {
  border-color: #c86d51 !important;
}

/* Theme 3: Rose Quartz */
html.theme-rose body, body.theme-rose {
  background-color: #fdf2f8 !important;
  color: #3b0764 !important;
}
html.theme-rose header {
  background-color: rgba(253, 242, 248, 0.95) !important;
  border-color: #fbcfe8 !important;
}
html.theme-rose nav {
  background-color: #fae8f5 !important;
  border-color: #fbcfe8 !important;
}
html.theme-rose .tab-btn { color: #701a75; }
html.theme-rose .tab-btn.tab-active, html.theme-rose .mnav-btn.mnav-active {
  background-color: #db2777 !important;
  color: #ffffff !important;
}
html.theme-rose .custom-card {
  background-color: #ffffff !important;
  border-color: #fbcfe8 !important;
  color: #3b0764 !important;
}
html.theme-rose .gsel-btn {
  background-color: #ffffff !important;
  border-color: #fbcfe8 !important;
  color: #701a75 !important;
}
html.theme-rose .gsel-btn:hover {
  border-color: #db2777 !important;
  background-color: #fdf2f8 !important;
}
html.theme-rose .gsel-btn.gsel-active {
  background-color: #db2777 !important;
  color: #ffffff !important;
  border-color: #db2777 !important;
}
html.theme-rose .timeline-btn.timeline-active {
  background-color: #db2777 !important;
  color: #ffffff !important;
}
html.theme-rose .tv-stage-frame {
  border-color: #db2777 !important;
}

/* Theme 4: Soft Cloud Blue */
html.theme-cloud body, body.theme-cloud {
  background-color: #f0f9ff !important;
  color: #0c4a6e !important;
}
html.theme-cloud header {
  background-color: rgba(240, 249, 255, 0.95) !important;
  border-color: #bae6fd !important;
}
html.theme-cloud nav {
  background-color: #e0f2fe !important;
  border-color: #bae6fd !important;
}
html.theme-cloud .tab-btn { color: #0369a1; }
html.theme-cloud .tab-btn.tab-active, html.theme-cloud .mnav-btn.mnav-active {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
html.theme-cloud .custom-card {
  background-color: #ffffff !important;
  border-color: #bae6fd !important;
  color: #0c4a6e !important;
}
html.theme-cloud .gsel-btn {
  background-color: #ffffff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}
html.theme-cloud .gsel-btn:hover {
  border-color: #0284c7 !important;
  background-color: #f0f9ff !important;
}
html.theme-cloud .gsel-btn.gsel-active {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}
html.theme-cloud .timeline-btn.timeline-active {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
html.theme-cloud .tv-stage-frame {
  border-color: #0284c7 !important;
}

/* Theme 5: Celestial Dark (Comprehensive High-Contrast Night Mode) */
html.theme-celestial body, body.theme-celestial {
  background-color: #0b1329 !important;
  color: #f8fafc !important;
}
html.theme-celestial header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: #334155 !important;
}
html.theme-celestial nav {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}
html.theme-celestial .tab-btn { color: #94a3b8 !important; }
html.theme-celestial .tab-btn:hover { color: #ffffff !important; }
html.theme-celestial .tab-btn.tab-active, html.theme-celestial .mnav-btn.mnav-active {
  background-color: #f59e0b !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.theme-celestial .custom-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html.theme-celestial .gsel-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html.theme-celestial .gsel-btn:hover {
  border-color: #f59e0b !important;
  background-color: #0f172a !important;
}
html.theme-celestial .gsel-btn.gsel-active {
  background-color: #f59e0b !important;
  color: #0f172a !important;
  border-color: #f59e0b !important;
}
html.theme-celestial .timeline-btn {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}
html.theme-celestial .timeline-btn.timeline-active {
  background-color: #f59e0b !important;
  color: #0f172a !important;
}
html.theme-celestial .tv-stage-frame {
  border-color: #f59e0b !important;
  box-shadow: 0 20px 40px -15px rgba(245, 158, 11, 0.25) !important;
}

/* Celestial Dark Mode Text & Container Contrast Fixes */
html.theme-celestial h1,
html.theme-celestial h2,
html.theme-celestial h3,
html.theme-celestial h4,
html.theme-celestial h5,
html.theme-celestial h6,
html.theme-celestial p,
html.theme-celestial span,
html.theme-celestial label,
html.theme-celestial li,
html.theme-celestial td,
html.theme-celestial th {
  color: #f8fafc;
}

html.theme-celestial .text-slate-900,
html.theme-celestial .text-slate-800,
html.theme-celestial .text-slate-700,
html.theme-celestial .text-slate-600,
html.theme-celestial .text-slate-500,
html.theme-celestial .text-gray-900,
html.theme-celestial .text-gray-800,
html.theme-celestial .text-gray-700,
html.theme-celestial .text-gray-600,
html.theme-celestial .text-gray-500 {
  color: #e2e8f0 !important;
}

html.theme-celestial .text-slate-400,
html.theme-celestial .text-gray-400 {
  color: #94a3b8 !important;
}

/* Celestial Dark Card & Container Overrides */
html.theme-celestial .bg-white,
html.theme-celestial .bg-slate-50,
html.theme-celestial .bg-gray-50 {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

/* Celestial Dark Badge Overrides (High-contrast, glowing badges) */
html.theme-celestial .bg-pink-100,
html.theme-celestial .bg-rose-100 {
  background-color: rgba(219, 39, 119, 0.25) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(244, 114, 182, 0.4) !important;
}
html.theme-celestial .bg-pink-100 *,
html.theme-celestial .bg-rose-100 * {
  color: #f472b6 !important;
}

html.theme-celestial .bg-emerald-100,
html.theme-celestial .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
}
html.theme-celestial .bg-emerald-100 *,
html.theme-celestial .bg-green-100 * {
  color: #34d399 !important;
}

html.theme-celestial .bg-sky-100,
html.theme-celestial .bg-blue-100 {
  background-color: rgba(2, 132, 199, 0.25) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
html.theme-celestial .bg-sky-100 *,
html.theme-celestial .bg-blue-100 * {
  color: #38bdf8 !important;
}

html.theme-celestial .bg-amber-100,
html.theme-celestial .bg-yellow-100 {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}
html.theme-celestial .bg-amber-100 *,
html.theme-celestial .bg-yellow-100 * {
  color: #fbbf24 !important;
}

html.theme-celestial .bg-purple-100,
html.theme-celestial .bg-indigo-100,
html.theme-celestial .bg-violet-100 {
  background-color: rgba(147, 51, 234, 0.25) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
}
html.theme-celestial .bg-purple-100 *,
html.theme-celestial .bg-indigo-100 *,
html.theme-celestial .bg-violet-100 * {
  color: #c084fc !important;
}

html.theme-celestial .bg-slate-100,
html.theme-celestial .bg-slate-200,
html.theme-celestial .bg-gray-100,
html.theme-celestial .bg-gray-200 {
  background-color: #334155 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
}
html.theme-celestial .bg-slate-100 *,
html.theme-celestial .bg-slate-200 *,
html.theme-celestial .bg-gray-100 *,
html.theme-celestial .bg-gray-200 * {
  color: #f8fafc !important;
}

/* Celestial Dark Inputs & Textareas */
html.theme-celestial input,
html.theme-celestial textarea,
html.theme-celestial select {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
html.theme-celestial input::placeholder,
html.theme-celestial textarea::placeholder {
  color: #64748b !important;
}

/* Celestial Dark Accents */
html.theme-celestial .text-pink-600, html.theme-celestial .text-pink-500 { color: #f472b6 !important; }
html.theme-celestial .text-rose-600, html.theme-celestial .text-rose-500 { color: #fb7185 !important; }
html.theme-celestial .text-purple-600, html.theme-celestial .text-purple-500 { color: #c084fc !important; }
html.theme-celestial .text-sky-600, html.theme-celestial .text-sky-500 { color: #38bdf8 !important; }
html.theme-celestial .text-amber-600, html.theme-celestial .text-amber-500 { color: #fbbf24 !important; }
html.theme-celestial .text-emerald-600, html.theme-celestial .text-emerald-500 { color: #34d399 !important; }

/* Flip Card styles */
.card-flip-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-flipped {
  transform: rotateY(180deg);
}

/* Top nav tab buttons */
.tab-btn {
  color: #475569;
}
.tab-btn.tab-active {
  background-color: #0f172a;
  color: #ffffff;
}

/* Mobile bottom nav */
.mnav-btn { color: #64748b; }
.mnav-btn.mnav-active { color: #db2777; font-weight: 700; }

/* Planner timeline pills */
.timeline-btn {
  background-color: #f1f5f9;
  color: #334155;
}
.timeline-btn.timeline-active {
  background-color: #0284c7;
  color: #ffffff;
}

/* Game selector grid tiles */
.gsel-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  text-align: left;
  transition: all 0.15s ease;
  cursor: pointer;
  width: 100%;
}
.gsel-btn:hover { border-color: #f9a8d4; }
.gsel-btn.gsel-active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.gsel-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.gsel-locked:hover { border-color: #e2e8f0; }
.gsel-lock { margin-left: auto; font-size: 0.7rem; }

/* Game instructions accordion style */
.instructions-accordion-btn {
  transition: background-color 0.2s ease;
}

/* Keepsake Vault styling */
.keepsake-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.keepsake-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   PRINT STYLES FOR KEEPSAKE VAULT (window.print())
   ========================================================================== */
@media print {
  .no-print, header, nav, #scoreboard-bar, #game-selector-grid, .tv-stage-frame, .tab-content {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  #keepsake-vault-modal {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
  }
  #keepsake-vault-modal * {
    visibility: visible !important;
    color: #000000 !important;
    background: #ffffff !important;
  }
  #keepsake-vault-modal > div {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #keepsake-vault-modal button {
    display: none !important;
  }
}