/* ============ Base / Theme ============ */
:root{
  --bg-1:#0b1437;
  --bg-2:#1a2a6c;
  --bg-3:#3b1f8b;
  --card:#ffffff;
  --ink:#1a2150;
  --ink-soft:#4d557d;
  --accent:#ffd60a;
  --accent-2:#ff7ad9;
  --good:#22c55e;
  --bad:#ef4444;
  --info:#38bdf8;
  --shadow: 0 18px 40px rgba(13, 18, 60, .25);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family: 'Fredoka', system-ui, -apple-system, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Floating background bubbles */
#bg-bubbles{position:fixed;inset:0;pointer-events:none;z-index:0}
#bg-bubbles::before, #bg-bubbles::after{
  content:""; position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,214,10,.35), transparent 60%);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}
#bg-bubbles::before{width:380px;height:380px;left:-80px;top:10%}
#bg-bubbles::after{
  width:520px;height:520px;right:-120px;bottom:-80px;
  background: radial-gradient(circle at 60% 40%, rgba(255,122,217,.35), transparent 60%);
  animation-duration: 22s;
}
@keyframes drift{
  from{transform:translate(0,0) scale(1)}
  to  {transform:translate(40px,-30px) scale(1.1)}
}

/* ============ Top bar ============ */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px;
  color: white;
  backdrop-filter: blur(8px);
  background: rgba(11,20,55,.45);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .3px;
}
.brand .logo{font-size:1.45rem}
.hud{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hud-item{
  display:flex; align-items:center; gap:6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-weight:600; font-size:.95rem;
}
.hud-item .hud-icon{font-size:1.05rem}
.hud-item.badges{padding:4px 8px}
#hudBadges{display:flex; gap:4px; min-height:22px}
#hudBadges .badge{
  font-size:1.05rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: pop .55s cubic-bezier(.2,1.6,.4,1);
}
@keyframes pop{
  0%{transform:scale(0) rotate(-30deg)}
  60%{transform:scale(1.4) rotate(8deg)}
  100%{transform:scale(1) rotate(0)}
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: inherit;
  font-weight: 600; font-size: 1rem;
  padding: 12px 20px;
  border-radius: 14px;
  border: none;
  cursor:pointer;
  background: linear-gradient(135deg, var(--accent), #ffae00);
  color: #2b1a00;
  box-shadow: 0 8px 22px rgba(255,176,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.btn:hover{transform: translateY(-2px); box-shadow:0 12px 26px rgba(255,176,0,.45)}
.btn:active{transform: translateY(0)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn.ghost{
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow:none;
}
.btn.ghost:hover{background: rgba(255,255,255,.28)}
.btn.small{padding:8px 14px; font-size:.9rem; border-radius:10px}
.btn.success{background: linear-gradient(135deg, #34d399, #16a34a); color:#03261a}
.btn.danger{background: linear-gradient(135deg, #fb7185, #ef4444); color:#3a0a0a}

/* ============ App layout ============ */
.app{
  position:relative; z-index:1;
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 18px 100px;
}

.card{
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 18px;
  animation: rise .35s ease both;
}
@keyframes rise{
  from{opacity:0; transform: translateY(10px)}
  to  {opacity:1; transform: translateY(0)}
}

h1,h2,h3{margin: 0 0 10px}
h1{font-size: 2rem}
h2{font-size: 1.5rem}
.muted{color: var(--ink-soft)}
p{line-height:1.55}

/* ============ Welcome screen ============ */
.welcome .hero{
  text-align:center;
  padding: 8px 0 14px;
}
.welcome h1{font-size: 2.2rem}
.welcome h1 .wiggle{display:inline-block; animation: wiggle 1.4s ease-in-out infinite}
@keyframes wiggle{
  0%,100%{transform: rotate(-4deg)}
  50%{transform: rotate(8deg)}
}
.welcome .topics{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 16px 0;
}
.topic-chip{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding: 12px;
  background: linear-gradient(135deg,#eef2ff,#fdf2f8);
  border-radius: 12px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: transform .15s ease, border-color .15s;
}
.topic-chip:hover{transform: translateY(-3px); border-color: var(--accent-2)}
.topic-chip .emoji{font-size: 1.7rem}
.topic-chip .label{font-size: .9rem; text-align:center}

.name-row{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top: 14px;
}
.name-row input{
  flex:1; min-width:200px;
  font-family: inherit; font-size: 1.05rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #d6d8e6;
  outline:none;
}
.name-row input:focus{border-color: var(--accent-2)}

/* ============ Section navigation pill ============ */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.section-head .pill{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, #eef2ff, #fdf2f8);
  padding: 6px 14px; border-radius: 999px; font-weight:600;
}
.section-head .progress{
  flex:1; min-width:180px;
  height: 14px;
  background: #e5e7f1;
  border-radius: 999px; overflow:hidden; margin: 0 8px;
}
.section-head .progress > span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0%;
  transition: width .4s ease;
}

/* ============ Reading material ============ */
.reading h2 .emoji{font-size: 1.6rem}
.reading .lesson{
  background: linear-gradient(135deg, #fffaf0, #fef3ff);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 12px 0;
}
.reading ul{padding-left: 20px; margin: 8px 0}
.reading li{margin: 4px 0}
.key-point{
  display:inline-block;
  background: #fff7c2;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.viz{
  margin: 16px 0;
  padding: 18px;
  background: #f7f8ff;
  border-radius: 14px;
  border: 2px dashed #c7caee;
}
.viz h3{font-size: 1.05rem; color: var(--ink-soft); margin-bottom:10px; text-align:center}

/* Binary place value chart */
.bin-chart{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
}
.bit{
  display:flex; flex-direction:column; align-items:center;
  width: 64px;
  background:#fff; border-radius: 10px; border: 2px solid #d6d8e6;
  padding: 8px 4px;
  cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
  user-select:none;
}
.bit:hover{transform: translateY(-2px)}
.bit .place{font-size:.78rem; color: var(--ink-soft); font-weight:600}
.bit .digit{
  font-family:'JetBrains Mono', monospace;
  font-size: 1.6rem; font-weight: 700;
  margin: 4px 0;
}
.bit.on{background: linear-gradient(135deg,#fff3a8,#ffd60a); border-color:#e0a800}
.bit.on .digit{color:#3a2700}

.bin-total{
  text-align:center; margin-top:10px;
  font-family:'JetBrains Mono', monospace;
  font-size: 1.2rem; font-weight:700;
}
.bin-total .num{color: var(--accent-2)}

/* Binary addition viz */
.bin-add-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size: 1.5rem;
}
.bin-add-row .bits span{
  display:inline-block; width:30px; text-align:center;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.bin-add-row .bits span.carry{color: var(--accent-2); font-size: .9rem}
.bin-add-row .bits span.flash{
  background: #fff3a8; border-radius: 4px;
  animation: flash 1s ease;
}
@keyframes flash{
  0%{background:#ffd60a}
  100%{background:transparent}
}

/* Binary shift viz */
.shift-row{
  display:flex; gap:6px; justify-content:center; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size:1.4rem;
}
.shift-row .digit-cell{
  display:inline-block; width:40px; padding:8px 0; text-align:center;
  background:#fff; border-radius:8px; border:2px solid #d6d8e6;
  font-weight:700;
  transition: transform .4s ease;
}
.shift-row .digit-cell.shifted{
  background: linear-gradient(135deg,#fff3a8,#ffd60a); border-color:#e0a800;
}

/* Pixel grid */
.pixel-grid{
  display:grid; gap:3px; justify-content:center; margin: 0 auto;
  width: max-content;
}
.pixel{
  width:30px; height:30px; border-radius:4px;
  background:#fff; border: 1px solid #c7caee; cursor:pointer;
  transition: background .12s, transform .1s;
}
.pixel:hover{transform: scale(1.08)}
.pixel.on{background:#1a2150}

/* SQL table */
.sql-table{
  width: 100%; border-collapse: collapse;
  font-family:'JetBrains Mono', monospace;
  background:#fff; border-radius: 10px; overflow:hidden;
}
.sql-table th, .sql-table td{
  padding: 8px 10px; text-align:left;
  border-bottom: 1px solid #e5e7f1;
}
.sql-table th{background: linear-gradient(135deg,#1a2a6c,#3b1f8b); color:#fff; font-family:'Fredoka',sans-serif}
.sql-table tr.match{background: #fff7c2; animation: flash 1.2s ease}

.sql-code{
  font-family:'JetBrains Mono', monospace;
  background:#0b1437; color:#fff;
  padding: 10px 14px; border-radius:8px;
  font-size: 1rem;
  display: inline-block;
}
.sql-code .kw{color:#ffd60a; font-weight:700}
.sql-code .field{color:#a8e6ff}
.sql-code .val{color:#ff7ad9}

/* Hardware diagram */
.hw-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap:10px;
}
.hw-card{
  background:#fff; border-radius:12px; padding:12px;
  border:2px solid #d6d8e6;
  text-align:center;
  transition: transform .12s, border-color .15s;
}
.hw-card:hover{transform:translateY(-2px); border-color: var(--accent-2)}
.hw-card .emoji{font-size:2rem; display:block; margin-bottom:4px}
.hw-card .name{font-weight:700; font-size:.95rem}
.hw-card .desc{font-size:.82rem; color: var(--ink-soft); margin-top:4px}

/* Flowchart shapes */
.flow-svg{display:block; margin: 0 auto; max-width:100%; height:auto}
.flow-svg .label{font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px}
.flow-svg .start-end{fill:#ffd60a; stroke:#0b1437; stroke-width:2}
.flow-svg .process{fill:#a8e6ff; stroke:#0b1437; stroke-width:2}
.flow-svg .decision{fill:#ff7ad9; stroke:#0b1437; stroke-width:2}
.flow-svg .arrow{stroke:#0b1437; stroke-width:2; fill:none; marker-end:url(#arrowhead)}

/* Network diagram */
.net-svg{display:block; margin: 0 auto; max-width:100%; height:auto}
.net-svg .device{stroke:#0b1437; stroke-width:2}
.net-svg .device.computer{fill:#a8e6ff}
.net-svg .device.router{fill:#ff7ad9}
.net-svg .device.cloud{fill:#ffd60a}
.net-svg .link{stroke:#0b1437; stroke-width:2; stroke-dasharray: 4 4; animation: dash 1.5s linear infinite}
@keyframes dash{
  to{stroke-dashoffset: -16}
}
.net-svg .label{font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px}

/* ============ Comprehension check ============ */
.check{
  background: linear-gradient(135deg, #e0f2fe, #e0f7ff);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
}
.check h3{margin:0 0 8px}
.check .options{display:flex; flex-direction:column; gap:8px; margin: 8px 0}

/* ============ Quiz options ============ */
.q-card .qtext{font-size: 1.1rem; font-weight:600; margin-bottom:10px}
.q-card .options{display:flex; flex-direction:column; gap:8px}
.opt{
  display:flex; align-items:center; gap:10px;
  background:#f7f8ff;
  border:2px solid #d6d8e6;
  border-radius: 12px;
  padding: 12px 14px;
  cursor:pointer;
  font-weight:500;
  transition: background .12s, border-color .12s, transform .1s;
}
.opt:hover{background:#eef2ff; border-color: var(--accent-2)}
.opt .letter{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  background: var(--accent); color:#2b1a00; font-weight:700;
}
.opt.correct{background: #d1fae5; border-color: var(--good)}
.opt.wrong{background: #fee2e2; border-color: var(--bad); animation: shake .35s}
.opt.disabled{pointer-events:none; opacity:.7}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* Short answer input */
.short-input{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.short-input input{
  flex:1; min-width: 220px;
  font-family:'JetBrains Mono', monospace; font-size: 1.05rem;
  padding: 12px 14px;
  border: 2px solid #d6d8e6;
  border-radius: 12px;
  outline:none;
}
.short-input input:focus{border-color: var(--accent-2)}
.short-input input.correct{border-color: var(--good); background: #f0fdf4}
.short-input input.wrong{border-color: var(--bad); background: #fef2f2; animation: shake .35s}

/* Feedback box */
.feedback{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f1f5ff;
  border-left: 4px solid var(--info);
  animation: rise .3s ease both;
}
.feedback.good{background:#ecfdf5; border-color: var(--good)}
.feedback.bad{background:#fef2f2; border-color: var(--bad)}
.feedback strong{display:inline-block; margin-right:6px}
.feedback .thinking{display:inline-flex; gap:4px; align-items:center}
.feedback .thinking .dot{
  width:6px;height:6px;border-radius:50%;background: var(--ink-soft);
  animation: blink 1.2s infinite;
}
.feedback .thinking .dot:nth-child(2){animation-delay:.2s}
.feedback .thinking .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{
  0%,100%{opacity:.2}
  50%{opacity:1}
}

.next-row{margin-top:16px; display:flex; justify-content:flex-end; gap:8px}

/* ============ Toast ============ */
.toast{
  position: fixed; left: 50%; top: 80px;
  transform: translateX(-50%) translateY(-20px);
  background: var(--ink); color:#fff;
  padding: 12px 18px; border-radius: 12px;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events:none;
  z-index: 50;
  transition: opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(0)}
.toast.good{background: var(--good)}
.toast.bad{background: var(--bad)}

#confetti{position:fixed; inset:0; pointer-events:none; z-index:40}

/* ============ Finish screen ============ */
.finish{text-align:center}
.finish .score-big{
  font-size: 3.4rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 8px 0;
}
.leaderboard{
  margin-top: 16px;
  background: linear-gradient(135deg, #fffaf0, #fdf2f8);
  border-radius: 14px;
  padding: 14px 16px;
}
.leaderboard h3{margin: 0 0 8px}
.leaderboard ol{padding-left: 22px; margin:0}
.leaderboard li{
  padding: 4px 0;
  display:flex; justify-content:space-between; gap:12px;
}
.leaderboard li.you{
  font-weight: 700; color: #2b1a00;
  background: linear-gradient(135deg,#fff3a8,#ffd60a);
  margin: 4px -10px; padding: 6px 10px;
  border-radius: 8px;
}

@media (max-width: 600px){
  h1{font-size:1.6rem}
  .topbar{padding:10px 14px}
  .brand{font-size:1rem}
  .hud{gap:8px}
  .hud-item{padding: 4px 8px; font-size:.85rem}
  .bit{width:46px}
  .bit .place{font-size:.65rem}
  .bit .digit{font-size:1.2rem}
  .pixel{width:24px;height:24px}
}