@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,700&family=Montserrat:wght@300;400&display=swap');
/* Copyright (c) 2026 Enid A. Gaddis. 
   All Rights Reserved. 
*/
:root {
  /* Fellowship Community Church Branding */
  --fcc-blue: #004B93;        /* Deep Blue from text/cross */
  --fcc-gold: #FFD200;        /* Sunburst Gold */
  --fcc-sky: #00AEEF;         /* Sky Blue person */
  --fcc-pale-blue: #F0F5FA;   /* Light tint for sanctuary square background */
  --charcoal: #333333;
}

body, html { 
  margin: 0; 
  padding: 0; 
  height: 100%; 
  width: 100%; 
  font-family: 'Montserrat', sans-serif; 
  overflow: hidden; 
}

#app-background {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh;
  /* Option A: Textured Navy */
  background-color: var(--fcc-blue); 
  background-image: url('https://assets.codepen.io/17078699/silence+background.png');
  background-repeat: repeat;
  background-size: auto; /* Keeps pattern crisp and visible */
  /* This blend mode pulls the texture out through the navy blue */
  background-blend-mode: soft-light; 
  z-index: 1;
}

#sanctuary-square {
  background-color: var(--fcc-pale-blue);
  width: 90%; 
  max-width: 420px; 
  min-height: 580px;
  border-radius: 25px; 
  border: 3px solid var(--fcc-blue);
  padding: 30px 20px; 
  text-align: center; 
  z-index: 10;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  position: relative; 
  margin: auto; 
  top: 50%; 
  transform: translateY(-50%);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

h1 { font-family: 'Playfair Display', serif; color: var(--fcc-blue); font-size: 1.5rem; margin: 0 0 10px 0; }
h2 { font-family: 'Playfair Display', serif; color: var(--fcc-blue); font-size: 1.3rem; margin: 10px 0; }
p, div, span, strong { color: var(--charcoal); }

.grid-container {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px;
  margin: 15px 0; 
  max-height: 230px; 
  overflow-y: auto; 
  width: 100%;
}

.card {
  background: white; 
  border: 1px solid #ccc; 
  border-radius: 12px;
  padding: 10px; 
  font-size: 0.7rem; 
  text-align: left; 
  cursor: pointer;
  transition: all 0.2s ease;
}

.card.selected { 
  background-color: var(--fcc-sky) !important; 
  border-color: var(--fcc-blue) !important; 
  color: white !important; 
}
.card.selected strong, .card.selected span { color: white !important; }

.instruction-text {
  font-size: 0.75rem; 
  line-height: 1.5; 
  background: rgba(255,255,255,0.7);
  padding: 12px; 
  border-radius: 10px; 
  margin-bottom: 10px; 
  text-align: left;
  border-left: 4px solid var(--fcc-gold);
}

.timer-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 15px; }
.custom-input { width: 45px; padding: 6px; border: 1px solid var(--fcc-blue); border-radius: 5px; text-align: center; }

button {
  background: var(--fcc-gold); 
  color: var(--fcc-blue); 
  font-weight: bold;
  border: none;
  padding: 12px 20px; 
  border-radius: 30px; 
  cursor: pointer; 
  font-size: 0.85rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.secondary-btn {
  background: transparent !important;
  color: var(--fcc-blue) !important;
  border: 2px solid var(--fcc-blue) !important;
  padding: 8px 15px !important;
  font-size: 0.75rem !important;
  border-radius: 30px !important;
  font-weight: bold;
}

.reflect-btn {
  background: var(--fcc-sky);
  color: white !important; 
  width: 95%;
  text-align: center;
  border-radius: 15px;
  margin-bottom: 5px;
  padding: 12px;
  border: none;
  font-weight: 500;
}
.reflect-btn strong, .reflect-btn span { color: white !important; }

#timer-display { font-size: 3.5rem; color: var(--fcc-blue); margin: 10px 0; font-weight: bold; }

.candle-wrapper { width: 80px; margin: 5px auto; animation: glow 3s infinite ease-in-out; }
.candle-img { width: 100%; border-radius: 5px; }

@keyframes glow { 0%, 100% { filter: brightness(100%); } 50% { filter: brightness(115%); } }

#mute-container { position: absolute; top: 15px; right: 20px; z-index: 20; }
.mute-btn { 
  background: none; 
  border: 1px solid var(--fcc-blue); 
  color: var(--fcc-blue); 
  padding: 4px 8px; 
  font-size: 0.6rem; 
  border-radius: 15px; 
}

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