/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:   #0f1f3d;
  --gold:   #f59e0b;
  --purple: #6d28d9;
  --green:  #16a34a;
  --red:    #dc2626;
  --blue:   #2563eb;
  --sky:    #60aee6;
  --font:   'Nunito', sans-serif;
  --display:'Fredoka One', 'Nunito', sans-serif;
}
html, body { height: 100%; font-family: var(--font); overflow: hidden; background: #0a1628; }

/* ── Screen system ───────────────────────────────────────── */
.screen { height: 100vh; display: flex; flex-direction: column; }
.screen.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   MAP SCREEN
═══════════════════════════════════════════════════════════ */

/* Top bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
  flex-shrink: 0;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-snake {
  font-size: 2.2rem;
  animation: snakeBob 3s ease-in-out infinite;
  display: block;
  line-height: 1;
}
@keyframes snakeBob { 0%,100%{transform:rotate(-6deg) scale(1)} 50%{transform:rotate(6deg) scale(1.08)} }

.brand-name {
  font-family: var(--display);
  font-size: 1.55rem;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.brand-name span { color: var(--gold); }
.brand-tag { font-size: 0.68rem; color: #7f9ab3; font-weight: 700; letter-spacing: 0.03em; }

.top-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.tbtn {
  border: none; border-radius: 10px;
  padding: 7px 14px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 800;
  cursor: pointer; transition: transform 0.12s, opacity 0.12s;
}
.tbtn:hover { transform: scale(1.06); }
.tbtn.gold   { background: var(--gold); color: #78350f; }
.tbtn.mute   { background: #1e3a5f; color: #93c5fd; border: 2px solid #2d5986; }

.star-count {
  background: rgba(255,255,255,0.07);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 900; font-size: 0.95rem;
  color: var(--gold);
  min-width: 65px; text-align: center;
}

/* Map body */
.map-body { display: flex; flex: 1; overflow: hidden; }

/* Panels */
.panel {
  width: 215px; min-width: 195px;
  display: flex; flex-direction: column;
  padding: 12px 10px; gap: 8px;
  overflow-y: auto; flex-shrink: 0;
}
.left-panel  { background: #fff9e6; border-right: 3px solid #fde68a; }
.right-panel { background: #f0effe; border-left:  3px solid #ddd6fe; }

/* Pip area */
.pip-area {
  display: flex; flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px dashed #fde68a;
  margin-bottom: 4px;
}
.pip-char { font-size: 4rem; line-height: 1; animation: snakeBob 2.5s ease-in-out infinite; }
.pip-label {
  font-family: var(--display);
  font-size: 0.72rem; letter-spacing: 0.1em;
  background: var(--gold); color: #78350f;
  border-radius: 999px; padding: 2px 10px;
  margin-top: -4px; margin-bottom: 8px;
}
.pip-bubble {
  background: #fff; border: 2.5px solid var(--gold);
  border-radius: 14px; padding: 9px 11px;
  font-size: 0.8rem; font-weight: 800; color: #1c1917;
  text-align: center; line-height: 1.5;
  position: relative;
}
.pip-bubble::before {
  content: ''; position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--gold);
}

/* Info cards */
.info-card {
  background: #fff; border-radius: 14px;
  border: 2px solid #fde68a;
  padding: 10px 12px;
}
.right-panel .info-card { border-color: #ddd6fe; }

.card-title {
  font-size: 0.68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #92400e; margin-bottom: 7px;
}
.card-title.orange { color: #c2410c; }

.how-ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.how-ul li { font-size: 0.79rem; font-weight: 700; color: #374151; }

/* Progress */
.prog-outer { height: 13px; background: #e5e7eb; border-radius: 999px; overflow: hidden; border: 2px solid #d1d5db; margin-bottom: 4px; }
.prog-inner { height: 100%; background: linear-gradient(90deg, #22c55e, #86efac); border-radius: 999px; transition: width 0.7s ease; }
.prog-nums  { font-size: 0.74rem; font-weight: 800; color: #6b7280; text-align: right; }
.prog-cheer { font-size: 0.79rem; font-weight: 800; color: #374151; text-align: center; margin-top: 4px; }

/* Profile */
.profile-card {
  background: linear-gradient(135deg, #3b0764, #6d28d9);
  border-radius: 16px; padding: 14px;
  text-align: center; margin-bottom: 4px;
}
.prof-avatar { font-size: 2.8rem; line-height: 1; margin-bottom: 4px; }
.prof-name { font-family: var(--display); font-size: 1rem; color: #fff; letter-spacing: 0.08em; margin-bottom: 6px; }
.prof-stats { display: flex; justify-content: center; gap: 14px; }
.prof-stats span { font-size: 0.88rem; font-weight: 900; color: #e9d5ff; }
.prof-stats b { color: #fff; }

/* Badges */
.badge-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; opacity: 0.35; transition: opacity 0.4s; }
.badge-row.earned { opacity: 1; }
.badge-ico { width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; transition: background 0.4s; }
.badge-row.earned .badge-ico { background: var(--gold); }
.badge-name { font-size: 0.76rem; font-weight: 900; color: #1c1917; }
.badge-desc { font-size: 0.65rem; font-weight: 700; color: #6b7280; }

/* Mission */
.mission-card { background: #fff7ed !important; border-color: #fed7aa !important; }
.mission-text { font-size: 0.78rem; font-weight: 700; color: #7c2d12; line-height: 1.4; margin-bottom: 6px; }
.mission-prog { font-size: 0.95rem; font-weight: 900; color: #ea580c; text-align: center; }

/* ── Map center ───────────────────────────────────────────── */
.map-center {
  flex: 1; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

.sky {
  background: linear-gradient(180deg, #2563eb 0%, #60aee6 60%, #bae6fd 100%);
  height: 68px; flex-shrink: 0;
  display: flex; align-items: center;
  padding: 8px 20px; gap: 8px; position: relative;
}
.cloud { font-size: 1.6rem; }
.cloud.a1 { animation: drift 9s ease-in-out infinite; }
.cloud.a2 { animation: drift 12s ease-in-out infinite; animation-delay: 3s; font-size: 1.3rem; }
.cloud.a3 { animation: drift 8s ease-in-out infinite; animation-delay: 5s; }
@keyframes drift { 0%,100%{transform:translateX(0)} 50%{transform:translateX(18px)} }
.sun    { position: absolute; right: 120px; top: 8px; font-size: 2.2rem; animation: snakeBob 5s ease-in-out infinite; }
.castle { position: absolute; right: 20px; bottom: 0; font-size: 3.8rem; line-height: 1; }

.ground {
  flex: 1; position: relative; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, #86efac 0%, #4ade80 60%, #22c55e 100%);
  border-top: 4px solid #15803d;
  padding: 14px 16px 80px;
}
.ground::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.3) 3px, transparent 3px);
  background-size: 26px 26px; pointer-events: none;
}

.trees {
  position: absolute; bottom: 50px; left: 0; right: 0;
  text-align: center; font-size: 1.6rem;
  letter-spacing: 10px; pointer-events: none; z-index: 1;
}

/* ── Level grid ──────────────────────────────────────────── */
.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 14px;
  position: relative; z-index: 2;
}

.lv-card {
  background: #fff; border-radius: 18px;
  border: 3px solid #e2e8f0;
  padding: 11px 8px 9px;
  text-align: center; cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative; overflow: hidden;
  min-height: 138px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}
.lv-card:not(.locked):hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 14px 36px rgba(0,0,0,0.22); }
.lv-card.locked { cursor: not-allowed; filter: grayscale(0.5); opacity: 0.6; }
.lv-card.done   { border-color: #22c55e; }
.lv-card.boss   { background: linear-gradient(135deg, #2e1065, #5b21b6); border-color: #a78bfa; grid-column: 2; }

.lv-num  { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; color: #94a3b8; text-transform: uppercase; }
.lv-card.boss .lv-num { color: #c4b5fd; }
.lv-icon { font-size: 2.2rem; line-height: 1; margin: 2px 0; }
.lv-name { font-size: 0.8rem; font-weight: 900; color: #1e293b; line-height: 1.2; }
.lv-card.boss .lv-name { color: #fff; }
.lv-learn { font-size: 0.65rem; font-weight: 800; color: #6b7280; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; }
.lv-card.boss .lv-learn { background: rgba(255,255,255,.15); color: #e9d5ff; }
.lv-stars { font-size: 1rem; letter-spacing: 2px; }
.lv-lock { position: absolute; top: 7px; right: 8px; font-size: 1rem; }
.lv-done { position: absolute; top: 7px; right: 8px; font-size: 1rem; }

.start-adv-btn {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #78350f;
  border: none; border-radius: 999px;
  padding: 12px 36px;
  font-family: var(--display); font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(245,158,11,.55);
  transition: transform .15s, box-shadow .15s;
  z-index: 10;
  animation: glowPulse 2s ease-in-out infinite;
}
.start-adv-btn:hover { transform: translateX(-50%) translateY(-4px); box-shadow: 0 10px 32px rgba(245,158,11,.75); }
@keyframes glowPulse { 0%,100%{box-shadow:0 6px 24px rgba(245,158,11,.55)} 50%{box-shadow:0 8px 36px rgba(245,158,11,.9)} }


/* ═══════════════════════════════════════════════════════════
   CHALLENGE SCREEN
═══════════════════════════════════════════════════════════ */

#screen-challenge {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%);
}

/* Ribbon */
.chall-ribbon {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: rgba(255,255,255,0.06);
  border-bottom: 2px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
  gap: 10px;
}

.ribbon-back {
  background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px; padding: 7px 14px;
  color: #e2e8f0; font-family: var(--font); font-size: 0.85rem; font-weight: 800;
  cursor: pointer; transition: background .15s;
}
.ribbon-back:hover { background: rgba(255,255,255,0.18); }

.ribbon-center { flex: 1; text-align: center; }
.ribbon-level {
  font-family: var(--display); font-size: 1.1rem;
  color: #e2e8f0; letter-spacing: 0.04em;
}

.ribbon-right { display: flex; align-items: center; gap: 10px; }
.ribbon-stars { font-size: 1.4rem; letter-spacing: 3px; min-width: 80px; text-align: right; }
.ribbon-voice-btn, .ribbon-stop-btn {
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 10px; padding: 6px 12px;
  font-family: var(--font); font-size: 0.8rem; font-weight: 800;
  color: #e2e8f0; cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.ribbon-voice-btn:hover { background: rgba(255,255,255,0.22); }
.ribbon-stop-btn { border-color: rgba(239,68,68,0.5); color: #fca5a5; }
.ribbon-stop-btn:hover { background: rgba(239,68,68,0.25); }

/* Split layout */
.chall-split {
  flex: 1; display: flex; overflow: hidden;
}

/* Pip column */
.chall-pip-col {
  width: 32%; min-width: 220px; max-width: 280px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 16px;
  gap: 16px;
  flex-shrink: 0;
}
.chall-pip-emoji {
  font-size: 7rem; line-height: 1;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  animation: snakeBob 2.5s ease-in-out infinite;
}
.chall-pip-bubble {
  background: #fff;
  border: 3px solid var(--gold);
  border-radius: 20px 20px 20px 4px;
  padding: 14px 16px;
  font-size: 0.95rem; font-weight: 800; color: #1c1917;
  line-height: 1.6; width: 100%;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  animation: popBubble .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popBubble { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }

/* Question column */
.chall-q-col {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px 24px; overflow-y: auto;
}

/* Question card — the main fix for readability */
.q-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  width: 100%; max-width: 520px;
  overflow: hidden;
}

/* Question number bar */
.q-num-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: #1e1b4b;
  border-bottom: 3px solid var(--gold);
}
.q-num-badge {
  font-family: var(--display); font-size: 1rem;
  color: #fff; letter-spacing: 0.04em;
}
.q-type-tag {
  background: rgba(255,255,255,0.15); color: #e2e8f0;
  font-size: 0.8rem; font-weight: 800;
  padding: 4px 12px; border-radius: 999px;
}

/* Question text — BIG, dark, readable */
.q-question {
  padding: 20px 22px 8px;
  font-size: 1.15rem; font-weight: 900;
  color: #0f172a; line-height: 1.5;
  background: #fff;
}

/* Code block */
.q-code {
  margin: 0 22px 12px;
  background: #1e293b; color: #e2e8f0;
  border-radius: 12px; padding: 14px 18px;
  font-family: 'Courier New', monospace;
  font-size: 0.92rem; font-weight: 700;
  line-height: 1.7; white-space: pre;
  border-left: 4px solid var(--gold);
}
.q-code.hidden { display: none; }

/* Options */
.q-opts {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 22px 20px;
  background: #fff;
}

.opt-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border: 2.5px solid #e2e8f0;
  border-radius: 14px; background: #f8fafc;
  font-family: var(--font); font-size: 1rem; font-weight: 800;
  color: #1e293b; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, transform .12s;
}
.opt-btn:hover:not(:disabled) { border-color: var(--purple); background: #f5f3ff; transform: scale(1.015); }
.opt-btn:disabled { cursor: default; }

/* Option A/B/C label */
.opt-label {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e2e8f0; color: #475569;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 900; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.opt-emoji { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.opt-text  { line-height: 1.35; flex: 1; }

.opt-btn.correct { border-color: #16a34a; background: #f0fdf4; color: #14532d; }
.opt-btn.correct .opt-label { background: #16a34a; color: #fff; }
.opt-btn.wrong   { border-color: #dc2626; background: #fef2f2; color: #7f1d1d; animation: optWiggle .3s ease; }
.opt-btn.wrong .opt-label { background: #dc2626; color: #fff; }
@keyframes optWiggle { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* Result panel — stays put, clearly readable */
.q-result {
  margin: 0 22px 20px;
  border-radius: 16px; overflow: hidden;
  border: 2.5px solid transparent;
  animation: popBubble .35s ease;
}
.q-result.hidden { display: none !important; }
.q-result.is-right { border-color: #86efac; }
.q-result.is-wrong { border-color: #fca5a5; }

.result-body {
  padding: 14px 16px;
  font-size: 0.95rem; font-weight: 800; line-height: 1.6;
}
.q-result.is-right .result-body { background: #f0fdf4; color: #14532d; }
.q-result.is-wrong .result-body { background: #fef2f2; color: #7f1d1d; }

.result-action-btn {
  width: 100%; padding: 13px;
  border: none; border-radius: 0 0 13px 13px;
  font-family: var(--display); font-size: 1rem;
  cursor: pointer; transition: opacity .15s;
}
.result-action-btn:hover { opacity: 0.88; }
.q-result.is-right .result-action-btn { background: #16a34a; color: #fff; }
.q-result.is-wrong .result-action-btn { background: #dc2626; color: #fff; }


/* ═══════════════════════════════════════════════════════════
   WIN SCREEN
═══════════════════════════════════════════════════════════ */
.win-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #052e16, #14532d);
  padding: 20px;
}
.win-card {
  background: #fff; border-radius: 28px;
  padding: 36px 32px; max-width: 440px; width: 100%;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  animation: popBubble .5s cubic-bezier(.34,1.56,.64,1);
}
.win-pip { font-size: 5rem; margin-bottom: 8px; animation: winBounce .6s ease; line-height: 1; }
@keyframes winBounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.3) rotate(12deg)} 65%{transform:scale(0.92)} }
.win-headline { font-family: var(--display); font-size: 2.2rem; color: #15803d; margin-bottom: 6px; }
.win-stars { font-size: 2.5rem; letter-spacing: 4px; margin-bottom: 10px; animation: winBounce .6s .15s ease; }
.win-sub { font-size: 1.05rem; font-weight: 800; color: #374151; margin-bottom: 14px; }
.win-fact {
  background: #f0fdf4; border: 2px solid #86efac;
  border-radius: 14px; padding: 14px 16px;
  font-size: 0.9rem; font-weight: 700; color: #166534;
  line-height: 1.55; margin-bottom: 20px; text-align: left;
}
.win-buttons { display: flex; flex-direction: column; gap: 8px; }
.win-btn-main {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff; border: none; border-radius: 16px;
  padding: 15px; font-family: var(--display); font-size: 1.1rem;
  cursor: pointer; transition: transform .15s;
}
.win-btn-main:hover { transform: scale(1.04); }


/* ═══════════════════════════════════════════════════════════
   TEACHER MODAL
═══════════════════════════════════════════════════════════ */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 900; padding: 20px;
}
.modal-bg.hidden { display: none !important; }
.modal-card {
  background: #fffbeb; border: 3px solid var(--gold);
  border-radius: 24px; padding: 24px;
  max-width: 540px; width: 100%;
  max-height: 82vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.modal-x {
  position: absolute; top: 14px; right: 14px;
  background: #f3f4f6; border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 1rem; font-weight: 900;
  cursor: pointer; color: #6b7280;
  display: flex; align-items: center; justify-content: center;
}
.modal-x:hover { background: #e5e7eb; }
.modal-title { font-family: var(--display); font-size: 1.25rem; color: #78350f; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #fde68a; }
.modal-hint { font-size: 0.9rem; font-weight: 700; color: #78350f; }

.tc-block { margin-bottom: 16px; }
.tc-lbl { font-size: 0.67rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #d97706; margin-bottom: 5px; }
.tc-txt {
  font-size: 0.88rem; font-weight: 700; color: #1c1917; line-height: 1.68;
  background: #fff; border: 2px solid #fde68a; border-radius: 12px; padding: 12px 14px;
}
.tc-txt b { color: var(--purple); }
.tc-board {
  background: #f0fdf4; border: 2px dashed #6ee7b7;
  border-radius: 10px; padding: 10px 14px;
  font-size: 0.88rem; font-weight: 800; color: #064e3b;
  font-family: 'Courier New', monospace;
}


/* ═══════════════════════════════════════════════════════════
   CONFETTI
═══════════════════════════════════════════════════════════ */
#confetti-box { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.cp { position:absolute; top:-20px; animation:fall linear forwards; border-radius:3px; }
@keyframes fall { to { transform:translateY(110vh) rotate(900deg); opacity:0; } }


/* ═══════════════════════════════════════════════════════════
   TAB NAVIGATION
═══════════════════════════════════════════════════════════ */
.tab-nav {
  display:flex; flex-shrink:0; background:#1e1b4b;
  border-bottom:3px solid rgba(255,255,255,.1);
}
.tab-btn {
  font-family:var(--font); font-size:.85rem; font-weight:800;
  padding:9px 26px; border:none; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.5);
  border-bottom:3px solid transparent; transition:all .2s;
  letter-spacing:.04em;
}
.tab-btn.active { color:#fff; border-bottom-color:#f59e0b; }
.tab-btn:hover:not(.active) { color:rgba(255,255,255,.85); background:rgba(255,255,255,.07); }

/* purple top-bar button */
.tbtn.purple { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.tbtn.purple:hover { background:linear-gradient(135deg,#6d28d9,#5b21b6); }


/* ═══════════════════════════════════════════════════════════
   PLAYGROUND TAB
═══════════════════════════════════════════════════════════ */
.playground-body {
  flex:1; overflow:hidden; display:flex; flex-direction:column;
  background:#0f172a;
}
.playground-wrap {
  flex:1; display:flex; overflow:hidden; padding:14px; gap:14px;
}
.playground-sidebar {
  width:196px; flex-shrink:0; display:flex; flex-direction:column;
  gap:7px; overflow-y:auto;
}
.play-pip { font-size:2.8rem; text-align:center; animation:snakeBob 3s ease-in-out infinite; }
.play-title { font-family:var(--font); font-size:1rem; font-weight:900; color:#f1f5f9; text-align:center; }
.play-subtitle { font-size:.72rem; color:#94a3b8; text-align:center; font-weight:700; }
.examples-label { font-size:.72rem; font-weight:900; color:#fbbf24; margin-top:4px; letter-spacing:.04em; }
.example-btn {
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12);
  border-radius:10px; padding:7px 10px; cursor:pointer;
  font-family:var(--font); font-size:.72rem; font-weight:800;
  color:#cbd5e1; text-align:left; transition:all .15s;
}
.example-btn:hover { background:rgba(99,102,241,.3); border-color:#818cf8; color:#fff; }
.play-tip { font-size:.67rem; color:#64748b; line-height:1.5; margin-top:auto; }

.playground-main {
  flex:1; display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; border:2px solid rgba(255,255,255,.1);
}
.editor-bar {
  background:#1e293b; padding:8px 14px;
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  border-bottom:2px solid rgba(255,255,255,.07);
}
.editor-label { font-size:.75rem; font-weight:800; color:#94a3b8; font-family:var(--font); }
.editor-btns  { display:flex; gap:8px; }
.run-btn {
  background:#10b981; border:none; border-radius:8px;
  padding:5px 16px; cursor:pointer; color:#fff;
  font-family:var(--font); font-size:.78rem; font-weight:900;
  transition:background .15s;
}
.run-btn:hover { background:#059669; }
.clr-btn {
  background:rgba(239,68,68,.15); border:1.5px solid rgba(239,68,68,.3);
  border-radius:8px; padding:5px 10px; cursor:pointer;
  font-family:var(--font); font-size:.75rem; font-weight:800;
  color:#fca5a5; transition:all .15s;
}
.clr-btn:hover { background:rgba(239,68,68,.3); }
.code-editor {
  flex:1; padding:14px; resize:none; outline:none; border:none;
  background:#0f172a; color:#a5f3fc;
  font-family:'Courier New',monospace; font-size:.9rem; line-height:1.6;
  tab-size:4; min-height:160px;
}
.output-bar {
  background:#1e293b; padding:6px 14px; flex-shrink:0;
  font-size:.72rem; font-weight:800; color:#94a3b8; font-family:var(--font);
  border-top:2px solid rgba(255,255,255,.07); border-bottom:2px solid rgba(255,255,255,.07);
}
.code-output {
  background:#020617; color:#86efac;
  font-family:'Courier New',monospace; font-size:.88rem; line-height:1.6;
  padding:12px 14px; min-height:80px; max-height:200px;
  overflow-y:auto; white-space:pre-wrap; flex-shrink:0;
}
.code-output.has-error { color:#fca5a5; }


/* ═══════════════════════════════════════════════════════════
   STREAK BADGE
═══════════════════════════════════════════════════════════ */
.streak-badge {
  background:linear-gradient(135deg,#f97316,#ef4444);
  border-radius:999px; padding:3px 10px;
  font-family:var(--font); font-size:.78rem; font-weight:900;
  color:#fff; white-space:nowrap;
  animation:streakPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes streakPop { from{transform:scale(0)} to{transform:scale(1)} }


/* ═══════════════════════════════════════════════════════════
   FILL-IN-THE-BLANK QUESTION TYPE
═══════════════════════════════════════════════════════════ */
.fill-input-row { display:flex; gap:8px; align-items:center; }
.fill-inp {
  flex:1; padding:10px 14px; border-radius:10px;
  border:2px solid #6366f1; outline:none;
  font-family:var(--font); font-size:1rem; font-weight:800;
  background:#f8f7ff; color:#1e1b4b; transition:border-color .15s;
}
.fill-inp:focus { border-color:#4f46e5; box-shadow:0 0 0 3px rgba(99,102,241,.2); }
.fill-inp:disabled { background:#f1f5f9; color:#94a3b8; }
.fill-check-btn {
  background:#4f46e5; border:none; border-radius:10px;
  padding:10px 18px; cursor:pointer; color:#fff;
  font-family:var(--font); font-size:.85rem; font-weight:900;
  transition:background .15s; white-space:nowrap;
}
.fill-check-btn:hover { background:#4338ca; }
.fill-check-btn:disabled { background:#94a3b8; cursor:not-allowed; }
.fill-check-btn.ready  { background:#10b981; }
.fill-check-btn.ready:hover { background:#059669; }

/* blank highlight inside q-code for fill questions */
.fill-blank { color:#f59e0b; font-style:italic; font-weight:900; }


/* ═══════════════════════════════════════════════════════════
   ORDER / DRAG QUESTION TYPE
═══════════════════════════════════════════════════════════ */
.order-wrap   { display:flex; flex-direction:column; gap:8px; }
.order-build {
  min-height:54px; background:#f0fdf4;
  border:2px dashed #86efac; border-radius:12px;
  padding:8px 10px; display:flex; flex-direction:column; gap:5px;
}
.order-hint { color:#4ade80; font-size:.76rem; font-weight:800; text-align:center; padding:8px 0; }
.build-line {
  display:flex; align-items:center; gap:8px;
  background:#dcfce7; border-radius:8px; padding:5px 10px;
  animation:slideIn .2s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.build-num {
  background:#22c55e; color:#fff; width:20px; height:20px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:900; flex-shrink:0;
}
.build-line code { font-family:'Courier New',monospace; font-size:.8rem; color:#15803d; }
.order-source { display:flex; flex-direction:column; gap:6px; }
.order-tile {
  background:#eff6ff; border:2px solid #bfdbfe;
  border-radius:10px; padding:7px 12px; cursor:pointer;
  transition:all .15s; display:flex; align-items:center;
}
.order-tile:hover { background:#dbeafe; border-color:#93c5fd; transform:translateX(4px); }
.order-tile.selected { opacity:.3; cursor:not-allowed; transform:none !important; }
.order-tile-code { font-family:'Courier New',monospace; font-size:.8rem; color:#1e40af; }


/* ═══════════════════════════════════════════════════════════
   CHEAT SHEET MODAL
═══════════════════════════════════════════════════════════ */
.cheat-card { max-width:720px; width:95vw; max-height:85vh; overflow-y:auto; }
.cheat-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.cheat-actions { display:flex; gap:8px; align-items:center; }
.cheat-print-btn {
  background:#4f46e5; border:none; border-radius:8px;
  padding:6px 14px; cursor:pointer; color:#fff;
  font-family:var(--font); font-size:.78rem; font-weight:900;
}
.cheat-section { margin-bottom:18px; }
.cheat-section-title {
  font-family:var(--font); font-size:.8rem; font-weight:900;
  color:#6d28d9; text-transform:uppercase; letter-spacing:.08em;
  border-bottom:2px solid #ede9fe; padding-bottom:4px; margin-bottom:10px;
}
.cheat-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cheat-item {
  background:#f8fafc; border-radius:10px; padding:10px 12px;
  border-left:4px solid #6366f1;
}
.cheat-item-title { font-size:.76rem; font-weight:900; color:#1e293b; margin-bottom:3px; }
.cheat-item-code {
  font-family:'Courier New',monospace; font-size:.76rem;
  color:#4c1d95; background:#ede9fe;
  padding:2px 6px; border-radius:4px; display:block; margin-bottom:4px;
  white-space:pre;
}
.cheat-item-desc { font-size:.7rem; color:#64748b; font-weight:700; }
.cheat-bugs {
  background:#fff7ed; border-radius:10px;
  padding:10px 12px; border-left:4px solid #f97316;
}
.cheat-bug-title { font-size:.78rem; font-weight:900; color:#c2410c; margin-bottom:6px; }
.cheat-bug-row { display:flex; gap:7px; align-items:center; margin-top:5px; flex-wrap:wrap; }
.cheat-bug-wrong { font-family:'Courier New',monospace; font-size:.74rem; color:#ef4444; text-decoration:line-through; }
.cheat-bug-right { font-family:'Courier New',monospace; font-size:.74rem; color:#16a34a; font-weight:900; }
.cheat-bug-label { font-size:.67rem; color:#64748b; }


/* ═══════════════════════════════════════════════════════════
   PROJECT & DEBUG LEVEL CARDS
═══════════════════════════════════════════════════════════ */
.lv-card.project { background:linear-gradient(135deg,#ecfdf5,#d1fae5); }
.lv-card.project .lv-num { color:#059669; }
.lv-card.debug   { background:linear-gradient(135deg,#fff7ed,#fed7aa); }
.lv-card.debug   .lv-num { color:#dc2626; }


/* ═══════════════════════════════════════════════════════════
   PRINT STYLES (cheat sheet)
═══════════════════════════════════════════════════════════ */
@media print {
  body > *:not(#cheat-modal) { display:none !important; }
  #cheat-modal { display:block !important; position:static !important; background:#fff !important; }
  .modal-card  { box-shadow:none !important; max-height:none !important; overflow:visible !important; }
  .cheat-print-btn,.modal-x,.cheat-actions { display:none !important; }
}