/* Jordan & Byte - The AI Adventure : shared kid-friendly styles */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --space:      #0b1437;
  --space-2:    #131e4f;
  --ink:        #eaf0ff;
  --amber:      #ffc24b;
  --cyan:       #57e7ff;
  --magenta:    #ff6ad5;
  --green:      #7bf59a;
  --red:        #ff7a7a;
  --bubble:     #1c2a63;
  --display: 'Baloo 2', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(87,231,255,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(255,106,213,.18), transparent 60%),
    var(--space);
  overflow-x: hidden;
}

/* twinkling star field */
.stars, .stars::after {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 70% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent);
  background-size: 100% 100%;
  opacity: .55;
}
.stars::after { content:''; opacity:.3; animation: twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.15} to{opacity:.5} }

.wrap { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 24px 18px 64px; }

h1, h2, h3 { font-family: var(--display); margin: 0 0 .3em; line-height: 1.05; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.3rem); }
p { font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.5; }

/* ---------- Byte the robot (pure CSS) ---------- */
.byte {
  --c: var(--cyan);
  width: 150px; height: 170px; position: relative; margin: 0 auto;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 60%, transparent));
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.byte .antenna { position:absolute; top:-14px; left:50%; width:4px; height:22px; background:#9fb0e8; transform:translateX(-50%); border-radius:3px; }
.byte .antenna::after { content:''; position:absolute; top:-9px; left:50%; width:12px; height:12px; border-radius:50%; background:var(--amber); transform:translateX(-50%); box-shadow:0 0 12px var(--amber); animation:blink 2s infinite; }
@keyframes blink { 0%,90%,100%{opacity:1} 95%{opacity:.3} }
.byte .head {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:120px; height:96px; border-radius:26px;
  background:linear-gradient(180deg,#2a3a82,#1a2659);
  border:3px solid color-mix(in srgb, var(--c) 70%, #2a3a82);
}
.byte .face {
  position:absolute; top:14px; left:14px; right:14px; bottom:14px;
  border-radius:18px; background:#0a1230; display:flex; align-items:center; justify-content:center; gap:16px;
}
.byte .eye { width:22px; height:22px; border-radius:50%; background:var(--c); box-shadow:0 0 14px var(--c); transition:.2s; }
.byte .mouth { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:30px; height:8px; border-radius:6px; background:var(--c); box-shadow:0 0 10px var(--c); transition:.2s; }
.byte .body { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:96px; height:54px; border-radius:18px 18px 14px 14px; background:linear-gradient(180deg,#24327a,#16224f); border:3px solid color-mix(in srgb, var(--c) 50%, #24327a); }
.byte .body::after { content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); opacity:.8; }

/* moods */
.byte[data-pose="confused"] { --c: var(--amber); }
.byte[data-pose="confused"] .mouth { width:18px; border-radius:50%; height:14px; }
.byte[data-pose="confused"] .eye:last-of-type { transform:scaleY(.5); }
.byte[data-pose="curious"]  { --c: var(--cyan); }
.byte[data-pose="proud"]    { --c: var(--green); }
.byte[data-pose="proud"] .mouth { width:40px; height:18px; border-radius:0 0 20px 20px; }
.byte[data-pose="proud"] .eye { height:14px; border-radius:40% 40% 50% 50%; }

/* ---------- speech bubble ---------- */
.bubble {
  position: relative; margin: 22px auto 0; max-width: 560px;
  background: var(--bubble); border:3px solid color-mix(in srgb, var(--cyan) 40%, var(--bubble));
  border-radius: 22px; padding: 18px 22px; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.bubble::before { content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%); border:9px solid transparent; border-bottom-color: var(--bubble); }
.bubble p { margin:0; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  color: #0b1437; background: linear-gradient(180deg, var(--amber), #ff9f1c);
  border: none; border-radius: 18px; padding: 16px 30px; cursor: pointer;
  box-shadow: 0 6px 0 #c87a12, 0 12px 26px rgba(255,160,40,.35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c87a12; }
.btn.cyan    { background: linear-gradient(180deg, var(--cyan), #2ec5e6); box-shadow:0 6px 0 #1f8aa3, 0 12px 26px rgba(80,210,255,.35); }
.btn.green   { background: linear-gradient(180deg, var(--green), #43d979); box-shadow:0 6px 0 #2b9a52, 0 12px 26px rgba(120,240,150,.3); }
.btn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.center { text-align: center; }

/* ---------- card / panel ---------- */
.panel {
  background: rgba(19,30,79,.7); border:2px solid rgba(120,160,255,.25);
  border-radius: 24px; padding: 24px; margin: 22px 0; backdrop-filter: blur(6px);
}

/* ---------- progress map planets ---------- */
.map { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:24px; }
.planet {
  position: relative; width: min(78vw, 360px); padding: 22px 26px; margin: 10px 0;
  border-radius: 26px; text-align:left; cursor:pointer; border:3px solid transparent;
  display:flex; align-items:center; gap:18px; transition:.15s; color:var(--ink);
  background: rgba(28,42,99,.85);
}
.planet .orb { width:54px; height:54px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:1.6rem; }
.planet h3 { margin:0; font-size:1.3rem; }
.planet small { opacity:.8; font-weight:700; }
.planet.active { border-color: var(--amber); box-shadow:0 0 0 4px rgba(255,194,75,.18), 0 0 34px rgba(255,194,75,.35); animation: pulse 2.2s infinite; }
.planet.active .orb { background:linear-gradient(180deg,var(--amber),#ff9f1c); box-shadow:0 0 20px var(--amber); }
.planet.done { border-color: var(--green); }
.planet.done .orb { background:linear-gradient(180deg,var(--green),#43d979); box-shadow:0 0 18px var(--green); }
.planet.locked { opacity:.45; cursor:not-allowed; filter:grayscale(.5); }
.planet.locked .orb { background:#33406f; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
.connector { width:5px; height:26px; background:linear-gradient(var(--amber),transparent); opacity:.5; border-radius:4px; }

/* ---------- badges ---------- */
.badges { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.badge { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:1.7rem; background:#1c2a63; border:2px dashed rgba(255,255,255,.2); }
.badge.got { background:linear-gradient(180deg,var(--amber),#ff9f1c); border:none; color:#0b1437; box-shadow:0 0 18px var(--amber); animation: pop .5s ease; }
@keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* ---------- game bits ---------- */
.cards { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:18px 0; }
.card-pic {
  width:120px; height:120px; border-radius:20px; font-size:3.6rem; display:grid; place-items:center;
  background:#101a45; border:3px solid rgba(120,160,255,.3); cursor:grab; user-select:none; transition:.15s;
}
.card-pic:active { cursor:grabbing; transform:scale(1.06); }
.card-pic.dragging { opacity:.4; }
.buckets { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.bucket {
  flex:1 1 200px; min-height:150px; border-radius:22px; padding:14px; text-align:center;
  border:4px dashed rgba(255,255,255,.25); transition:.15s;
}
.bucket.cat { background:rgba(255,106,213,.12); }
.bucket.dog { background:rgba(87,231,255,.12); }
.bucket.over { border-color:#fff; transform:scale(1.02); }
.bucket .label { font-family:var(--display); font-size:1.4rem; margin-bottom:8px; }
.bucket .drop-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.bucket .drop-row .card-pic { width:64px; height:64px; font-size:2rem; cursor:default; }

.word-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:16px 0; }
.chip {
  font-family:var(--display); font-weight:700; font-size:1.15rem; padding:12px 20px; border-radius:16px;
  background:#101a45; border:3px solid rgba(120,160,255,.3); cursor:pointer; transition:.12s; color:var(--ink);
}
.chip:hover { border-color:var(--cyan); }
.chip.picked { background:linear-gradient(180deg,var(--cyan),#2ec5e6); color:#0b1437; border-color:transparent; }
.chip.vague { }
.canvas-out { font-size:5rem; min-height:120px; display:grid; place-items:center; margin:8px 0; }

.maze { display:grid; gap:6px; justify-content:center; margin:18px auto; width:max-content; }
.cell { width:54px; height:54px; border-radius:12px; background:#101a45; display:grid; place-items:center; font-size:1.8rem; }
.cell.wall { background:#33406f; }
.cell.goal { background:rgba(120,240,150,.2); }
.cell.byte-here { background:rgba(87,231,255,.25); }
.cmd-tray, .cmd-seq { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; min-height:60px; margin:12px 0; }
.cmd { font-size:1.8rem; width:54px; height:54px; border-radius:14px; background:#101a45; border:3px solid rgba(120,160,255,.3); cursor:pointer; display:grid; place-items:center; }
.cmd-seq { border:3px dashed rgba(255,255,255,.2); border-radius:16px; padding:10px; }
.feedback { font-family:var(--display); font-size:1.3rem; text-align:center; margin:14px 0; min-height:1.5em; }
.feedback.good { color:var(--green); }
.feedback.oops { color:var(--amber); }

.fade-in { opacity:0; animation: fadeUp .6s ease forwards; }
@keyframes fadeUp { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
.delay-1{animation-delay:.15s}.delay-2{animation-delay:.3s}.delay-3{animation-delay:.45s}

.backlink { display:inline-block; margin-top:8px; color:var(--cyan); font-weight:700; text-decoration:none; }
.muted { opacity:.7; font-size:.95rem; }