/* 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:'Quicksand', 'Inter', 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:12px 24px;
  max-width:1200px; margin:0 auto; width:100%;
}
.brand { display:inline-flex; align-items:center }
.brand-logo { width:110px; 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;
}
@media (hover: hover) {
  .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:14px 20px 50px; flex:1 }

/* Footer */
.site-footer {
  position:relative; z-index:1;
  text-align:center; padding:24px 16px;
  font-size:12px; color:rgba(255,255,255,.5); font-weight:500;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:30px;
}
.footer-links {
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin-bottom:14px;
}
.footer-links a {
  color:rgba(255,255,255,.65);
  text-decoration:none;
  font-size:13px; font-weight:500;
  transition: color .2s;
}
@media (hover: hover) {
  .footer-links a:hover { color:var(--pink) }
}
.footer-copy { font-size:11px }
.footer-credit {
  margin-top:14px;
  display:flex; justify-content:center;
}
.claude-badge {
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px;
  background: linear-gradient(135deg, rgba(255,140,0,.12), rgba(204,90,0,.12));
  border: 1px solid rgba(255,140,0,.4);
  border-radius: 50px;
  font-size:12px;
  color:rgba(255,255,255,.85);
  cursor:help;
  transition: all .25s;
}
.claude-badge strong { color:#ff8c00 }
@media (hover: hover) {
  .claude-badge:hover {
    background: linear-gradient(135deg, rgba(255,140,0,.2), rgba(204,90,0,.2));
    border-color: rgba(255,140,0,.6);
  }
  .claude-badge:hover .credit-tooltip { opacity:1; visibility:visible; transform:translate(-50%, -8px) }
}
.credit-tooltip {
  position:absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 280px; max-width: 90vw;
  margin-bottom: 10px;
  padding:12px 14px;
  background: rgba(13,31,92,.98);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,140,0,.4);
  border-radius: 12px;
  font-size: 11px;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  text-align:left;
  opacity: 0; visibility: hidden;
  transition: all .25s;
  pointer-events:none;
  z-index: 100;
}
.credit-tooltip a { color:#ff8c00; text-decoration:underline }

/* Generic page heading */
.page-title {
  font-size:clamp(26px, 4.5vw, 40px); font-weight:700; text-align:center; margin-bottom:6px;
  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(12px,1.8vw,15px); margin-bottom:24px; font-weight:500; letter-spacing:.05em }

/* Hero on home — compact */
.hero-mascot {
  text-align:center; margin:8px 0;
  position:relative;
}
.hero-mascot img { width:min(170px, 36vw); margin:0 auto; animation:float-up 4s ease-in-out infinite; filter:drop-shadow(0 20px 35px 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 — homepage 4 game launcher */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px; max-width:1100px; margin:0 auto;
}
@media (min-width:900px) {
  .cards-grid { grid-template-columns:repeat(4, 1fr) }
}
.game-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:20px 16px; 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:8px;
}
.game-card::before {
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:linear-gradient(135deg, transparent, rgba(255,60,172,.15), transparent);
}
@media (hover: hover) {
  .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:110px; height:110px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 8px 16px rgba(0,0,0,.3)) }
.gc-title { font-size:18px; font-weight:700; line-height:1.2 }
.gc-desc { font-size:12px; color:var(--text-muted); line-height:1.4; font-weight:500; min-height:34px }
.gc-cta {
  display:inline-block; margin-top:4px;
  padding:6px 18px; border-radius:50px;
  background:linear-gradient(90deg, var(--pink), var(--blue));
  font-weight:600; font-size:12px; letter-spacing:.05em;
  position:relative; z-index:1;
}

