/* Braincade — shared styles */
:root {
  --pink:#ff3cac; --purple:#784ba0; --blue:#2b86c5;
  --dark1:#1a0033; --dark2:#330066; --dark3:#0d1f5c;
  --gold:#ffd700; --green:#22c55e;
  --text:#ffffff; --text-dim:#b8c5ff; --text-muted:#a0aacc;
  --card-bg:rgba(255,255,255,.07); --card-border:rgba(255,255,255,.12);
  --radius-sm:12px; --radius-md:20px; --radius-lg:28px;
  --shadow-glow:0 20px 60px rgba(255,60,172,.3);
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent }
body {
  font-family:'Fredoka', system-ui, sans-serif;
  color:var(--text);
  min-height:100vh;
  background:linear-gradient(135deg, var(--dark1) 0%, var(--dark2) 35%, var(--dark3) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
  display:flex; flex-direction:column;
}
img { max-width:100%; height:auto; display:block }

/* Stars */
.stars { position:fixed; inset:0; pointer-events:none; z-index:0 }
.star { position:absolute; background:#fff; border-radius:50%; animation:twinkle 3s infinite }
@keyframes twinkle { 0%,100% { opacity:.25; transform:scale(1) } 50% { opacity:1; transform:scale(1.4) } }

/* Floating bg emojis */
.float-bg { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06; font-size:60px }
.float-bg span { position:absolute; animation:float-around 22s linear infinite }
@keyframes float-around { 0% { transform:translateY(0) rotate(0) } 100% { transform:translateY(-100vh) rotate(360deg) } }

/* Header */
.site-header {
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  max-width:1200px; margin:0 auto; width:100%;
}
.brand { display:inline-flex; align-items:center }
.brand-logo { width:140px; height:auto; transition:transform .3s }
.brand:hover .brand-logo { transform:scale(1.05) rotate(-2deg) }
.site-nav { display:flex; gap:8px; flex-wrap:wrap }
.nav-link {
  color:var(--text); text-decoration:none; font-weight:600; font-size:15px;
  padding:10px 16px; border-radius:50px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  transition:all .25s;
}
.nav-link:hover { background:rgba(255,60,172,.2); border-color:var(--pink); transform:translateY(-2px) }

/* Main */
.site-main { position:relative; z-index:1; max-width:1100px; margin:0 auto; width:100%; padding:20px 20px 80px; flex:1 }

/* Footer */
.site-footer {
  position:relative; z-index:1;
  text-align:center; padding:24px;
  font-size:13px; color:rgba(255,255,255,.5); font-weight:500;
}

/* Generic page heading */
.page-title {
  font-size:clamp(28px, 5vw, 44px); font-weight:700; text-align:center; margin-bottom:8px;
  background:linear-gradient(90deg, var(--pink), #fff, var(--blue));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradient-flow 5s linear infinite;
}
@keyframes gradient-flow { 0% { background-position:0% 50% } 100% { background-position:200% 50% } }
.page-subtitle { text-align:center; color:var(--text-dim); font-size:clamp(14px,2vw,18px); margin-bottom:40px; font-weight:500 }

/* Hero on home */
.hero-mascot {
  text-align:center; margin:30px 0;
  position:relative;
}
.hero-mascot img { width:min(260px, 50vw); margin:0 auto; animation:float-up 4s ease-in-out infinite; filter:drop-shadow(0 30px 50px rgba(255,60,172,.4)) }
.hero-mascot::before, .hero-mascot::after {
  content:''; position:absolute; border-radius:50%; width:160px; height:160px;
  background:radial-gradient(circle, rgba(255,60,172,.4) 0%, transparent 70%);
  animation:pulse-glow 3s ease-in-out infinite; z-index:-1;
}
.hero-mascot::before { top:20%; left:50%; transform:translateX(-180%) }
.hero-mascot::after { bottom:20%; left:50%; transform:translateX(80%); animation-delay:1.5s; background:radial-gradient(circle, rgba(43,134,197,.5) 0%, transparent 70%) }
@keyframes float-up { 0%,100% { transform:translateY(0) rotate(-2deg) } 50% { transform:translateY(-15px) rotate(2deg) } }
@keyframes pulse-glow { 0%,100% { transform:translate(var(--tx,0),0) scale(1); opacity:.5 } 50% { transform:translate(var(--tx,0),0) scale(1.3); opacity:.8 } }

/* Cards grid */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px; max-width:960px; margin:0 auto;
}
.game-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:32px 24px; text-align:center; text-decoration:none; color:var(--text);
  transition:all .35s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.game-card::before {
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:linear-gradient(135deg, transparent, rgba(255,60,172,.15), transparent);
}
.game-card:hover { transform:translateY(-12px) scale(1.03); border-color:var(--pink); box-shadow:var(--shadow-glow) }
.game-card:hover::before { opacity:1 }
.game-card:hover .gc-img { transform:scale(1.1) rotate(-5deg) }
.gc-img { width:160px; height:160px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 10px 20px rgba(0,0,0,.3)) }
.gc-title { font-size:24px; font-weight:700 }
.gc-desc { font-size:14px; color:var(--text-muted); line-height:1.5; font-weight:500 }
.gc-cta {
  display:inline-block; margin-top:8px;
  padding:8px 22px; border-radius:50px;
  background:linear-gradient(90deg, var(--pink), var(--blue));
  font-weight:600; font-size:14px; letter-spacing:.05em;
  position:relative; z-index:1;
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 32px; border-radius:50px; font-family:inherit;
  font-size:16px; font-weight:600; letter-spacing:.02em;
  border:none; cursor:pointer; text-decoration:none; color:#fff;
  background:linear-gradient(90deg, var(--pink), var(--blue));
  transition:transform .2s, box-shadow .2s;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,60,172,.4) }
