:root{
  --bg: linear-gradient(180deg,#fffaf6 0%, #fff0f6 100%);
  --card: #ffffff;
  --text: #243142;
  --accent1: #ff6b9d; /* hot pink */
  --accent2: #ffd166; /* yellow */
  --accent3: #7bd389; /* mint */
  --accent4: #6ec1ff; /* sky */
  --accent5: #a78bfa; /* purple */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(36,49,66,0.08);
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Baloo 2", "Helvetica", "Arial";
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding:18px;
}

/* header */
.site-header{
  max-width:1200px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  background: transparent;
  position:sticky;
  top:8px;
  z-index:40;
}
.logo h1{
  margin:0;
  font-family: "Baloo 2", "Inter", system-ui;
  font-size:clamp(20px, 3.6vw, 34px);
  color:var(--accent1);
}
@keyframes floaty { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.brand .subtitle{margin:4px 0 0; color:#585f6a}

/* nav */
.main-nav{
  display:flex;
  gap:12px;
  align-items:center;
}
.nav-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-actions{display:flex;align-items:center}
.nav-toggle{display:none;background:transparent;border:0;font-size:20px;padding:6px;cursor:pointer}
.main-nav a{
  text-decoration:none;
  padding:8px 12px;
  background:linear-gradient(90deg,var(--accent4),var(--accent2));
  color:#102a43;
  border-radius:10px;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  display:inline-block;
}
.main-nav a:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(36,49,66,0.15);
}
#themeToggle{
  padding:8px 12px;
  border-radius:10px;
  border:none;
  background:linear-gradient(90deg,var(--accent1),var(--accent3));
  cursor:pointer;
  font-weight:700;
}

/* container + cards */
.container{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
  padding-bottom: 32px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(36,49,66,0.12);
}

/* hero */
.hero{
  display:flex;
  gap:18px;
  padding:22px;
  align-items:center;
  flex-wrap:wrap;
}
.hero-left{flex:1 1 320px}
.hero-right{flex:0 0 300px; text-align:center}
.portrait{width:160px;height:160px;border-radius:16px;display:block;margin:0 auto 12px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.08))}
.actions{display:flex;gap:10px;justify-content:center}
.actions button{padding:10px 14px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent3),var(--accent4));cursor:pointer;color:white;font-weight:700}

/* chips and gallery */
.chips{list-style:none;padding:0;display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.chips li{
  background:linear-gradient(90deg,var(--accent2),#fff);
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  color:#232b33;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.chips li:hover {transform: translateY(-3px) scale(1.06)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:10px}
.gallery-item{
  background:linear-gradient(180deg,#fff,#fffeef);
  padding:14px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-weight: 700;
}
.gallery-item:hover {transform: translateY(-6px) scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,0.12)}

/* highlight section */
.highlight-section {
  background: linear-gradient(135deg, #fffacd 0%, #fff0f5 50%, #e0ffff 100%);
  border: 3px solid var(--accent2);
  position: relative;
  overflow: hidden;
}

.highlight-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,0,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.highlight{
  background:linear-gradient(90deg,#fff8ef,#f7fff2);
  border:2px dashed rgba(0,0,0,0.04);
}

/* forms */
label{display:block;margin-bottom:8px;font-weight:600}
input,textarea,button[type="submit"]{
  width:100%;padding:10px;border-radius:10px;border:2px solid rgba(0,0,0,0.06);margin-top:6px;font-size:15px;transition:box-shadow .18s ease, border-color .18s ease}
input:focus, textarea:focus{outline:none;border-color:var(--accent1);box-shadow:0 6px 18px rgba(255,107,157,0.08)}
button[type="submit"]{background:linear-gradient(90deg,var(--accent1),var(--accent4));border:none;color:white;font-weight:800;cursor:pointer;padding:10px 14px;border-radius:12px}
button[type="submit"]:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(110,193,255,0.18)}

/* footer */
.site-footer{
  text-align:center;
  opacity:0.95;
  margin-top:24px;
  color:#475466;
  font-weight: 600;
  padding:18px 8px;
}

/* small text */
.small{font-size:12px;color:#667682}

.age-line{font-weight:700;margin-top:10px;color:#2a4365}

.fun-text {
  font-weight: 700;
  color: var(--accent1);
  font-size: 16px;
}

.highlight-text {
  font-weight: 700;
  color: var(--accent5);
  font-size: 16px;
}

/* Sports list styling */
.sports-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.sport-item {
  background: linear-gradient(90deg, rgba(123, 211, 137, 0.1) 0%, rgba(110, 193, 255, 0.1) 100%);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 4px solid var(--accent3);
  transition: transform 0.2s ease;
}

.sport-item:hover {
  transform: translateX(4px);
}

/* Art list styling */
.art-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.art-list li {
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 107, 157, 0.1) 100%);
  border-radius: 6px;
  border-left: 3px solid var(--accent5);
}

/* Dance timeline */
.dance-timeline {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.timeline-item {
  background: linear-gradient(90deg, var(--accent4), var(--accent3));
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.2s ease;
}

.timeline-item:hover {
  transform: scale(1.02);
}

/* Fun games section */
.fun-games {
  background: linear-gradient(135deg, #ffe5ec 0%, #fff0f5 50%, #f0f8ff 100%);
  border: 2px solid var(--accent1);
}

.fun-btn {
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(90deg, var(--accent3), var(--accent4));
  color: white;
  font-weight: 700;
  cursor: pointer;
  margin: 8px 8px 8px 0;
  font-size: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.fun-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.fun-btn:active {
  transform: translateY(-1px) scale(0.98);
}

#jokeText {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  font-weight: 600;
  color: var(--text);
  min-height: 20px;
}

/* confetti area (absolute) */
#confettiArea{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:9999}
.confetti{position:absolute;border-radius:3px;will-change:transform,top,left;opacity:0.95}

/* responsive adjustments */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .main-nav{position:fixed;right:12px;top:60px;background:linear-gradient(180deg,#fff,#fffef6);padding:12px;border-radius:12px;box-shadow:var(--shadow);flex-direction:column}
  .main-nav.open .nav-links{display:flex;flex-direction:column;gap:8px}
}

@media (min-width:901px){
  .nav-toggle{display:none}
  .main-nav{position:static;background:transparent;padding:0}
}