/* CSS Design System for DreamyTales - Bedtime Stories App */

:root {
  /* Color Palette - Magical Cozy Bedtime Theme */
  --bg-space-dark: #070913;
  --bg-space-mid: #0f1225;
  --bg-space-light: #1a1e3a;
  
  --color-primary: #ffd54f; /* Cozy warm yellow */
  --color-primary-glow: rgba(255, 213, 79, 0.4);
  --color-secondary: #81c784; /* Soft mint green */
  --color-secondary-glow: rgba(129, 199, 132, 0.4);
  --color-accent-pink: #f48fb1; /* Dreamy pink */
  --color-accent-cyan: #4dd0e1; /* Ocean cyan */
  --color-accent-purple: #b39ddb; /* Space purple */

  --text-light: #f5f6fa;
  --text-muted: #a5b1c2;
  
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-focus: rgba(255, 213, 79, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(2, 4, 12, 0.4);
  
  --font-family-header: 'Fredoka', 'Quicksand', sans-serif;
  --font-family-body: 'Nunito', sans-serif;
  
  --transition-speed: 0.3s;
  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-sm: 8px;
}

/* Reset & Core Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-body);
  background-color: var(--bg-space-dark);
  color: var(--text-light);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  background: radial-gradient(ellipse at bottom, var(--bg-space-mid) 0%, var(--bg-space-dark) 100%);
  overflow: hidden;
  pointer-events: none;
}

/* Stars generators using box-shadows (Always visible) */
.stars, .stars-medium, .stars-large {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}

/* Opacity for main background stars */
.stars-container .stars,
.stars-container .stars-medium,
.stars-container .stars-large {
  opacity: 0.85;
}

/* Pale stars for the story reader background card */
.reader-stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Sits in front of the glass background but behind text */
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

/* Default soft opacity for stars behind reader text */
.reader-stars-container .stars {
  opacity: 0.45;
  width: 1.5px;
  height: 1.5px;
  box-shadow: 
    30px 50px #fff, 90px 130px #fff, 160px 40px #fff, 230px 190px #fff, 290px 90px #fff, 360px 60px #fff, 430px 140px #fff, 500px 100px #fff, 570px 170px #fff, 640px 50px #fff,
    60px 230px #fff, 130px 290px #fff, 200px 250px #fff, 270px 330px #fff, 340px 220px #fff, 410px 300px #fff, 480px 260px #fff, 550px 320px #fff, 620px 230px #fff, 690px 290px #fff,
    50px 390px #fff, 120px 430px #fff, 190px 370px #fff, 260px 470px #fff, 330px 400px #fff, 400px 490px #fff, 470px 420px #fff, 540px 500px #fff, 610px 440px #fff, 680px 480px #fff,
    /* 500px - 1000px */
    40px 550px #fff, 110px 620px #fff, 180px 580px #fff, 250px 690px #fff, 320px 590px #fff, 390px 640px #fff, 460px 560px #fff, 530px 680px #fff, 600px 570px #fff, 670px 650px #fff,
    70px 730px #fff, 140px 790px #fff, 210px 750px #fff, 280px 830px #fff, 350px 720px #fff, 420px 800px #fff, 490px 760px #fff, 560px 820px #fff, 630px 730px #fff, 700px 790px #fff,
    30px 890px #fff, 100px 930px #fff, 170px 870px #fff, 240px 970px #fff, 310px 900px #fff, 380px 990px #fff, 450px 920px #fff, 520px 1000px #fff, 590px 940px #fff, 660px 980px #fff,
    /* 1000px - 1500px */
    50px 1050px #fff, 120px 1130px #fff, 190px 1040px #fff, 260px 1190px #fff, 330px 1090px #fff, 400px 1140px #fff, 470px 1060px #fff, 540px 1180px #fff, 610px 1070px #fff, 680px 1150px #fff,
    80px 1230px #fff, 150px 1290px #fff, 220px 1250px #fff, 290px 1330px #fff, 360px 1220px #fff, 430px 1300px #fff, 500px 1260px #fff, 570px 1320px #fff, 640px 1230px #fff, 710px 1290px #fff,
    40px 1390px #fff, 110px 1430px #fff, 180px 1370px #fff, 250px 1470px #fff, 320px 1400px #fff, 390px 1490px #fff, 460px 1420px #fff, 530px 1500px #fff, 600px 1440px #fff, 670px 1480px #fff,
    /* 1500px - 2000px */
    30px 1550px #fff, 90px 1630px #fff, 160px 1540px #fff, 230px 1690px #fff, 290px 1590px #fff, 360px 1560px #fff, 430px 1640px #fff, 500px 1600px #fff, 570px 170px #fff, 640px 150px #fff,
    60px 1730px #fff, 130px 1790px #fff, 200px 1750px #fff, 270px 1830px #fff, 340px 1720px #fff, 410px 1800px #fff, 480px 1760px #fff, 550px 1820px #fff, 620px 1730px #fff, 690px 1790px #fff,
    50px 1890px #fff, 120px 1930px #fff, 190px 1870px #fff, 260px 1970px #fff, 330px 1900px #fff, 400px 1990px #fff, 470px 1920px #fff, 540px 2000px #fff, 610px 1940px #fff, 680px 1980px #fff;
  transition: opacity 0.5s ease;
}

.reader-stars-container .stars-medium {
  opacity: 0.45;
  width: 2.5px;
  height: 2.5px;
  box-shadow: 
    70px 80px rgba(255,255,255,0.95), 180px 150px #fff, 280px 70px rgba(255,255,255,0.95), 380px 120px #fff, 480px 80px #fff, 580px 140px rgba(255,255,255,0.95), 680px 90px #fff,
    90px 310px #fff, 220px 270px rgba(255,255,255,0.9), 320px 350px #fff, 420px 280px #fff, 520px 340px rgba(255,255,255,0.9), 620px 310px #fff,
    80px 450px rgba(255,255,255,0.95), 210px 490px #fff, 350px 430px rgba(255,255,255,0.95), 490px 460px #fff, 630px 480px #fff,
    /* 500px - 1000px */
    50px 580px rgba(255,255,255,0.95), 150px 650px #fff, 250px 570px rgba(255,255,255,0.95), 350px 620px #fff, 450px 580px #fff, 550px 640px rgba(255,255,255,0.95), 650px 590px #fff,
    100px 810px #fff, 200px 770px rgba(255,255,255,0.9), 300px 850px #fff, 400px 780px #fff, 500px 840px rgba(255,255,255,0.9), 600px 810px #fff,
    90px 950px rgba(255,255,255,0.95), 220px 990px #fff, 360px 930px rgba(255,255,255,0.95), 500px 960px #fff, 640px 980px #fff,
    /* 1000px - 1500px */
    70px 1080px rgba(255,255,255,0.95), 180px 1150px #fff, 280px 1070px rgba(255,255,255,0.95), 380px 1120px #fff, 480px 1080px #fff, 580px 1140px rgba(255,255,255,0.95), 680px 1090px #fff,
    90px 1310px #fff, 220px 1270px rgba(255,255,255,0.9), 320px 1350px #fff, 420px 1280px #fff, 520px 1340px rgba(255,255,255,0.9), 620px 1310px #fff,
    80px 1450px rgba(255,255,255,0.95), 210px 1490px #fff, 350px 1430px rgba(255,255,255,0.95), 490px 1460px #fff, 630px 1480px #fff,
    /* 1500px - 2000px */
    50px 1580px rgba(255,255,255,0.95), 150px 1650px #fff, 250px 1570px rgba(255,255,255,0.95), 350px 1620px #fff, 450px 1580px #fff, 550px 1640px rgba(255,255,255,0.95), 650px 1590px #fff,
    100px 1810px #fff, 200px 1770px rgba(255,255,255,0.9), 300px 1850px #fff, 400px 1780px #fff, 500px 1840px rgba(255,255,255,0.9), 600px 1810px #fff,
    90px 1950px rgba(255,255,255,0.95), 220px 1990px #fff, 360px 1930px rgba(255,255,255,0.95), 500px 1960px #fff, 640px 1980px #fff;
  transition: opacity 0.5s ease;
}

.reader-stars-container .stars-large {
  opacity: 0.45;
  width: 4px;
  height: 4px;
  box-shadow: 
    120px 110px rgba(255, 213, 79, 0.9), 320px 90px rgba(129, 199, 132, 0.9), 520px 130px rgba(244, 143, 177, 0.9),
    200px 330px rgba(77, 208, 225, 0.9), 450px 310px rgba(255, 213, 79, 0.9), 600px 340px rgba(179, 157, 219, 0.9),
    150px 460px rgba(244, 143, 177, 0.9), 380px 490px rgba(77, 208, 225, 0.9), 570px 450px rgba(129, 199, 132, 0.9),
    /* 500px - 1000px */
    100px 610px rgba(255, 213, 79, 0.9), 300px 590px rgba(129, 199, 132, 0.9), 500px 630px rgba(244, 143, 177, 0.9),
    220px 830px rgba(77, 208, 225, 0.9), 470px 810px rgba(255, 213, 79, 0.9), 620px 840px rgba(179, 157, 219, 0.9),
    130px 960px rgba(244, 143, 177, 0.9), 360px 990px rgba(77, 208, 225, 0.9), 550px 950px rgba(129, 199, 132, 0.9),
    /* 1000px - 1500px */
    120px 1110px rgba(255, 213, 79, 0.9), 320px 1090px rgba(129, 199, 132, 0.9), 520px 1130px rgba(244, 143, 177, 0.9),
    200px 1330px rgba(77, 208, 225, 0.9), 450px 1310px rgba(255, 213, 79, 0.9), 600px 1340px rgba(179, 157, 219, 0.9),
    150px 1460px rgba(244, 143, 177, 0.9), 380px 1490px rgba(77, 208, 225, 0.9), 570px 1450px rgba(129, 199, 132, 0.9),
    /* 1500px - 2000px */
    100px 1610px rgba(255, 213, 79, 0.9), 300px 1590px rgba(129, 199, 132, 0.9), 500px 1630px rgba(244, 143, 177, 0.9),
    220px 1830px rgba(77, 208, 225, 0.9), 470px 1810px rgba(255, 213, 79, 0.9), 620px 1840px rgba(179, 157, 219, 0.9),
    130px 1960px rgba(244, 143, 177, 0.9), 360px 1990px rgba(77, 208, 225, 0.9), 550px 1950px rgba(129, 199, 132, 0.9);
  transition: opacity 0.5s ease;
}



.stars {
  width: 1px;
  height: 1px;
  box-shadow: 
    120px 200px #fff, 340px 100px #fff, 850px 300px #fff, 950px 80px rgba(255,255,255,0.7),
    1500px 400px #fff, 240px 700px #fff, 480px 900px #fff, 710px 650px rgba(255,255,255,0.5),
    1100px 820px #fff, 1340px 920px #fff, 100px 1100px #fff, 600px 1300px #fff,
    1250px 1400px #fff, 1600px 1150px #fff, 50px 1500px rgba(255,255,255,0.3), 800px 1700px #fff;
  animation: twinkle 4s infinite ease-in-out;
}

.stars-medium {
  width: 2px;
  height: 2px;
  box-shadow: 
    250px 150px rgba(255,255,255,0.9), 700px 450px #fff, 1150px 180px rgba(255,255,255,0.9),
    1300px 600px #fff, 100px 800px rgba(255,255,255,0.8), 550px 950px #fff,
    900px 1100px rgba(255,255,255,0.9), 1450px 1050px #fff, 300px 1450px #fff,
    750px 1550px #fff, 1200px 1650px rgba(255,255,255,0.7), 1650px 1350px #fff;
  animation: twinkle 6s infinite ease-in-out 1s;
}

.stars-large {
  width: 3px;
  height: 3px;
  box-shadow: 
    400px 80px rgba(255, 213, 79, 0.8), 900px 220px rgba(129, 199, 132, 0.8), 
    150px 500px rgba(244, 143, 177, 0.8), 1250px 380px rgba(77, 208, 225, 0.8), 
    650px 750px rgba(255, 213, 79, 0.8), 1050px 850px rgba(179, 157, 219, 0.8),
    1550px 650px rgba(255, 255, 255, 0.8), 350px 1200px rgba(77, 208, 225, 0.8),
    850px 1400px rgba(244, 143, 177, 0.8), 1300px 1250px rgba(129, 199, 132, 0.8);
  animation: twinkle 8s infinite ease-in-out 2s;
}

.soft-clouds {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, rgba(15, 18, 37, 0.9) 0%, rgba(15, 18, 37, 0) 100%);
  z-index: -1;
}