.btn:active { transform:translateY(0) }
.btn-secondary { background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2) }
.btn-secondary:hover { background:rgba(255,255,255,.15); border-color:var(--pink) }
.btn-large { padding:18px 40px; font-size:18px }

/* Forms */
.form-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:32px; max-width:480px; margin:0 auto;
}
.form-row { margin-bottom:20px }
.form-label { display:block; font-weight:600; font-size:14px; color:var(--text-dim); margin-bottom:8px; letter-spacing:.05em }
.form-input {
  width:100%; padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15);
  color:var(--text); font-family:inherit; font-size:16px;
  transition:border-color .2s, background .2s;
}
.form-input:focus { outline:none; border-color:var(--pink); background:rgba(255,255,255,.1) }
.form-input::placeholder { color:rgba(255,255,255,.35) }

/* Category grid */
.category-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; margin-top:24px;
}
.cat-card {
  background:var(--card-bg); border:2px solid var(--card-border); border-radius:var(--radius-md);
  padding:24px 16px; text-align:center; text-decoration:none; color:var(--text);
  transition:all .25s; cursor:pointer; position:relative;
}
.cat-card:hover { transform:translateY(-6px) scale(1.04); border-color:var(--cat-color, var(--pink)); box-shadow:0 12px 30px rgba(0,0,0,.3) }
.cat-emoji { font-size:48px; margin-bottom:10px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)) }
.cat-name { font-weight:600; font-size:15px }
.cat-desc { font-size:11px; color:var(--text-muted); margin-top:4px; line-height:1.3 }

/* Quiz play */
.quiz-progress {
  display:flex; align-items:center; gap:16px; margin-bottom:24px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:50px; padding:14px 20px;
}
.qp-bar { flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden }
.qp-fill { height:100%; background:linear-gradient(90deg, var(--pink), var(--blue)); transition:width .4s; border-radius:4px }
.qp-text { font-weight:600; font-size:14px; white-space:nowrap }
.qp-timer { font-weight:700; font-size:18px; color:var(--gold); font-family:'Press Start 2P', monospace; min-width:50px; text-align:right }
.qp-timer.warn { color:#ff5577; animation:flash .5s infinite }
@keyframes flash { 0%,100% { opacity:1 } 50% { opacity:.5 } }

.quiz-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:32px; max-width:760px; margin:0 auto;
}
.q-text { font-size:clamp(18px,2.6vw,24px); font-weight:600; line-height:1.4; margin-bottom:28px; min-height:80px }

