@import url('https://fonts.googleapis.com/css?family=Roboto:100,300');

body { 
	font-family: 'Inter', sans-serif; 
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding-bottom: 80px;
}

.glass-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.view { 
	display: none; 
}

.view.active { 
	display: block; 
	animation: fadeIn 0.3s ease-in; 
}

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

.chart-container { 
	position: relative; 
	width: 100%; 
	max-width: 700px; 
	margin: auto; 
	height: 280px; 
}

@media (min-width: 768px) { 
	.chart-container { 
		height: 320px; 
	}
	body { 
		padding-bottom: 0; 
	}
}

#lock-screen {
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	background: #000;
	color: #fff; 
	z-index: 9999; 
	display: none;
	flex-direction: column; 
	align-items: center; 
	justify-content: center;
}

.loading-spinner {
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top: 3px solid white;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
	display: inline-block;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.promo-card { 
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.promo-card:hover { 
	transform: translateY(-8px); 
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); 
}

.nav-btn,
.nav-btn-mobile { 
	transition: all 0.2s ease; 
}

.progress-bar { 
	transition: width 0.5s ease; 
}

#lock-activity-suggestion { 
	transition: opacity 0.5s ease-in-out; 
}

.promo-details {
	transition: all 0.3s ease-in-out;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
}

.promo-details.expanded {
	max-height: 200px;
	opacity: 1;
	margin-top: 1rem;
}

.group-progress-details {
	transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
}

.group-progress-details.expanded {
	max-height: 500px; /* Generous height for member list */
	opacity: 1;
	margin-top: 1rem;
}
.prize-badge {
    max-height: 120px;
    width: auto;
    display: block;
}

/* Style for the header logo */
#header-logo {
    height: 60px;
}

#lock-screen {
	position: fixed; 
	top: 0;
}

/* --- Circular Progress Bar Styles --- */
.e-c-base {
  fill: none;
  stroke: #374151; /* gray-700 */
  stroke-width: 4px;
}

.e-c-progress {
  fill: none;
  stroke: #8b5cf6; /* purple-500 */
  stroke-width: 4px;
  transition: stroke-dashoffset 0.5s linear; /* Smoother transition */
}

.e-c-pointer {
  fill: #FFF;
  stroke: #8b5cf6; /* purple-500 */
  stroke-width: 2px;
}

#e-pointer {
  transition: transform 0.5s linear; /* Smoother transition */
}

/* --- Lock Screen Timer Text --- */
#lock-goal {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 3.2rem; /* 60px */
  line-height: 1;
}

/* --- Lock Screen Pause Button --- */
.lock-pause-btn {
  outline: none;
  background: transparent;
  border: none;
  margin-top: 0.5rem;
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.lock-pause-btn:hover {
  opacity: 1;
}

/* Play icon (triangle) */
.lock-pause-btn.play::before {
  display: block;
  content: "";
  position: absolute;
  top: 12px; /* (60 - 36) / 2 */
  left: 21px; /* (60 - 27) / 2 + 2 */
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 27px solid #FFFFFF;
}

/* Pause icon (bars) */
.lock-pause-btn.pause::after {
  content: "";
  position: absolute;
  top: 12px; /* (60 - 36) / 2 */
  left: 15px; /* (60 - 30) / 2 */
  width: 24px; /* 10px bar + 6px space + 10px bar -> adjusted width */
  height: 36px;
  background-color: transparent;
  border-radius: 2px;
  border: 6px solid #FFFFFF; /* 6px bar width */
  border-top: none;
  border-bottom: none;
}