.task-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.task-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px var(--shadow); }
.task-card.completed {
  opacity: 0.82;
}
.task-card.completed .task-card-title {
  text-decoration: line-through;
  opacity: 0.7;
}
.task-card.overdue {
  border-color: var(--coral);
  background: #fff5f5;
}
.task-card.rescheduled {
  opacity: 0.58;
  border-style: dashed;
  background: var(--beige);
}
.task-reschedule-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--soft-brown);
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 4px;
}
.task-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.task-card-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.task-card-body { flex: 1; min-width: 0; }
.task-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-card-meta {
  font-size: 0.75rem;
  color: var(--soft-brown);
  margin-top: 2px;
}
.task-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.task-card-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  background: transparent;
}
.task-card-check.checked {
  border-color: transparent;
  background: var(--mint);
  color: var(--brown);
}
.task-card-check:hover { border-color: var(--soft-brown); }

.task-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
  border: 2px solid transparent;
  position: relative;
  max-width: 210px;
}
.chip-icon { flex-shrink: 0; }
.chip-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  min-width: 0;
  flex: 1;
}
.chip-assignees { flex-shrink: 0; }
.task-chip:hover { transform: scale(1.04); }
.task-chip.completed { opacity: 0.65; text-decoration: line-through; }
.task-chip.overdue { border-color: var(--coral) !important; }

.person-section {
  margin-bottom: 18px;
}
.person-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.person-section-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.6);
}
.person-avatar-sm { width: 28px; height: 28px; font-size: 0.85rem; }
.person-avatar-md { width: 38px; height: 38px; font-size: 1.1rem; }
.person-avatar-lg { width: 54px; height: 54px; font-size: 1.5rem; }

/* ---- Role pill selector ---- */
.role-pill-group {
  display: flex; gap: 10px;
}
.role-pill {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 8px;
  background: var(--beige); border: 2px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  font-family: var(--font); text-align: center;
}
.role-pill:hover { border-color: var(--orange); }
.role-pill.selected {
  border-color: var(--orange);
  background: #fff3e6;
}
.role-pill-icon { font-size: 1.4rem; line-height: 1; }
.role-pill-name { font-size: 0.88rem; font-weight: 700; color: var(--brown); }
.role-pill-hint { font-size: 0.7rem; color: var(--soft-brown); }

.progress-bar-wrap {
  background: #e6d8c8;
  border-radius: 20px;
  height: 10px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.4s ease;
  background: var(--rose);
}
.progress-bar-fill.done { background: var(--mint); }
.progress-bar-label {
  font-size: 0.8rem;
  color: var(--soft-brown);
  margin-top: 5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.stacked-bar-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 28px;
  display: flex;
  border: 1.5px solid var(--border);
}
.stacked-bar-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brown);
  transition: width 0.4s ease;
  overflow: hidden;
  white-space: nowrap;
}

.audit-metric-row {
  margin-bottom: 16px;
}
.audit-metric-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.audit-metric-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brown);
}
.audit-metric-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.audit-metric-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brown);
}
.audit-metric-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74,53,40,0.35);
  z-index: 200;
  backdrop-filter: blur(3px);
}
.modal-overlay.hidden { display: none; }

.modal {
  position: fixed;
  z-index: 201;
  background: var(--cream);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 20px 30px;
  animation: slideUp 0.25s ease;
  box-shadow: 0 -8px 40px rgba(74,53,40,0.18);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-title { font-size: 1.2rem; font-weight: 700; }
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--beige);
  border: 2px solid var(--border);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--border); }
.modal-footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}
.modal-footer .btn { flex: 1; }

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--brown);
  color: var(--cream);
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 300;
  box-shadow: 0 4px 20px rgba(74,53,40,0.35);
  animation: slideUp 0.2s ease;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.member-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.member-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px var(--shadow); }
.member-card-info { flex: 1; }
.member-card-name { font-size: 1rem; font-weight: 700; }
.member-card-stats { font-size: 0.8rem; color: var(--soft-brown); margin-top: 2px; }
.member-card-actions { display: flex; gap: 6px; }

.person-view-tabs {
  display: flex;
  gap: 4px;
  background: var(--beige);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin-bottom: 16px;
}
.person-view-tab {
  flex: 1;
  padding: 7px 4px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  color: var(--soft-brown);
  border: none;
  background: none;
}
.person-view-tab.active {
  background: var(--white);
  color: var(--brown);
  box-shadow: 0 1px 4px var(--shadow);
}

.category-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.effort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.effort-bar-label {
  width: 120px;
  font-size: 0.82rem;
  color: var(--soft-brown);
  flex-shrink: 0;
}
.effort-bar-track {
  flex: 1;
  height: 10px;
  background: var(--beige);
  border-radius: 20px;
  overflow: hidden;
}
.effort-bar-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.4s ease;
}
.effort-bar-value {
  width: 36px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brown);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.calendar-day-header {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--soft-brown);
  padding: 5px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calendar-cell {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 62px;
  padding: 4px;
  cursor: pointer;
  transition: background var(--transition);
  overflow: hidden;
}
.calendar-cell:hover { background: var(--beige); }
.calendar-cell.today { border-color: var(--brown); border-width: 2px; background: #fffef8; }
.calendar-cell.other-month { opacity: 0.4; }
.calendar-cell-date {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--soft-brown);
  margin-bottom: 3px;
}
.calendar-cell.today .calendar-cell-date { color: var(--brown); }
.calendar-chips { display: flex; flex-wrap: wrap; gap: 2px; }
.calendar-chip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.calendar-chip.completed { opacity: 0.5; }
.calendar-chip-add {
  font-size: 0.65rem;
  color: var(--soft-brown);
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 4px;
}
.calendar-chip-add:hover { background: var(--beige); }

.week-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 2px;
  min-width: 500px;
}
.week-col-header {
  text-align: center;
  padding: 8px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--soft-brown);
  border-bottom: 1.5px solid var(--border);
}
.week-col-header.today-col {
  color: var(--brown);
  background: var(--beige);
  border-radius: var(--radius-sm);
}
.week-person-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--soft-brown);
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.week-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
}
.week-cell.today-cell { background: #fffef8; border-color: var(--brown); }

.chore-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.chore-chart-card {
  background: var(--white);
  border: 2.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: center;
  position: relative;
}
.chore-chart-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); }
.chore-chart-card.completed {
  border-color: transparent;
}
.chore-chart-card.completed .chore-check {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.chore-chart-icon { font-size: 1.8rem; margin-bottom: 6px; }
.chore-chart-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brown);
  word-break: break-word;
}
.chore-chart-time {
  font-size: 0.72rem;
  color: var(--soft-brown);
  margin-top: 3px;
}
.chore-chart-assignee {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1rem;
}