/* Animations */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes floatMoon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}

/* Main Container Layout */
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

/* Header */
.app-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 12px;
}

.logo-icon {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 4px 10px rgba(255, 213, 79, 0.3));
}

.app-header h1 {
  font-family: var(--font-family-header);
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: -1px;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #ffffff 30%, #ffd54f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 300;
}

/* Glassmorphism Cards */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 30px;
  margin-bottom: 40px;
  transition: border-color var(--transition-speed), transform var(--transition-speed);
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-primary);
  color: var(--bg-space-dark);
  font-family: var(--font-family-header);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 0 15px var(--color-primary-glow);
}

.card-header h2 {
  font-family: var(--font-family-header);
  font-size: 1.8rem;
  color: var(--text-light);
}

/* Form Styles */
.setup-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-family: var(--font-family-header);
  font-size: 1.05rem;
  color: var(--text-light);
  font-weight: 500;
}

.form-group label .required {
  color: var(--color-primary);
}

.form-group input[type="text"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 15px 20px;
  font-size: 1.1rem;
  color: #fff;
  font-family: var(--font-family-body);
  transition: all var(--transition-speed);
}

.form-group input[type="text"]:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.2);
}

.form-group input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.input-helper {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Gender selection under child's name */
.gender-selection {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.gender-label {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

.gender-btn-group {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 40px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.gender-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* Collapsible section for optional names */
.collapsible-container {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 20px;
}

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-family-header);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0;
  text-align: left;
  transition: color var(--transition-speed);
}

.collapse-toggle:hover {
  color: #fff;
}

.chevron-icon {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-speed);
}

.collapse-toggle.expanded .chevron-icon {
  transform: rotate(180deg);
}

.collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapse-content.expanded {
  max-height: 500px; /* Large enough to hold contents */
}

.info-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  margin-top: 5px;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* Stories browser section */
.stories-section {
  margin-top: 40px;
}

.section-title-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 768px) {
  .section-title-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.title-with-badge {
  display: flex;
  align-items: center;
  gap: 15px;
}

.title-with-badge h2 {
  font-family: var(--font-family-header);
  font-size: 1.8rem;
  color: var(--text-light);
}

/* Search bar styling */
.search-box {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.search-box input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 40px;
  padding: 12px 20px 12px 45px;
  font-size: 0.95rem;
  color: #fff;
  font-family: var(--font-family-body);
  transition: all var(--transition-speed);
}

.search-box input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.2);
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Category Filter Chips */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  font-family: var(--font-family-header);
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 40px;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.filter-chip.active {
  background: var(--color-primary);
  color: var(--bg-space-dark);
  border-color: var(--color-primary);
  box-shadow: 0 4px 15px var(--color-primary-glow);
  font-weight: 600;
}