/* Stats bar (homepage) */
.stats-bar {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  max-width:900px;
  margin:32px auto 0;
}
@media(max-width:640px) {
  .stats-bar { grid-template-columns:repeat(2, 1fr); gap:10px }
}
.stat-item {
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:16px 12px;
  text-align:center;
  transition: transform .25s, border-color .25s;
}
@media (hover: hover) {
  .stat-item:hover { transform:translateY(-3px); border-color:rgba(255,60,172,.4) }
}
.stat-num {
  font-family:'Press Start 2P', monospace;
  font-size:clamp(20px, 3vw, 28px);
  background:linear-gradient(90deg, var(--pink), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:6px;
  font-weight:700;
}
.stat-lbl {
  font-size:11px;
  color:var(--text-muted);
  font-weight:600;
  letter-spacing:.05em;
}

/* 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;
}
@media (hover: hover) {
  .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) }
@media (hover: hover) {
  .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;
}

/* Setup pages — narrow nick card + full-width grid below */
.setup-nick-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-md);
  padding:18px 24px;
  max-width:480px; margin:0 auto 18px;
}
.setup-duel-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-md);
  padding:20px 28px;
  max-width:560px; margin:0 auto 18px;
}
.setup-vs-row { display:flex; gap:14px; align-items:flex-end; justify-content:space-between }
.setup-vs-side { flex:1; text-align:center }
.setup-vs-emoji { font-size:36px; margin-bottom:4px }
.setup-vs-mid {
  font-family:'Press Start 2P',monospace; font-size:20px; color:var(--gold);
  padding-bottom:14px; flex-shrink:0;
}
.setup-prompt {
  text-align:center; color:var(--text-muted); font-size:13px;
  margin:14px 0 12px; letter-spacing:.03em;
}
.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 — 3 columns on desktop, 2 on mobile */
.category-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:20px;
}
@media (max-width:640px) {
  .category-grid { grid-template-columns:repeat(2, 1fr); gap:10px }
}
/* Category cards — homepage launcher style */
.cat-card {
  background:var(--card-bg); backdrop-filter:blur(20px);
  border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:22px 16px; 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:8px;
  cursor:pointer; font-family:inherit;
}
.cat-card::before {
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s; pointer-events:none;
  background:linear-gradient(135deg, transparent, rgba(255,60,172,.15), transparent);
}
@media (hover: hover) {
  .cat-card:hover { transform:translateY(-10px) scale(1.03); border-color:var(--cat-color, var(--pink)); box-shadow:var(--shadow-glow) }
  .cat-card:hover::before { opacity:1 }
  .cat-card:hover .cat-icon img { transform:scale(1.1) rotate(-5deg) }
}

.cat-icon { display:flex; align-items:center; justify-content:center; height:120px; margin-bottom:4px }
.cat-icon img { max-width:120px; max-height:120px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 10px 20px rgba(0,0,0,.35)) }
.cat-emoji-fallback { font-size:64px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)) }

.cat-name { font-size:18px; font-weight:700; line-height:1.2; min-height:1.2em }
.cat-desc { font-size:12px; color:var(--text-muted); line-height:1.4; font-weight:500; min-height:34px; padding:0 4px }
.cat-cta {
  display:inline-block; margin-top:6px;
  padding:6px 18px; border-radius:50px;
  background:linear-gradient(90deg, var(--pink), var(--blue));
  font-weight:600; font-size:12px; letter-spacing:.05em;
  color:#fff; position:relative; z-index:1;
}
.cat-card[disabled] .cat-cta {
  background:rgba(255,255,255,.1); color:var(--text-muted);
}

@media (max-width:640px) {
  .cat-card { padding:16px 10px; gap:6px }
  .cat-icon { height:90px }
  .cat-icon img { max-width:90px; max-height:90px }
  .cat-name { font-size:15px }
  .cat-desc { font-size:11px; min-height:28px }
  .cat-cta { padding:5px 14px; font-size:11px }
}
.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;
}
@media (hover: hover) {
  .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) } }

/* Streak / combo animations */
@keyframes streak-pop {
  0% { transform:scale(0); opacity:0 }
  50% { transform:scale(1.15); opacity:1 }
  100% { transform:scale(1); opacity:1 }
}
@keyframes streak-fire {
  0%, 100% { filter:brightness(1) drop-shadow(0 0 6px #ff9500) }
  50% { filter:brightness(1.3) drop-shadow(0 0 12px #ff3300) }
}

.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 }
}