.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.matrix-quadrant {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  min-height: 140px;
  background: var(--white);
}
.matrix-quadrant-title {
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.matrix-tasks { display: flex; flex-direction: column; gap: 5px; }
.matrix-task-item {
  background: var(--beige);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
/* #2: Matrix quadrant select — styled to match the app, not raw browser chrome */
.matrix-quadrant-select {
  font-size: 0.72rem;
  font-family: var(--font);
  font-weight: 600;
  color: var(--brown);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 22px 3px 7px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a6f5a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
  transition: border-color var(--transition);
  width: auto;
  min-width: 110px;
}
.matrix-quadrant-select:hover { border-color: var(--soft-brown); }
.matrix-quadrant-select:focus { border-color: var(--rose); outline: none; }

.conversation-script {
  background: var(--white);
  border-left: 4px solid var(--lavender);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--brown);
  line-height: 1.5;
  font-style: italic;
}

.action-plan-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.action-plan-card-icon { font-size: 1.4rem; flex-shrink: 0; }
.action-plan-card-body { flex: 1; }
.action-plan-card-title { font-size: 0.92rem; font-weight: 700; }
.action-plan-card-desc { font-size: 0.8rem; color: var(--soft-brown); margin-top: 3px; }

.suggestion-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  text-align: center;
}
.stat-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brown);
  line-height: 1;
}
.stat-card-label {
  font-size: 0.72rem;
  color: var(--soft-brown);
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.celebration-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.celebration-msg {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown);
  box-shadow: 0 8px 32px var(--shadow);
  animation: slideUp 0.3s ease, confettiBurst 0.8s 0.5s ease forwards;
}

/* ---- Schedule Timeline ---- */
.schedule-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 20px;
}

/* ---- Now line ---- */
.timeline-now {
  display: flex; align-items: center; margin: 10px 0 6px; position: relative; z-index: 2;
}
.timeline-now-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--coral, #e55); margin-right: 0;
  box-shadow: 0 0 0 3px rgba(229,85,85,0.18);
}
.timeline-now-line {
  flex: 1; height: 2px;
  background: linear-gradient(to right, var(--coral, #e55), rgba(229,85,85,0.2));
  border-radius: 1px;
}
.timeline-now-label {
  font-size: 0.68rem; font-weight: 700; color: var(--coral, #e55);
  background: var(--cream); padding: 3px 9px; border-radius: 10px;
  border: 1.5px solid var(--coral, #e55); white-space: nowrap; margin-left: 8px;
  flex-shrink: 0;
}

/* ---- Active glow animation ---- */
@keyframes activeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 64, 64, 0); border-color: var(--border); }
  50%       { box-shadow: 0 0 18px 4px rgba(247, 169, 110, 0.5); border-color: var(--orange); }
}

/* ---- Duration badge on schedule cards ---- */
.sched-dur-badge {
  font-size: 0.65rem; font-weight: 600;
  color: var(--soft-brown); background: var(--beige);
  border-radius: 8px; padding: 1px 6px; white-space: nowrap;
  flex-shrink: 0; line-height: 1.6;
}

/* ---- Schedule Item Card ---- */
.schedule-item-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 12px 10px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: transform var(--transition), border-color var(--transition), opacity var(--transition);
}
.schedule-item-card:hover { transform: translateY(-1px); box-shadow: 0 3px 10px var(--shadow); }
.schedule-item-card.completed {
  opacity: 0.55; background: var(--beige);
}
.schedule-item-card.completed .schedule-item-title { text-decoration: line-through; color: var(--soft-brown); }
.schedule-item-card.sched-past {
  opacity: 0.52; background: var(--beige);
}
.schedule-item-card.sched-past .schedule-item-title { color: var(--soft-brown); }
.schedule-item-card.sched-past .schedule-item-icon { filter: grayscale(0.45); }
.schedule-item-card.active-now {
  animation: activeGlow 2.6s ease-in-out infinite;
  border-color: var(--orange);
  background: #fffef4;
}
.schedule-item-time {
  font-size: 0.75rem; font-weight: 700; color: var(--soft-brown);
  flex-shrink: 0; white-space: nowrap; text-align: right; margin-left: auto;
}

/* ---- Done-check circle on schedule cards ---- */
.sched-done-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--brown);
  cursor: pointer; flex-shrink: 0; margin-left: 4px;
  transition: background var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.sched-done-check:hover { border-color: var(--soft-brown); }
.sched-done-check.checked {
  background: var(--mint); border-color: transparent; color: var(--brown);
}
.schedule-item-icon {
  font-size: 1.1rem; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.schedule-item-body { flex: 1; min-width: 0; }
.schedule-item-title { font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.sched-cat-tag {
  font-size: 0.68rem; font-weight: 600; color: var(--soft-brown);
  background: var(--beige); border: 1px solid var(--border);
  border-radius: 8px; padding: 1px 6px; display: inline-block;
}
.sched-rec-badge {
  font-size: 0.68rem; opacity: 0.65;
}
.sched-member-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 0.72rem;
  border: 1.5px solid var(--white); flex-shrink: 0;
}

/* ---- Sched week chip ---- */
.sched-week-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 14px; font-size: 0.72rem; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--white); white-space: nowrap;
}

/* ---- Action Sheet (bottom sheet) ---- */
.action-sheet-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(74, 53, 40, 0.38);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.22s ease;
}
.action-sheet-overlay.open { opacity: 1; }

.action-sheet {
  width: 100%; max-width: 540px;
  background: var(--cream);
  border-radius: 24px 24px 0 0;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.05, 0.64, 1);
  max-height: 88vh; overflow-y: auto;
}
.action-sheet-overlay.open .action-sheet { transform: translateY(0); }