/* Age filters */
.age-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  width: fit-content;
}

.filter-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-group {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 40px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.05);
}

.btn-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-family-header);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 40px;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-toggle:hover {
  color: #fff;
}

.btn-toggle.active {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-primary);
  box-shadow: var(--glass-shadow);
  font-weight: 600;
}

/* Story Cards Grid */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

/* Single Story Card */
.story-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition-speed);
  position: relative;
  overflow: hidden;
}

.story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, transparent);
  transition: all var(--transition-speed);
}

/* Card gradients based on category */
.story-card[data-category="Magical Forest"]::before { background: linear-gradient(90deg, var(--color-secondary), transparent); }
.story-card[data-category="Space Adventures"]::before { background: linear-gradient(90deg, var(--color-accent-purple), transparent); }
.story-card[data-category="Ocean Friends"]::before { background: linear-gradient(90deg, var(--color-accent-cyan), transparent); }
.story-card[data-category="Cozy Animals"]::before { background: linear-gradient(90deg, var(--color-primary), transparent); }
.story-card[data-category="Sky & Dreams"]::before { background: linear-gradient(90deg, var(--color-accent-pink), transparent); }

.story-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 40px 0 rgba(2, 4, 12, 0.6);
}

.story-card:hover::before {
  height: 6px;
}

