@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&family=Fredoka+One&display=swap');

:root {
  --yellow:  #F5C400;
  --red:     #C8391A;
  --teal:    #2A9BAB;
  --white:   #FFFFFF;
  --offwhite:#FFFBEE;
  --dark:    #1A1A1A;
  --card-radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: var(--offwhite); color: var(--dark); min-height: 100vh; }

/* NAV */
nav { background: var(--dark); padding: 10px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.nav-logo span { font-family:'Fredoka One',cursive; color:var(--yellow); font-size:16px; line-height:1.1; }
nav a { color:rgba(255,255,255,0.7); text-decoration:none; font-size:14px; font-weight:700; transition:color 0.15s; }
nav a:hover, nav a.active { color:white; }
.nav-spacer { flex:1; }

/* HEADER */
header { background: var(--yellow); position:relative; overflow:hidden; border-bottom: 5px solid var(--red); }
.header-stripe { height:8px; background: repeating-linear-gradient(90deg, var(--red) 0px, var(--red) 60px, var(--teal) 60px, var(--teal) 120px, var(--white) 120px, var(--white) 180px); }
.header-inner { max-width:1100px; margin:0 auto; padding:28px 24px 24px; display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
.header-logo { width:90px; height:90px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.2); border:3px solid white; }
.header-text h1 { font-family:'Fredoka One',cursive; font-size:clamp(24px,4.5vw,44px); color:var(--red); line-height:1.05; }
.header-text h1 span { color:var(--dark); }
.header-text p { font-size:clamp(13px,1.8vw,16px); color:var(--dark); margin-top:5px; font-weight:700; opacity:0.75; }
.bubble { position:absolute; border-radius:50%; opacity:0.1; animation:float 6s ease-in-out infinite; }
.bubble:nth-child(1){width:80px;height:80px;background:var(--red);top:-10px;right:15%;animation-delay:0s}
.bubble:nth-child(2){width:50px;height:50px;background:var(--teal);top:20px;right:8%;animation-delay:1s}
.bubble:nth-child(3){width:110px;height:110px;background:var(--dark);top:-30px;right:28%;animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* MAIN */
main { max-width:1100px; margin:0 auto; padding:32px 20px 60px; }
.section-label { font-family:'Fredoka One',cursive; font-size:22px; color:var(--dark); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.section-label::after { content:''; flex:1; height:3px; background:linear-gradient(90deg,#ddd,transparent); border-radius:2px; }

/* GAME GRID */
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; margin-bottom:48px; }
.game-card { border-radius:var(--card-radius); overflow:hidden; cursor:pointer; transition:transform 0.18s,box-shadow 0.18s; text-decoration:none; color:inherit; display:flex; flex-direction:column; background:white; box-shadow:0 3px 12px rgba(0,0,0,0.09); border:3px solid transparent; position:relative; }
.game-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 12px 32px rgba(0,0,0,0.15); }
.game-card.coming-soon { opacity:0.55; cursor:default; }
.game-card.coming-soon:hover { transform:none; box-shadow:0 3px 12px rgba(0,0,0,0.09); }
.card-icon { height:130px; display:flex; align-items:center; justify-content:center; font-size:62px; position:relative; }
.card-body { padding:14px 16px 16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.card-title { font-family:'Fredoka One',cursive; font-size:18px; line-height:1.2; }
.card-desc { font-size:13px; color:#666; line-height:1.4; flex:1; }
.card-tag { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; margin-top:4px; align-self:flex-start; text-transform:uppercase; letter-spacing:0.5px; }
.soon-badge { position:absolute; top:10px; right:10px; background:#555; color:white; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; }

.card-teal  .card-icon{background:#E0F4F6} .card-teal .card-title{color:var(--teal)} .card-teal .card-tag{background:#E0F4F6;color:var(--teal)} .card-teal:hover{border-color:var(--teal)}
.card-red   .card-icon{background:#FDEAE5} .card-red  .card-title{color:var(--red)}  .card-red  .card-tag{background:#FDEAE5;color:var(--red)}  .card-red:hover{border-color:var(--red)}
.card-yellow .card-icon{background:#FEF9D9} .card-yellow .card-title{color:#8B6800} .card-yellow .card-tag{background:#FEF9D9;color:#8B6800} .card-yellow:hover{border-color:var(--yellow)}

/* CAT BAR */
.cat-bar { background:var(--white); border-bottom:3px solid #eee; padding:14px 24px; display:flex; gap:10px; overflow-x:auto; justify-content:center; flex-wrap:wrap; }
.cat-pill { padding:8px 18px; border-radius:50px; border:2.5px solid currentColor; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.18s; background:transparent; white-space:nowrap; font-family:'Nunito',sans-serif; }
.cat-pill[data-cat="all"]   { color:var(--teal); border-color:var(--teal); }
.cat-pill[data-cat="water"] { color:var(--teal); border-color:var(--teal); }
.cat-pill[data-cat="air"]   { color:var(--red);  border-color:var(--red);  }
.cat-pill[data-cat="light"] { color:#8B6800;     border-color:var(--yellow); }
.cat-pill[data-cat="build"] { color:var(--red);  border-color:var(--red);  }
.cat-pill[data-cat="all"].active,   .cat-pill[data-cat="all"]:hover   { background:var(--teal);   border-color:var(--teal);   color:white; }
.cat-pill[data-cat="water"].active, .cat-pill[data-cat="water"]:hover { background:var(--teal);   border-color:var(--teal);   color:white; }
.cat-pill[data-cat="air"].active,   .cat-pill[data-cat="air"]:hover   { background:var(--red);    border-color:var(--red);    color:white; }
.cat-pill[data-cat="light"].active, .cat-pill[data-cat="light"]:hover { background:var(--yellow); border-color:var(--yellow); color:#333;  }
.cat-pill[data-cat="build"].active, .cat-pill[data-cat="build"]:hover { background:var(--red);    border-color:var(--red);    color:white; }

/* FOOTER */
footer { background:var(--dark); color:rgba(255,255,255,0.6); text-align:center; padding:24px; font-size:13px; }
footer strong{color:white} footer a{color:var(--yellow);text-decoration:none} footer a:hover{text-decoration:underline}

/* BACK LINK */
.back-link { display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; color:var(--teal); font-weight:700; text-decoration:none; font-size:14px; }
.back-link:hover{text-decoration:underline}

@media(max-width:600px){
  .header-inner{flex-direction:column;text-align:center}
  .game-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-icon{height:90px;font-size:44px}
}


/* ELG (Early Learning Goal) FILTER BAR */
.elg-bar { background:var(--offwhite); border-bottom:3px solid #eee; padding:12px 24px 16px; display:flex; gap:8px; align-items:center; overflow-x:auto; justify-content:center; flex-wrap:wrap; }
.elg-bar-label { font-size:13px; font-weight:700; color:#777; margin-right:2px; white-space:nowrap; }
.elg-pill { padding:6px 14px; border-radius:50px; border:2px solid #ccc; font-size:12.5px; font-weight:700; cursor:pointer; transition:all 0.18s; background:white; white-space:nowrap; font-family:'Nunito',sans-serif; color:#555; }
.elg-pill:hover { border-color:var(--teal); color:var(--teal); }
.elg-pill.active { background:var(--teal); border-color:var(--teal); color:white; }
.elg-pill[data-elg="all"].active { background:var(--dark); border-color:var(--dark); }

/* ELG BADGES (on individual game pages) */
.elg-badges { display:flex; flex-wrap:wrap; gap:6px; }
.elg-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; line-height:1.3; }
.elg-badge.primary { background:var(--teal); color:white; }
.elg-badge.secondary { background:#F0F0F0; color:#9B9B9B; border:2px solid #E2E2E2; }
.elg-legend { font-size:11px; color:#999; margin-top:8px; }