.action-sheet-handle {
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 10px auto 4px;
}
.action-sheet-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 14px;
  border-bottom: 1.5px solid var(--border);
}
.action-sheet-item-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.action-sheet-title  { font-size: 1rem; font-weight: 700; color: var(--brown); }
.action-sheet-subtitle { font-size: 0.78rem; color: var(--soft-brown); margin-top: 2px; }
.action-sheet-actions { padding: 6px 0 4px; }
.action-sheet-btn {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 13px 22px; text-align: left;
  background: none; border: none; cursor: pointer;
  font-size: 0.95rem; color: var(--brown); font-family: var(--font);
  transition: background var(--transition);
}
.action-sheet-btn:hover, .action-sheet-btn:active { background: var(--beige); }
.action-sheet-btn.danger { color: #c0392b; }
.action-sheet-btn-icon { font-size: 1.05rem; width: 26px; text-align: center; flex-shrink: 0; }
.action-sheet-divider { height: 1px; background: var(--border); margin: 5px 22px; }

/* ---- Drag mode ---- */
.schedule-item-card[data-action="open-schedule-action-sheet"] { cursor: grab; }
.schedule-item-card.dragging {
  position: relative; z-index: 50;
  box-shadow: 0 14px 40px rgba(74,53,40,0.22);
  opacity: 0.96;
  cursor: grabbing;
}
.drag-time-preview {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: var(--brown); color: var(--cream);
  font-size: 0.73rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  pointer-events: none; white-space: nowrap; z-index: 51;
}

/* ---- Week schedule grid ---- */
.week-grid-sched {
  display: grid; grid-template-columns: 44px repeat(7, 1fr);
  gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* ---- Library Grid ---- */
.library-grid { display: flex; flex-direction: column; gap: 8px; }
.library-group-header {
  font-size: 0.82rem; font-weight: 700; color: var(--soft-brown);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 0 4px; border-bottom: 1.5px solid var(--border); margin-bottom: 4px;
}

/* ---- Library card: tap / hover feedback ---- */
.schedule-item-card[data-action="open-edit-schedule-item-modal"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.schedule-item-card[data-action="open-edit-schedule-item-modal"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--shadow);
  border-color: var(--orange);
}
.schedule-item-card[data-action="open-edit-schedule-item-modal"]:active {
  transform: scale(0.98);
  box-shadow: none;
  border-color: var(--orange);
  background: var(--beige);
}

/* ---- Inactive library card ---- */
.schedule-item-card.sched-inactive {
  opacity: 0.55;
  background: var(--beige);
  border-style: dashed;
}

/* ---- Schedule active toggle (card inline) ---- */
.sched-active-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 5px; border-radius: 20px; border: 2px solid;
  font-family: var(--font); font-size: 0.72rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.sched-active-toggle:active { transform: scale(0.93); }
.sched-active-toggle.is-active  { background: #d4f0e0; border-color: #5aad80; color: #1a6b35; }
.sched-active-toggle.is-inactive { background: var(--beige); border-color: var(--border); color: var(--soft-brown); }

/* mini track */
.sched-active-track {
  position: relative; width: 26px; height: 15px;
  border-radius: 8px; flex-shrink: 0;
  transition: background 0.18s;
}
.is-active  .sched-active-track { background: #5aad80; }
.is-inactive .sched-active-track { background: #c8b8ac; }

/* sliding thumb */
.sched-active-thumb {
  position: absolute; top: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: left 0.18s;
}
.is-active  .sched-active-thumb { left: 13px; }
.is-inactive .sched-active-thumb { left: 2px; }

.sched-active-label { line-height: 1; }

/* ---- Active toggle section (top of schedule item form) ---- */
.si-active-section {
  background: var(--beige); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px;
}
.si-active-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.si-active-label { font-size: 0.95rem; font-weight: 700; color: var(--brown); }
.si-active-hint  { font-size: 0.76rem; color: var(--soft-brown); margin-top: 3px; line-height: 1.4; }

/* ---- Toggle switch ---- */
.si-toggle {
  position: relative; display: inline-block;
  width: 48px; height: 28px; flex-shrink: 0; cursor: pointer;
}
.si-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.si-toggle-thumb {
  position: absolute; inset: 0;
  background: var(--border); border-radius: 28px;
  transition: background 0.22s ease;
}
.si-toggle-thumb::before {
  content: "";
  position: absolute; width: 22px; height: 22px;
  left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: transform 0.22s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.si-toggle input:checked + .si-toggle-thumb { background: #5aad80; }
.si-toggle input:checked + .si-toggle-thumb::before { transform: translateX(20px); }

/* ---- Chore Library Card ---- */
.chore-library-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: flex-start;
}
.chore-library-card:active {
  transform: scale(0.98);
  box-shadow: none;
}
.chore-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Chore Summary Row ---- */
.chore-summary-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.chore-summary-row:last-child { border-bottom: none; }

/* ---- Kid Card ---- */
.kid-card { margin-bottom: 4px; }
.kid-points-badge {
  background: var(--mango); color: var(--brown);
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.82rem; font-weight: 700; flex-shrink: 0;
}

/* ---- Reward Card ---- */
.reward-card {
  background: var(--white); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.reward-card.greyed { opacity: 0.6; }
.reward-card-body { flex: 1; min-width: 0; }
.reward-card-title { font-size: 0.92rem; font-weight: 700; }
.reward-points-cost { font-size: 0.78rem; color: var(--soft-brown); font-weight: 600; margin-top: 3px; }

/* ---- Page helper text ---- */
.page-helper-text {
  font-size: 0.8rem;
  color: var(--soft-brown);
  margin: 4px 0 0;
  opacity: 0.85;
  line-height: 1.4;
}

/* ---- Schedule crosslink cards (chores link + plan nudge) ---- */
.schedule-crosslink-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--beige);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 14px 0 2px;
  border: 1.5px solid var(--border);
}
.schedule-crosslink-card.plan-nudge-card {
  background: #fff5ee;
  border-color: #f6d5c0;
}
.crosslink-icon {
  flex-shrink: 0;
  color: var(--soft-brown);
  display: flex;
  align-items: center;
}
.crosslink-body { flex: 1; min-width: 0; }
.crosslink-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 2px;
}
.crosslink-desc {
  font-size: 0.78rem;
  color: var(--soft-brown);
  line-height: 1.4;
}
.crosslink-cta { flex-shrink: 0; }

/* ---- Kid Wins preview cards (empty state) ---- */
.kidwins-preview-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.kidwins-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.kidwins-preview-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 3px; }
.kidwins-preview-desc { font-size: 0.78rem; color: var(--soft-brown); line-height: 1.4; }

/* ---- Schedule week view (improved) ---- */
.week-heatmap-section {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 12px 0;
}
.week-heatmap-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--soft-brown);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.week-heatmap { display: flex; flex-direction: column; gap: 4px; }
.week-heat-header-row {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 3px;
}
.week-heat-day-label {
  font-size: 0.65rem;
  text-align: center;
  color: var(--soft-brown);
  font-weight: 600;
}
.week-heat-day-label.today-heat-label { color: var(--brown); font-weight: 800; }
.week-heat-row {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 3px;
  align-items: center;
}
.week-heat-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.week-heat-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}
.week-heat-cell {
  position: relative;
  height: 22px;
  border-radius: 5px;
  background: var(--beige);
  border: 1px solid var(--border);
  overflow: hidden;
}
.week-heat-fill {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  transition: opacity 0.25s ease;
}
.week-heat-cell.today-heat { outline: 2px solid var(--brown); outline-offset: 1px; }

/* Legacy stacked list (kept for compat) */
.week-day-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* New 7-column horizontal scroll week layout */
.week-day-cols {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 100px;
  scroll-snap-type: x mandatory;
  position: relative;
}
.week-day-card {
  flex: 0 0 calc(33% - 4px);
  min-width: 110px;
  max-width: 160px;
  scroll-snap-align: start;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0.35;
  transition: opacity 0.22s ease;
}
.week-day-card.today-day { border-color: var(--orange); }
.week-day-card.focused {
  opacity: 1;
  border-color: var(--brown);
  border-width: 2px;
}
.week-day-card.focused .week-day-name { color: var(--brown); font-weight: 800; }
.week-day-card.focused .week-day-num  { color: var(--brown); }
.week-day-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  background: var(--beige);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.week-day-header:hover { background: #efe5d8; }
.week-day-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--soft-brown);
}
.week-day-name.today-marker { color: var(--brown); }
.week-day-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--brown);
}
.week-day-count {
  margin-left: auto;
  background: var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--soft-brown);
}
.week-day-items { padding: 5px 7px; display: flex; flex-direction: column; gap: 3px; }
.week-day-empty { font-size: 0.75rem; color: var(--soft-brown); padding: 4px 0; display: block; opacity: 0.5; }
.week-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.week-item-row:hover { background: var(--beige); }
.week-item-row.done { opacity: 0.55; }
.week-done-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--mint);
  transition: border-color var(--transition), background var(--transition);
}
.week-done-check.checked {
  background: var(--mint);
  border-color: var(--mint);
  color: white;
  font-weight: 800;
}
.week-item-body { flex: 1; min-width: 0; }
.week-item-title { font-size: 0.78rem; font-weight: 600; color: var(--brown); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-item-meta {
  font-size: 0.72rem;
  color: var(--soft-brown);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.week-member-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
}

/* ---- Chore chips in week column view ---- */
.week-chore-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--orange);
  background: var(--off-white, #fdf8f3);
  cursor: pointer;
  transition: background var(--transition);
  min-height: 0;
}
.week-chore-chip:hover { background: var(--beige); }
.week-chore-chip.done { opacity: 0.5; }
.week-chore-chip.done .week-chore-title { text-decoration: line-through; }
.week-chore-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brown);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-chore-assignees {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.week-chore-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
}