.card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.category-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.story-card[data-category="Magical Forest"] .category-badge { color: var(--color-secondary); }
.story-card[data-category="Space Adventures"] .category-badge { color: var(--color-accent-purple); }
.story-card[data-category="Ocean Friends"] .category-badge { color: var(--color-accent-cyan); }
.story-card[data-category="Cozy Animals"] .category-badge { color: var(--color-primary); }
.story-card[data-category="Sky & Dreams"] .category-badge { color: var(--color-accent-pink); }

.age-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-primary);
  border: 1px solid rgba(255, 213, 79, 0.2);
}

.story-card h3 {
  font-family: var(--font-family-header);
  font-size: 1.3rem;
  margin-bottom: 10px;
  line-height: 1.3;
  color: #fff;
}

.story-summary {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 20px;
  flex-grow: 1; /* Pushes the button to the bottom */
}

.btn-read {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: var(--font-family-header);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-speed);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.story-card:hover .btn-read {
  background: var(--color-primary);
  color: var(--bg-space-dark);
  border-color: var(--color-primary);
  box-shadow: 0 4px 15px var(--color-primary-glow);
}

/* Footer bottom bar */
.app-footer-bar {
  text-align: center;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9rem;
}

/* Full Screen Reader View Overlay */
.reader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 7, 18, 0.96);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.reader-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.reader-container {
  width: 100%;
  max-width: 800px;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Close Reader button */
.close-reader {
  position: absolute;
  right: 0;
  top: -20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed);
}