.q-options { display:grid; grid-template-columns:1fr; gap:12px }
@media(min-width:640px) { .q-options { grid-template-columns:1fr 1fr } }
.q-opt {
  display:flex; align-items:center; gap:14px;
  padding:18px 22px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.12);
  font-family:inherit; font-size:16px; color:var(--text); text-align:left;
  transition:all .2s; font-weight:500;
}
.q-opt:hover:not(:disabled) { background:rgba(255,60,172,.15); border-color:var(--pink); transform:translateY(-2px) }
.q-opt:disabled { cursor:default }
.q-opt-letter {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.1); font-weight:700; font-size:14px;
  flex-shrink:0;
}
.q-opt.correct { background:rgba(34,197,94,.2); border-color:var(--green); animation:pop .4s }
.q-opt.wrong { background:rgba(255,68,68,.2); border-color:#ff5577 }
.q-opt.correct .q-opt-letter { background:var(--green) }
.q-opt.wrong .q-opt-letter { background:#ff5577 }
@keyframes pop { 0% { transform:scale(1) } 50% { transform:scale(1.05) } 100% { transform:scale(1) } }

.q-feedback { margin-top:20px; padding:16px; border-radius:14px; background:rgba(255,255,255,.06); font-size:14px; line-height:1.5; display:none }
.q-feedback.show { display:block; animation:slide-up .3s }
@keyframes slide-up { 0% { opacity:0; transform:translateY(8px) } 100% { opacity:1; transform:translateY(0) } }

.quiz-foot { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; flex-wrap:wrap }

/* Result page */
.result-hero {
  text-align:center; padding:40px 20px;
  background:var(--card-bg); border:2px solid var(--card-border);
  border-radius:var(--radius-lg); margin-bottom:24px;
}
.result-mascot { width:200px; margin:0 auto 20px; animation:bounce-in .8s cubic-bezier(.34,1.56,.64,1) }
@keyframes bounce-in { 0% { transform:scale(0); opacity:0 } 100% { transform:scale(1); opacity:1 } }
.result-score {
  font-family:'Press Start 2P', monospace; font-size:clamp(40px, 8vw, 72px);
  background:linear-gradient(90deg, var(--gold), var(--pink), var(--blue));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradient-flow 3s linear infinite;
  margin:10px 0;
}
.result-msg { font-size:clamp(18px, 3vw, 24px); font-weight:600; margin-bottom:10px }
.result-sub { color:var(--text-muted); font-size:14px }
.result-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px }

/* Coming soon */
.coming-soon {
  text-align:center; padding:60px 20px;
}
.coming-soon img { width:200px; margin:0 auto 24px; animation:wiggle 5s ease-in-out infinite; filter:drop-shadow(0 20px 40px rgba(255,60,172,.4)) }
.coming-soon h2 { font-size:clamp(28px, 5vw, 40px); margin-bottom:12px }
.coming-soon p { color:var(--text-dim); font-size:16px; max-width:520px; margin:0 auto 24px; line-height:1.6 }
@keyframes wiggle { 0%,100% { transform:rotate(-3deg) } 50% { transform:rotate(3deg) } }

/* Mobile */
@media (max-width:600px) {
  .site-header { padding:16px; flex-direction:column; gap:12px }
  .brand-logo { width:120px }
  .site-nav { width:100%; justify-content:center }
  .nav-link { font-size:13px; padding:8px 14px }
  .gc-img { width:130px; height:130px }
  .quiz-card { padding:20px }
  .q-opt { padding:14px 16px; font-size:15px }
}