/* ---- Settings: sync + coming-soon rows ---- */
.settings-sync-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--beige);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.settings-sync-icon { font-size: 1.5rem; flex-shrink: 0; }
.settings-coming-soon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--soft-brown);
}
.settings-coming-soon-row:last-child { border-bottom: none; }

/* ---- Person filter pill extras ---- */
.pill-completion {
  font-size: 0.68rem; font-weight: 700;
  color: var(--soft-brown); background: rgba(0,0,0,0.06);
  border-radius: 8px; padding: 1px 5px; margin-left: 3px;
}
.pill-completion.all-done {
  color: #1a6b35; background: #d4f0e0;
}
.pill-time {
  font-size: 0.68rem; font-weight: 600;
  color: var(--soft-brown); opacity: 0.85;
  margin-left: 3px;
}
.audit-filter-btn.pill-all-done {
  border-color: #5aad80;
}

/* ---- Now line label: cap width so long "Next: …" labels don't overflow on mobile ---- */
.timeline-now-label {
  max-width: 54vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Eisenhower matrix task item layout ---- */
.matrix-task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  flex-wrap: wrap;
}
.matrix-task-label {
  font-size: 0.82rem;
  color: var(--brown);
  flex: 1;
  min-width: 0;
}

/* ---- Custom matrix dropdown (replaces native <select>) ---- */
.matrix-dd {
  position: relative;
  flex-shrink: 0;
}
.matrix-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--brown);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 34px;
  font-family: var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.matrix-dd-btn:hover {
  border-color: var(--soft-brown);
  background: var(--beige);
}
.matrix-dd-btn:focus-visible {
  outline: 2px solid #c05e3c;
  outline-offset: 2px;
}
.matrix-dd-btn[aria-expanded="true"] {
  border-color: #c05e3c;
  box-shadow: 0 0 0 3px rgba(192, 94, 60, 0.15);
}
.matrix-dd-label { flex: 1; }
.matrix-dd-chevron {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.15s;
}
.matrix-dd-btn[aria-expanded="true"] .matrix-dd-chevron {
  transform: rotate(180deg);
}
.matrix-dd-list {
  position: absolute;
  z-index: 300;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(74, 53, 40, 0.16);
  min-width: 210px;
  padding: 4px;
  animation: ddFadeIn 0.12s ease;
}
@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.matrix-dd-option {
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--brown);
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.matrix-dd-option:hover,
.matrix-dd-option.focused {
  background: var(--beige);
}
.matrix-dd-option.selected {
  background: rgba(192, 94, 60, 0.09);
  font-weight: 700;
  color: #c05e3c;
}
.matrix-dd-option.selected.focused {
  background: rgba(192, 94, 60, 0.18);
}

/* ====================================================
   KID COMPLETION CELEBRATIONS  —  full-screen, vibrant
   ==================================================== */

/* ---- Overlay: covers the whole screen ---- */
.kid-celeb-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 600;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.32s ease;
}
.kid-celeb-overlay.kid-celeb-visible { opacity: 1; }

/* ---- Card: full-screen, spring entrance ---- */
.kid-celeb-card {
  position: absolute;
  inset: 0;
  transform: scale(0.92);
  transition: transform 0.42s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.kid-celeb-overlay.kid-celeb-visible .kid-celeb-card { transform: scale(1); }

/* ---- Canvas: full-screen animation backdrop ---- */
.kid-celeb-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---- Text: glass pill, lower third ---- */
.kid-celeb-texts {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 88vw);
  text-align: center;
  background: rgba(255,255,255,0.90);
  border-radius: 24px;
  padding: 20px 28px 22px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.22);
  border: 2px solid rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.kid-celeb-en {
  font-size: 1.3rem;
  font-weight: 800;
  color: #2d1b00;
  line-height: 1.25;
  margin-bottom: 6px;
}
.kid-celeb-ro {
  font-size: 0.9rem;
  font-style: italic;
  color: #6b4c26;
  margin-bottom: 8px;
}
.kid-celeb-ur {
  font-family: "Noto Nastaliq Urdu", "Noto Serif", serif;
  font-size: 1.15rem;
  color: #2d1b00;
  line-height: 2.1;
  direction: rtl;
}

/* ====================================================
   ANIMATION TYPE: hero
   Fiery orange — giant shield SVG + 3 coloured rings
   + 4 lightning bolts + 5 flying sparkle dots
   ==================================================== */
.kac-theme-hero {
  background: radial-gradient(ellipse at 50% 40%, #FFDD44 0%, #FF8C00 50%, #FF4500 100%);
}

/* Three expanding rings */
.kac-hero-ring {
  position: absolute;
  border-radius: 50%;
  top: 40%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  animation: kac-ring-expand 1.8s ease-out both;
}
.kac-hr1 { width: 22vmin;  height: 22vmin;  border: 4px solid rgba(255,255,200,0.75); animation-delay: 0.08s; }
.kac-hr2 { width: 58vmin;  height: 58vmin;  border: 4px solid rgba(255,200,50,0.5);   animation-delay: 0.3s; }
.kac-hr3 { width: 100vmin; height: 100vmin; border: 3px solid rgba(255,150,0,0.3);    animation-delay: 0.55s; }

@keyframes kac-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(0);    opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1);    opacity: 0.65; }
  100% { transform: translate(-50%,-50%) scale(1.12); opacity: 0; }
}