.close-reader:hover {
  background: rgba(235, 94, 85, 0.2);
  border-color: rgba(235, 94, 85, 0.4);
  color: #eb5e55;
  transform: scale(1.1);
}

.close-reader svg {
  width: 20px;
  height: 20px;
}

.reader-header {
  text-align: center;
  margin-top: 20px;
}

.reader-category {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 1px;
}

.reader-title {
  font-family: var(--font-family-header);
  font-size: 2.5rem;
  margin: 10px 0;
  background: linear-gradient(to right, #fff, var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reader-metadata {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.reader-age-badge {
  background: rgba(255, 213, 79, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(255, 213, 79, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* Reader Settings Toolbar */
.reader-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 12px 20px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-ctrl {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: var(--font-family-header);
  font-weight: 600;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-ctrl:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Toggle Switches */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
}

input:checked + .slider {
  background-color: var(--color-primary);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--color-primary);
}

input:checked + .slider:before {
  transform: translateX(22px);
  background-color: var(--bg-space-dark);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Interactive Story Book Page */
.reader-book {
  position: relative; /* Position context for stars-container */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 40px;
  min-height: 300px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.reader-content {
  position: relative;
  z-index: 2; /* Sits on top of the reader stars */
  font-size: 1.4rem; /* Large readable size */
  line-height: 1.8;
  letter-spacing: 0.2px;
  max-width: 700px;
  margin: 0 auto;
  transition: font-size var(--transition-speed);
}

.reader-content p {
  margin-bottom: 25px;
  text-indent: 20px;
}

/* Sentence element highlighting for Web Speech API */
.sentence {
  transition: background-color 0.3s, color 0.3s, text-shadow 0.3s;
  border-radius: 4px;
  padding: 2px 4px;
}

.sentence.highlighted {
  background-color: rgba(255, 213, 79, 0.15);
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.3);
}

/* Narrator Panel */
.narrator-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 20px 25px;
  margin-bottom: 40px;
}

.narrator-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.narrator-header h3 {
  font-family: var(--font-family-header);
  font-size: 1.15rem;
  color: var(--text-light);
}

.narrator-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.narrator-controls-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .narrator-controls-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.narrator-selectors {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-grow: 1;
}

/* Fixed Emmy settings badge */
.narrator-fixed-settings {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.fixed-badge {
  display: inline-block;
  background: rgba(255, 200, 100, 0.1);
  border: 1px solid rgba(255, 200, 100, 0.25);
  color: rgba(255, 210, 120, 0.85);
  font-size: 0.78rem;
  font-family: var(--font-family-body);
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}


@media (min-width: 576px) {
  .narrator-selectors {
    flex-direction: row;
    align-items: center;
  }
}

.select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
}

.select-wrapper label, .speed-slider-group label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

#voiceSelect {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  color: #fff;
  padding: 8px 12px;
  font-family: var(--font-family-body);
  font-size: 0.9rem;
  width: 100%;
}

#voiceSelect:focus {
  outline: none;
  border-color: var(--color-primary);
}

.speed-slider-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.speed-slider-group input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  height: 6px;
  border-radius: 3px;
  outline: none;
}