/* Shield SVG icon */
.kac-hero-shield {
  position: absolute;
  top: 40%; left: 50%;
  width: 22vmin; height: 25vmin;
  transform: translate(-50%,-50%) scale(0) rotate(-10deg);
  animation: kac-shield-pop 2.4s cubic-bezier(0.34,1.5,0.64,1) 0.12s both;
}
@keyframes kac-shield-pop {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(-10deg); opacity: 0; }
  25%  { transform: translate(-50%,-50%) scale(1.22) rotate(4deg);  opacity: 1; }
  55%  { transform: translate(-50%,-50%) scale(1)    rotate(0deg);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.6)  rotate(5deg);  opacity: 0; }
}

/* Lightning bolt SVGs at corners */
.kac-bolt {
  position: absolute;
  width: 7vmin; height: 11vmin;
  animation: kac-bolt-pop 1.8s cubic-bezier(0.34,1.4,0.64,1) both;
}
.kac-b1 { top: 12%; left: 10%;  animation-delay: 0.4s;  --r: -20deg; }
.kac-b2 { top: 12%; right: 10%; animation-delay: 0.52s; --r:  20deg; }
.kac-b3 { top: 50%; left: 6%;   animation-delay: 0.46s; --r: -30deg; }
.kac-b4 { top: 50%; right: 6%;  animation-delay: 0.58s; --r:  30deg; }

@keyframes kac-bolt-pop {
  0%   { opacity: 0; transform: scale(0) rotate(var(--r, 0deg)); }
  35%  { opacity: 1; transform: scale(1.3) rotate(var(--r, 0deg)); }
  65%  { transform: scale(1) rotate(var(--r, 0deg)); opacity: 0.9; }
  100% { opacity: 0; transform: scale(0.5) rotate(var(--r, 0deg)); }
}