.speed-slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 0 5px var(--color-primary-glow);
}

.speed-emoji {
  font-size: 0.9rem;
}

.speed-val {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: bold;
  align-self: flex-end;
}

.narrator-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-nar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: var(--font-family-header);
  font-size: 0.95rem;
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-speed);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.btn-nar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,255,255,0.05);
}

.btn-nar.play:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--bg-space-dark);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px var(--color-primary-glow);
}

.btn-nar.pause:hover:not(:disabled) {
  background: var(--color-accent-cyan);
  color: var(--bg-space-dark);
  border-color: var(--color-accent-cyan);
}

.btn-nar.stop:hover:not(:disabled) {
  background: #eb5e55;
  color: #fff;
  border-color: #eb5e55;
}

.btn-nar:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.narration-tip {
  margin-top: 12px;
  color: var(--text-muted);
}

/* Warm Screen Overlay for Blue Light Warmth Mode */
.warm-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 120, 0, 0.12); /* Cozy amber tint */
  z-index: 9999; /* Top level */
  pointer-events: none; /* Let all clicks pass through */
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.warm-screen-overlay.active {
  opacity: 1;
}

/* Responsive Overrides */
@media (max-width: 600px) {
  .app-header h1 {
    font-size: 2.2rem;
  }
  
  .card-header h2, .title-with-badge h2 {
    font-size: 1.4rem;
  }
  
  .reader-title {
    font-size: 1.8rem;
  }
  
  .reader-book {
    padding: 20px;
  }
  
  .reader-content {
    font-size: 1.15rem;
  }
  
  .setup-section {
    padding: 20px;
  }
  
  .friends-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Bedtime Questions Panel inside the Reader */
.bedtime-questions {
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 25px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
}

.questions-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.questions-icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.questions-header h4 {
  font-family: var(--font-family-header);
  font-size: 1.25rem;
  color: var(--color-primary);
}

.questions-intro {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.questions-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.questions-list li {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-light);
  position: relative;
  padding-left: 25px;
}

.questions-list li::before {
  content: "✨";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.9rem;
}

/* App Footer Bar */
.app-footer-bar {
  text-align: center;
  padding: 10px 0 35px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

/* Tiny White Sparkling Stars Surrounding & Decorating the Rabbit */
.bunny-star {
  position: absolute;
  color: #ffffff;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 213, 79, 0.7);
  animation: starFloatTwinkle 3s ease-in-out infinite alternate;
}

.bunny-star.star-dot {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff, 0 0 14px rgba(255, 255, 255, 0.9);
}

/* Individual Tiny Star Positions around & on the picture */
.star-1 { top: -12px; left: 10px; font-size: 1.4rem; animation-delay: 0s; }
.star-2 { top: -8px; right: 20px; font-size: 1.2rem; animation-delay: 0.6s; }
.star-3 { top: 25%; left: -14px; font-size: 1.3rem; animation-delay: 1.2s; }
.star-4 { top: 35%; right: -12px; font-size: 1.1rem; animation-delay: 1.8s; }
.star-5 { bottom: 20%; left: -10px; font-size: 1.4rem; animation-delay: 0.4s; }
.star-6 { bottom: 15%; right: -14px; font-size: 1.2rem; animation-delay: 1.0s; }
.star-7 { bottom: -12px; left: 30px; font-size: 1.1rem; animation-delay: 1.5s; }
.star-8 { bottom: -14px; right: 40px; font-size: 1.3rem; animation-delay: 2.1s; }
.star-9 { top: 12px; right: 12px; font-size: 0.95rem; animation-delay: 0.8s; opacity: 0.9; }

.dot-1 { top: 5px; right: -5px; animation-delay: 0.3s; }
.dot-2 { bottom: 5px; left: -5px; animation-delay: 0.9s; }
.dot-3 { top: 18px; left: 18px; animation-delay: 1.4s; }
.dot-4 { bottom: 20px; right: 15px; animation-delay: 2.0s; }

@keyframes starFloatTwinkle {
  0% {
    opacity: 0.3;
    transform: scale(0.75) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.25) translateY(-4px);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.85) translateY(2px);
  }
}