/* Flying sparkle dots */
.kac-sp {
  position: absolute;
  border-radius: 50%;
  top: 40%; left: 50%;
  animation: kac-sp-fly 1.6s ease-out both;
}
.kac-sp1 { width: 14px; height: 14px; background: #FFEE55; --sdx: -32vw; --sdy: -28vh; animation-delay: 0.42s; }
.kac-sp2 { width: 10px; height: 10px; background: #FF6BCC; --sdx:  30vw; --sdy: -35vh; animation-delay: 0.50s; }
.kac-sp3 { width: 12px; height: 12px; background: #55DDFF; --sdx:  38vw; --sdy:  18vh; animation-delay: 0.46s; }
.kac-sp4 { width:  9px; height:  9px; background: #80FF44; --sdx: -36vw; --sdy:  22vh; animation-delay: 0.54s; }
.kac-sp5 { width: 11px; height: 11px; background: #FF8844; --sdx:   4vw; --sdy:  40vh; animation-delay: 0.48s; }

@keyframes kac-sp-fly {
  0%   { opacity: 0; transform: translate(0,0) scale(0); }
  18%  { opacity: 1; transform: translate(calc(var(--sdx)*.2), calc(var(--sdy)*.2)) scale(1.4); }
  100% { opacity: 0; transform: translate(var(--sdx), var(--sdy)) scale(0); }
}

/* ====================================================
   ANIMATION TYPE: levelup
   Electric indigo — rainbow XP bar + arrow SVG +
   6 coloured star SVGs floating upward
   ==================================================== */
.kac-theme-levelup {
  background: radial-gradient(ellipse at 50% 60%, #4040ff 0%, #1a1a8c 50%, #0a0a3a 100%);
}

.kac-levelup-bar {
  position: absolute;
  bottom: 36%;
  left: 6%; right: 6%;
  height: 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(100,100,255,0.4);
}
.kac-levelup-fill {
  height: 100%; width: 0;
  border-radius: 8px;
  background: linear-gradient(to right, #FF1493, #FF6600, #FFD234, #00FF88, #00DDFF, #AA44FF);
  animation: kac-bar-fill 1.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.2s both;
  box-shadow: 0 0 12px rgba(255,255,100,0.6);
}
@keyframes kac-bar-fill {
  0%   { width: 0;    opacity: 0.7; }
  100% { width: 100%; opacity: 1;   }
}

.kac-lvl-icon {
  position: absolute;
  top: 22%; left: 50%;
  width: 14vmin; height: 18vmin;
  transform: translate(-50%,0) scale(0) translateY(20px);
  animation: kac-lvl-bounce 2s cubic-bezier(0.34,1.5,0.64,1) 0.15s both;
  filter: drop-shadow(0 0 12px rgba(93,222,244,0.7));
}
@keyframes kac-lvl-bounce {
  0%   { transform: translate(-50%,0) scale(0) translateY(30px); opacity: 0; }
  30%  { transform: translate(-50%,0) scale(1.2) translateY(-6px); opacity: 1; }
  60%  { transform: translate(-50%,0) scale(1) translateY(0); opacity: 1; }
  100% { transform: translate(-50%,0) scale(0.7) translateY(-20px); opacity: 0; }
}

.kac-lu-star {
  position: absolute;
  animation: kac-star-float 2s ease-out both;
}
.kac-lus1 { width: 7vmin; height: 7vmin; left: 10%; bottom: 40%; filter: hue-rotate(0deg);   animation-delay: 0.25s; }
.kac-lus2 { width: 5vmin; height: 5vmin; left: 25%; bottom: 40%; filter: hue-rotate(55deg);  animation-delay: 0.40s; }
.kac-lus3 { width: 8vmin; height: 8vmin; left: 42%; bottom: 40%; filter: hue-rotate(110deg); animation-delay: 0.32s; }
.kac-lus4 { width: 6vmin; height: 6vmin; left: 60%; bottom: 40%; filter: hue-rotate(180deg); animation-delay: 0.48s; }
.kac-lus5 { width: 5vmin; height: 5vmin; left: 75%; bottom: 40%; filter: hue-rotate(240deg); animation-delay: 0.38s; }
.kac-lus6 { width: 7vmin; height: 7vmin; left: 88%; bottom: 40%; filter: hue-rotate(310deg); animation-delay: 0.55s; }

@keyframes kac-star-float {
  0%   { opacity: 0; transform: translateY(0)    scale(0) rotate(0deg); }
  18%  { opacity: 1; transform: translateY(-8px)  scale(1.1) rotate(20deg); }
  100% { opacity: 0; transform: translateY(-70vh) scale(0.3) rotate(180deg); }
}

/* ====================================================
   ANIMATION TYPE: vanish
   Hot magenta — giant blob pops + 8 vivid circles scatter
   ==================================================== */
.kac-theme-vanish {
  background: radial-gradient(ellipse at 50% 40%, #FF69B4 0%, #C2185B 55%, #880E4F 100%);
}

.kac-vanish-blob {
  position: absolute;
  top: 40%; left: 50%;
  width: 40vmin; height: 40vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,200,0.75), rgba(255,20,147,0.2) 60%, transparent);
  transform: translate(-50%,-50%) scale(0);
  box-shadow: 0 0 60px rgba(255,100,180,0.5);
  animation: kac-blob-vanish 2.2s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes kac-blob-vanish {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  18%  { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  62%  { transform: translate(-50%,-50%) scale(1);   opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
}

.kac-van-dot {
  position: absolute;
  border-radius: 50%;
  top: 40%; left: 50%;
  animation: kac-van-scatter 1.9s ease-out 0.28s both;
}
.kac-vd1 { width: 16px; height: 16px; background: #FF3366; --dx: -38vw; --dy: -32vh; }
.kac-vd2 { width: 20px; height: 20px; background: #FFEE22; --dx:  36vw; --dy: -36vh; }
.kac-vd3 { width: 14px; height: 14px; background: #00DDFF; --dx:  44vw; --dy:  18vh; }
.kac-vd4 { width: 18px; height: 18px; background: #AA44FF; --dx: -42vw; --dy:  22vh; }
.kac-vd5 { width: 12px; height: 12px; background: #44FF88; --dx:   6vw; --dy:  42vh; }
.kac-vd6 { width: 16px; height: 16px; background: #FF8844; --dx: -20vw; --dy:  44vh; }
.kac-vd7 { width: 10px; height: 10px; background: #FF44AA; --dx:  22vw; --dy:  38vh; }
.kac-vd8 { width: 14px; height: 14px; background: #44DDFF; --dx: -42vw; --dy: -14vh; }

@keyframes kac-van-scatter {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  16%  { opacity: 1; transform: translate(calc(-50% + var(--dx)*.22), calc(-50% + var(--dy)*.22)) scale(1.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); }
}

/* ====================================================
   ANIMATION TYPE: spotlight
   Dark purple — 4 coloured beams + spinning star SVG
   + expanding gold ring
   ==================================================== */
.kac-theme-spotlight {
  background: radial-gradient(ellipse at 50% 50%, #2d0050 0%, #12001e 60%, #050005 100%);
}

.kac-spot-beam {
  position: absolute;
  height: 100%;
  bottom: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.kac-sb1 { width: 16vw; left: -3vw;
  background: linear-gradient(to bottom, rgba(255,210,50,0.8), transparent);
  transform-origin: 50% 100%; animation: kac-beam1 2.6s ease-out 0.1s both; }
.kac-sb2 { width: 16vw; right: -3vw;
  background: linear-gradient(to bottom, rgba(100,200,255,0.8), transparent);
  transform-origin: 50% 100%; animation: kac-beam2 2.6s ease-out 0.1s both; }
.kac-sb3 { width: 10vw; left: 30%;
  background: linear-gradient(to bottom, rgba(255,80,200,0.65), transparent);
  transform-origin: 50% 100%; animation: kac-beam3 2.4s ease-out 0.22s both; }
.kac-sb4 { width: 10vw; right: 30%;
  background: linear-gradient(to bottom, rgba(80,255,180,0.65), transparent);
  transform-origin: 50% 100%; animation: kac-beam4 2.4s ease-out 0.22s both; }

@keyframes kac-beam1 {
  0%   { opacity: 0; transform: rotate(-30deg) scaleY(0.4); }
  20%  { opacity: 0.9; transform: rotate(-15deg) scaleY(1);  }
  80%  { opacity: 0.75; transform: rotate(-8deg)  scaleY(1.04); }
  100% { opacity: 0; transform: rotate(-3deg)  scaleY(0.8); }
}
@keyframes kac-beam2 {
  0%   { opacity: 0; transform: rotate(30deg)  scaleY(0.4); }
  20%  { opacity: 0.9; transform: rotate(15deg)  scaleY(1);  }
  80%  { opacity: 0.75; transform: rotate(8deg)   scaleY(1.04); }
  100% { opacity: 0; transform: rotate(3deg)   scaleY(0.8); }
}
@keyframes kac-beam3 {
  0%   { opacity: 0; transform: rotate(-10deg) scaleY(0.3); }
  25%  { opacity: 0.8; transform: rotate(-5deg)  scaleY(1);  }
  80%  { opacity: 0.6; transform: rotate(-2deg)  scaleY(1); }
  100% { opacity: 0; transform: rotate(0deg)   scaleY(0.8); }
}
@keyframes kac-beam4 {
  0%   { opacity: 0; transform: rotate(10deg)  scaleY(0.3); }
  25%  { opacity: 0.8; transform: rotate(5deg)   scaleY(1);  }
  80%  { opacity: 0.6; transform: rotate(2deg)   scaleY(1); }
  100% { opacity: 0; transform: rotate(0deg)   scaleY(0.8); }
}

.kac-spot-ring {
  position: absolute;
  top: 40%; left: 50%;
  width: 50vmin; height: 50vmin;
  border: 5px solid rgba(255,210,50,0.85);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255,210,50,0.4), inset 0 0 30px rgba(255,210,50,0.1);
  transform: translate(-50%,-50%) scale(0);
  animation: kac-spot-ring-grow 2s cubic-bezier(0.34,1.4,0.64,1) 0.28s both;
}
@keyframes kac-spot-ring-grow {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
  62%  { transform: translate(-50%,-50%) scale(1);   opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; }
}

.kac-spot-star {
  position: absolute;
  top: 40%; left: 50%;
  width: 18vmin; height: 18vmin;
  transform: translate(-50%,-50%) scale(0) rotate(-30deg);
  filter: drop-shadow(0 0 18px rgba(255,220,50,0.9));
  animation: kac-spot-star-spin 2.4s cubic-bezier(0.34,1.3,0.64,1) 0.2s both;
}
@keyframes kac-spot-star-spin {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(-30deg); opacity: 0; }
  28%  { transform: translate(-50%,-50%) scale(1.18) rotate(10deg);  opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1)    rotate(0deg);   opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.5)  rotate(20deg);  opacity: 0; }
}

/* ====================================================
   ANIMATION TYPE: ripple
   Deep ocean teal — water drop SVG + 4 vivid rings
   ==================================================== */
.kac-theme-ripple {
  background: radial-gradient(ellipse at 50% 40%, #00CED1 0%, #006994 50%, #003344 100%);
}

.kac-rip-drop {
  position: absolute;
  top: 38%; left: 50%;
  width: 14vmin; height: 18vmin;
  transform: translate(-50%,-50%) scale(0);
  filter: drop-shadow(0 0 18px rgba(78,205,196,0.8));
  animation: kac-drop-fall 2s cubic-bezier(0.34,1.4,0.64,1) 0.08s both;
}
@keyframes kac-drop-fall {
  0%   { transform: translate(-50%,-70%) scale(0);    opacity: 0; }
  25%  { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1);    opacity: 1; }
  100% { transform: translate(-50%,-30%) scale(0.5);  opacity: 0; }
}

.kac-ripple-ring {
  position: absolute;
  top: 40%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  animation: kac-ripple-out 2.2s ease-out both;
}
.kac-rr1 { width: 10vmin;  height: 10vmin;  border: 5px solid rgba(100,230,220,0.9);  animation-delay: 0.1s; }
.kac-rr2 { width: 40vmin;  height: 40vmin;  border: 4px solid rgba(0,200,255,0.65);   animation-delay: 0.4s; }
.kac-rr3 { width: 78vmin;  height: 78vmin;  border: 3.5px solid rgba(0,180,220,0.4);  animation-delay: 0.72s; }
.kac-rr4 { width: 118vmin; height: 118vmin; border: 3px solid rgba(0,150,180,0.22);   animation-delay: 1.0s; }

@keyframes kac-ripple-out {
  0%   { transform: translate(-50%,-50%) scale(0);    opacity: 0.9; }
  55%  { transform: translate(-50%,-50%) scale(1);    opacity: 0.55; }
  100% { transform: translate(-50%,-50%) scale(1.06); opacity: 0; }
}

/* ====================================================
   ANIMATION TYPE: glow
   Rich amber — spinning sun SVG + 8 rainbow rays
   ==================================================== */
.kac-theme-glow {
  background: radial-gradient(ellipse at 50% 40%, #FFE066 0%, #FF8C00 55%, #CC4400 100%);
}

.kac-glow-sun {
  position: absolute;
  top: 40%; left: 50%;
  width: 22vmin; height: 22vmin;
  transform: translate(-50%,-50%) scale(0) rotate(-30deg);
  filter: drop-shadow(0 0 20px rgba(255,220,50,0.9));
  animation: kac-sun-rise 2.4s cubic-bezier(0.34,1.4,0.64,1) 0.1s both;
}
@keyframes kac-sun-rise {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(-30deg); opacity: 0; }
  25%  { transform: translate(-50%,-50%) scale(1.15) rotate(8deg);   opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1)    rotate(0deg);   opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.3)  rotate(20deg);  opacity: 0; }
}

/* 8 rays, no background on parent — each child sets its own color */
.kac-gw-ray {
  position: absolute;
  width: 7px;
  border-radius: 4px;
  left: calc(50% - 3.5px);
  bottom: 60%;
  transform-origin: bottom center;
}
/* Rainbow rays — each @keyframes encodes rotation + color via background set on the class */
.kac-gr1 { height: 42vmin; background: linear-gradient(to top, #FFD234, transparent); animation: kac-ray1 2.4s ease-out 0.18s both; }
.kac-gr2 { height: 36vmin; background: linear-gradient(to top, #FF8C00, transparent); animation: kac-ray2 2.4s ease-out 0.26s both; }
.kac-gr3 { height: 36vmin; background: linear-gradient(to top, #FF3388, transparent); animation: kac-ray3 2.4s ease-out 0.22s both; }
.kac-gr4 { height: 30vmin; background: linear-gradient(to top, #CC44FF, transparent); animation: kac-ray4 2.4s ease-out 0.30s both; }
.kac-gr5 { height: 36vmin; background: linear-gradient(to top, #4488FF, transparent); animation: kac-ray5 2.4s ease-out 0.24s both; }
.kac-gr6 { height: 30vmin; background: linear-gradient(to top, #00DDCC, transparent); animation: kac-ray6 2.4s ease-out 0.32s both; }
.kac-gr7 { height: 36vmin; background: linear-gradient(to top, #44DD44, transparent); animation: kac-ray7 2.4s ease-out 0.20s both; }
.kac-gr8 { height: 32vmin; background: linear-gradient(to top, #FF6600, transparent); animation: kac-ray8 2.4s ease-out 0.28s both; }

@keyframes kac-ray1 { 0%{opacity:0;transform:rotate(0deg)    scaleY(0)} 20%{opacity:1;transform:rotate(0deg)    scaleY(1)} 100%{opacity:0;transform:rotate(0deg)    scaleY(0.92)} }
@keyframes kac-ray2 { 0%{opacity:0;transform:rotate(45deg)   scaleY(0)} 20%{opacity:1;transform:rotate(45deg)   scaleY(1)} 100%{opacity:0;transform:rotate(45deg)   scaleY(0.92)} }
@keyframes kac-ray3 { 0%{opacity:0;transform:rotate(-45deg)  scaleY(0)} 20%{opacity:1;transform:rotate(-45deg)  scaleY(1)} 100%{opacity:0;transform:rotate(-45deg)  scaleY(0.92)} }
@keyframes kac-ray4 { 0%{opacity:0;transform:rotate(90deg)   scaleY(0)} 20%{opacity:1;transform:rotate(90deg)   scaleY(1)} 100%{opacity:0;transform:rotate(90deg)   scaleY(0.92)} }
@keyframes kac-ray5 { 0%{opacity:0;transform:rotate(-90deg)  scaleY(0)} 20%{opacity:1;transform:rotate(-90deg)  scaleY(1)} 100%{opacity:0;transform:rotate(-90deg)  scaleY(0.92)} }
@keyframes kac-ray6 { 0%{opacity:0;transform:rotate(135deg)  scaleY(0)} 20%{opacity:1;transform:rotate(135deg)  scaleY(1)} 100%{opacity:0;transform:rotate(135deg)  scaleY(0.92)} }
@keyframes kac-ray7 { 0%{opacity:0;transform:rotate(-135deg) scaleY(0)} 20%{opacity:1;transform:rotate(-135deg) scaleY(1)} 100%{opacity:0;transform:rotate(-135deg) scaleY(0.92)} }
@keyframes kac-ray8 { 0%{opacity:0;transform:rotate(180deg)  scaleY(0)} 20%{opacity:1;transform:rotate(180deg)  scaleY(1)} 100%{opacity:0;transform:rotate(180deg)  scaleY(0.92)} }

/* ====================================================
   ANIMATION TYPE: orbit
   Deep royal purple — spinning star centre + 6 vivid
   gradient dots orbiting in a wide ring
   ==================================================== */
.kac-theme-orbit {
  background: radial-gradient(ellipse at 50% 40%, #7B2FFF 0%, #2d1b69 55%, #0d0820 100%);
}

.kac-orbit-center {
  position: absolute;
  top: 40%; left: 50%;
  width: 12vmin; height: 12vmin;
  transform: translate(-50%,-50%) scale(0) rotate(0deg);
  filter: drop-shadow(0 0 16px rgba(255,220,50,0.9));
  animation: kac-orbit-star 2.6s ease-out 0.15s both;
}
@keyframes kac-orbit-star {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg);    opacity: 0; }
  20%  { transform: translate(-50%,-50%) scale(1.2) rotate(30deg); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1) rotate(180deg);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0) rotate(360deg);  opacity: 0; }
}

.kac-orbit {
  position: absolute;
  top: 40%; left: 50%;
  width: 0; height: 0;
  animation: kac-orbit-spin 2.8s linear 0.2s both;
}
@keyframes kac-orbit-spin {
  0%   { opacity: 0; transform: rotate(0deg);   }
  10%  { opacity: 1;                             }
  90%  { opacity: 1;                             }
  100% { opacity: 0; transform: rotate(360deg); }
}

.kac-ob-dot {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  top: -10px; left: -10px;
  transform-origin: 10px 10px;
  box-shadow: 0 0 10px currentColor;
}
/* orbit radius = 32vmin */
.kac-od1 { transform: rotate(0deg)   translateY(-32vmin); background: #FFD234; box-shadow: 0 0 14px rgba(255,210,52,0.7); }
.kac-od2 { transform: rotate(60deg)  translateY(-32vmin); background: #FF6B9D; box-shadow: 0 0 14px rgba(255,107,157,0.7); }
.kac-od3 { transform: rotate(120deg) translateY(-32vmin); background: #00DDFF; box-shadow: 0 0 14px rgba(0,221,255,0.7); }
.kac-od4 { transform: rotate(180deg) translateY(-32vmin); background: #44FF88; box-shadow: 0 0 14px rgba(68,255,136,0.7); }
.kac-od5 { transform: rotate(240deg) translateY(-32vmin); background: #FF8844; box-shadow: 0 0 14px rgba(255,136,68,0.7); }
.kac-od6 { transform: rotate(300deg) translateY(-32vmin); background: #CC44FF; box-shadow: 0 0 14px rgba(204,68,255,0.7); }

/* ====================================================
   ANIMATION TYPE: streak
   Deep navy — 3 SVG comets rocket upward with
   colorful trailing glows at the base
   ==================================================== */
.kac-theme-streak {
  background: radial-gradient(ellipse at 50% 80%, #003366 0%, #001a33 55%, #00050f 100%);
}

.kac-comet {
  position: absolute;
  bottom: -18vmin;
  width: 9vmin; height: 18vmin;
  animation: kac-comet-fly 1.5s ease-out both;
}
.kac-cm1 { left: 25%;  animation-delay: 0.18s; filter: none; }
.kac-cm2 { left: 50%;  animation-delay: 0.27s; filter: hue-rotate(150deg); width: 11vmin; }
.kac-cm3 { left: 72%;  animation-delay: 0.38s; filter: hue-rotate(270deg); }

@keyframes kac-comet-fly {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-130vh); }
}

.kac-sg {
  position: absolute;
  border-radius: 50%;
  bottom: -12px;
  animation: kac-sg-pulse 1.8s ease-out 0.08s both;
}
.kac-sg1 { width: 26vmin; height: 26vmin; left: 25%;  transform: translateX(-50%); background: radial-gradient(circle, rgba(255,210,50,0.6), transparent 65%); }
.kac-sg2 { width: 30vmin; height: 30vmin; left: 50%;  transform: translateX(-50%); background: radial-gradient(circle, rgba(50,200,160,0.6), transparent 65%); animation-delay: 0.09s; }
.kac-sg3 { width: 24vmin; height: 24vmin; left: 72%;  transform: translateX(-50%); background: radial-gradient(circle, rgba(120,80,255,0.6), transparent 65%); animation-delay: 0.18s; }

@keyframes kac-sg-pulse {
  0%   { opacity: 0; transform: translateX(-50%) scale(0); }
  24%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.7); }
}

/* ====================================================
   ANIMATION TYPE: grow
   Vivid spring green — 3 vivid rings expand + flower
   SVG spins into view and blooms
   ==================================================== */
.kac-theme-grow {
  background: radial-gradient(ellipse at 50% 40%, #00E676 0%, #00A86B 55%, #004d30 100%);
}

.kac-grow-ring {
  position: absolute;
  top: 40%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  animation: kac-grow-ring-out 2.2s ease-out both;
}
.kac-grr1 { width: 50vmin;  height: 50vmin;  border: 5px solid rgba(255,255,100,0.7); animation-delay: 0.12s; }
.kac-grr2 { width: 90vmin;  height: 90vmin;  border: 4px solid rgba(100,255,180,0.5); animation-delay: 0.38s; }
.kac-grr3 { width: 130vmin; height: 130vmin; border: 3px solid rgba(50,200,120,0.3);  animation-delay: 0.65s; }

@keyframes kac-grow-ring-out {
  0%   { transform: translate(-50%,-50%) scale(0);    opacity: 0.9; }
  52%  { transform: translate(-50%,-50%) scale(1);    opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1.1);  opacity: 0; }
}

.kac-grow-flower {
  position: absolute;
  top: 40%; left: 50%;
  width: 32vmin; height: 32vmin;
  transform: translate(-50%,-50%) scale(0) rotate(-20deg);
  filter: drop-shadow(0 0 18px rgba(255,220,50,0.7));
  animation: kac-flower-bloom 2.4s cubic-bezier(0.34,1.5,0.64,1) 0.15s both;
}
@keyframes kac-flower-bloom {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(-20deg); opacity: 0; }
  28%  { transform: translate(-50%,-50%) scale(1.2)  rotate(8deg);   opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1)    rotate(0deg);   opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.4)  rotate(10deg);  opacity: 0; }
}

/* ====================================================
   REDUCED MOTION: overlay fades in, no movement
   ==================================================== */
@media (prefers-reduced-motion: reduce) {
  .kid-celeb-card { transform: none !important; transition: opacity 0.3s ease; }
  .kac-hero-ring, .kac-hero-shield, .kac-bolt, .kac-sp,
  .kac-levelup-fill, .kac-lu-star, .kac-lvl-icon,
  .kac-vanish-blob, .kac-van-dot,
  .kac-spot-beam, .kac-spot-ring, .kac-spot-star,
  .kac-rip-drop, .kac-ripple-ring,
  .kac-glow-sun, .kac-gw-ray,
  .kac-orbit, .kac-orbit-center,
  .kac-comet, .kac-sg,
  .kac-grow-ring, .kac-grow-flower {
    animation: none !important;
    opacity: 0.28 !important;
  }
}