/* Intonation Toggle Styles */
.intonation-toggle-group {
  display: flex;
  align-items: center;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(255, 213, 79, 0.08);
  border: 1px solid rgba(255, 213, 79, 0.2);
  border-radius: var(--border-radius-sm);
}

.toggle-label-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.switch-sm {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  margin-left: 10px;
  flex-shrink: 0;
}

.switch-sm input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-sm .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: .3s;
}

.switch-sm .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
}

.switch-sm input:checked + .slider {
  background-color: var(--color-secondary);
}

.switch-sm input:checked + .slider:before {
  transform: translateX(18px);
}

.switch-sm .slider.round {
  border-radius: 20px;
}

.switch-sm .slider.round:before {
  border-radius: 50%;
}

/* ==========================================
   Sleeping Bunny & Twinkling White Stars
   ========================================== */
.bunny-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 50px auto 20px auto !important;
  width: 100% !important;
  max-width: 300px !important;
  position: relative !important;
  padding: 10px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bunny-wrapper {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Ambient starlight aura behind rabbit that merges into starry background */
.bunny-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135%;
  height: 135%;
  background: radial-gradient(circle at center, rgba(255, 213, 79, 0.22) 0%, rgba(179, 157, 219, 0.12) 40%, rgba(7, 9, 19, 0) 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: auraGlow 4s ease-in-out infinite alternate;
}

.sleeping-bunny {
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
  /* Soft radial edge feathering so rectangular image borders fade completely into background */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 42%, rgba(0,0,0,0.85) 65%, rgba(0,0,0,0) 90%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 42%, rgba(0,0,0,0.85) 65%, rgba(0,0,0,0) 90%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 25px rgba(255, 213, 79, 0.35));
  animation: floatBunny 4s ease-in-out infinite alternate;
}

@keyframes floatBunny {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@keyframes auraGlow {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* Tiny White Twinkling Stars Surround Effect */
.bunny-star {
  position: absolute;
  color: #ffffff;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  text-shadow: 0 0 8px #ffffff, 0 0 16px rgba(255, 255, 255, 0.9);
  animation: starTwinkle 3s ease-in-out infinite alternate;
}

.bunny-star.star-dot {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff, 0 0 14px rgba(255, 255, 255, 0.9);
}

.star-1  { top: 5%;   left: 10%;  font-size: 16px; animation-delay: 0s; }
.star-2  { top: 2%;   right: 15%; font-size: 12px; animation-delay: 0.5s; }
.star-3  { top: 35%;  left: -5%;  font-size: 18px; animation-delay: 1s; }
.star-4  { top: 40%;  right: -8%; font-size: 14px; animation-delay: 1.5s; }
.star-5  { bottom: 15%; left: 5%; font-size: 12px; animation-delay: 0.8s; }
.star-6  { bottom: 10%; right: 10%; font-size: 16px; animation-delay: 2.1s; }
.star-7  { top: 15%;  left: 30%;  font-size: 10px; animation-delay: 0.3s; }
.star-8  { top: 10%;  right: 35%; font-size: 14px; animation-delay: 1.2s; }
.star-9  { bottom: 30%; left: 15%; font-size: 11px; animation-delay: 1.8s; }
.star-10 { bottom: 25%; right: 20%; font-size: 15px; animation-delay: 0.4s; }

.dot-1 { top: 5px; right: -5px; animation-delay: 0.3s; }
.dot-2 { bottom: 5px; left: -5px; animation-delay: 0.9s; }
.dot-3 { top: 18px; left: 18px; animation-delay: 1.4s; }
.dot-4 { bottom: 20px; right: 15px; animation-delay: 2.0s; }

@keyframes starTwinkle {
  0% {
    opacity: 0.2;
    transform: scale(0.7) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.35) rotate(15deg);
    text-shadow: 0 0 12px #ffffff, 0 0 25px rgba(255, 255, 255, 1);
  }
}