:root {
  --background: 225 45% 97%;
  --foreground: 230 35% 11%;
  --primary: 262 88% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 176 72% 43%;
  --secondary-foreground: 0 0% 100%;
  --muted: 230 24% 90%;
  --muted-foreground: 229 13% 42%;
  --destructive: 355 82% 58%;
  --border: 230 25% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(262 88% 58% / 0.12);
  --shadow-md: 0 18px 45px hsl(230 45% 20% / 0.13);
  --shadow-lg: 0 24px 70px hsl(230 45% 20% / 0.16);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 230 38% 8%;
  --foreground: 220 38% 96%;
  --primary: 267 95% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 88% 46%;
  --secondary-foreground: 220 40% 6%;
  --muted: 231 25% 17%;
  --muted-foreground: 225 18% 72%;
  --destructive: 355 88% 66%;
  --border: 231 23% 24%;
  --card: 231 34% 12%;
  --shadow-sm: 0 8px 24px hsl(267 95% 68% / 0.13);
  --shadow-md: 0 20px 48px hsl(0 0% 0% / 0.26);
  --shadow-lg: 0 30px 80px hsl(0 0% 0% / 0.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); }
button, textarea { font: inherit; }
button { min-height: 44px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .65; }
button:focus-visible, textarea:focus-visible { outline: 3px solid hsl(var(--primary) / .55); outline-offset: 2px; }

.orb { position: fixed; z-index: 0; width: 320px; height: 320px; border-radius: 999px; filter: blur(42px); opacity: .26; pointer-events: none; animation: float 8s ease-in-out infinite; }
.orb-one { left: -120px; top: 70px; background: hsl(var(--primary)); }
.orb-two { right: -110px; bottom: 20px; background: hsl(var(--secondary)); animation-delay: -3s; }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.05); } }

.stat-pill, .pill { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .62); border-radius: 999px; padding: .55rem .75rem; font-size: .82rem; color: hsl(var(--foreground)); }
.pill { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-weight: 800; border-color: hsl(var(--primary) / .22); }
.pill.alt { background: hsl(var(--secondary) / .12); color: hsl(var(--secondary)); border-color: hsl(var(--secondary) / .22); }
.pill.xp { background: hsl(45 95% 55% / .14); color: hsl(38 90% 45%); border-color: hsl(45 95% 55% / .25); }

.btn-primary, .btn-secondary, .btn-ghost { border: 0; border-radius: 16px; padding: .78rem 1rem; font-weight: 900; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.btn-primary { color: hsl(var(--primary-foreground)); background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: var(--shadow-sm); }
.btn-secondary { color: hsl(var(--foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); }
.btn-ghost { color: hsl(var(--foreground)); background: hsl(var(--muted) / .65); border: 1px solid hsl(var(--border)); padding: .58rem .78rem; }
.btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .level-dot:active { transform: scale(.97); }
.locked-btn { filter: grayscale(.35); }

.progress-fill { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(45 95% 58%)); transition: width var(--transition-smooth); }
.world-scroll { scroll-snap-type: x mandatory; scroll-padding: .75rem; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.level-dot { width: 38px; height: 38px; min-height: 38px; border-radius: 15px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground)); font-weight: 900; transition: all var(--transition-fast); }
.level-dot:hover:not(:disabled) { transform: translateY(-3px) rotate(-2deg); }
.level-dot.active { background: hsl(var(--primary)); color: white; box-shadow: 0 0 0 4px hsl(var(--primary) / .18); }
.level-dot.complete { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.level-dot.locked { filter: grayscale(1); }

.lesson-card { animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.content-block { border: 1px solid hsl(var(--border)); background: hsl(var(--background) / .45); border-radius: var(--radius-md); padding: 1rem; }
.content-block h3 { margin: 0 0 .45rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); font-weight: 950; }
.content-block p { margin: 0; line-height: 1.65; color: hsl(var(--foreground)); }
.challenge-block { border-color: hsl(var(--primary) / .35); background: hsl(var(--primary) / .09); }
.code-sample, .answer-box { margin: 0; white-space: pre-wrap; overflow: auto; border-radius: 16px; padding: 1rem; background: hsl(230 35% 8%); color: hsl(150 90% 78%); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .9rem; }
.hint-box { border-radius: 18px; border: 1px solid hsl(45 95% 55% / .35); background: hsl(45 95% 55% / .12); color: hsl(var(--foreground)); padding: 1rem; }
.completion-medal { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 20px; background: hsl(var(--muted)); font-size: 1.5rem; transition: transform var(--transition-smooth); }
.completion-medal.earned { background: hsl(45 95% 55% / .18); animation: pop .7s ease both; }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.editor-shell { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(230 35% 8%); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .05); }
.editor-top { display: flex; align-items: center; height: 38px; padding: 0 .9rem; color: hsl(220 18% 72%); background: hsl(230 32% 11%); border-bottom: 1px solid hsl(230 20% 20%); }
.dot { width: 11px; height: 11px; border-radius: 999px; margin-right: 7px; }
.dot.red { background: hsl(0 82% 64%); } .dot.yellow { background: hsl(45 95% 58%); } .dot.green { background: hsl(145 70% 48%); }
.code-editor { width: 100%; min-height: 380px; resize: vertical; border: 0; outline: 0; padding: 1rem; background: hsl(230 35% 8%); color: hsl(220 35% 96%); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 14px; line-height: 1.6; tab-size: 4; }
.console-box { min-height: 150px; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: hsl(var(--background) / .55); padding: 1rem; overflow: auto; }
.console-title { margin-bottom: .55rem; font-size: .78rem; font-weight: 950; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .12em; }
.console-box pre { margin: 0; white-space: pre-wrap; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .9rem; }
.console-box.expected { background: hsl(var(--secondary) / .08); border-color: hsl(var(--secondary) / .25); }
.result-banner { margin-top: 1rem; border-radius: 18px; padding: .9rem 1rem; font-weight: 850; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); }
.result-banner.success { border-color: hsl(var(--secondary) / .35); background: hsl(var(--secondary) / .14); color: hsl(var(--secondary)); }
.result-banner.error { border-color: hsl(var(--destructive) / .35); background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.result-banner.running { border-color: hsl(var(--primary) / .35); background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }

.toast { position: fixed; z-index: 50; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: .8rem; width: calc(100% - 28px); max-width: 520px; border: 1px solid hsl(var(--border)); border-radius: 22px; background: hsl(var(--card)); color: hsl(var(--foreground)); padding: 1rem; box-shadow: var(--shadow-lg); animation: toastIn .28s ease both; }
.toast.success { border-color: hsl(var(--secondary) / .4); } .toast.error { border-color: hsl(var(--destructive) / .4); } .toast.warn { border-color: hsl(45 95% 55% / .45); }
.toast-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 14px; background: hsl(var(--muted)); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.loader-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 999px; background: hsl(var(--primary)); animation: pulse 1s ease infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }

@media (max-width: 768px) {
  :root { --radius-lg: 22px; --radius-md: 16px; }
  .orb { width: 220px; height: 220px; filter: blur(36px); opacity: .18; }
  .stat-pill { justify-content: flex-start; min-height: 44px; padding: .58rem .68rem; }
  .content-block { padding: .88rem; }
  .console-box { min-height: 120px; }
}

@media (max-width: 640px) {
  .code-editor { min-height: 46vh; max-height: 62vh; font-size: 16px; resize: vertical; }
  .btn-primary, .btn-secondary, .btn-ghost { width: 100%; padding: .76rem .82rem; }
  .level-dot { width: 44px; height: 44px; min-height: 44px; border-radius: 16px; }
  .code-sample, .answer-box, .console-box pre { font-size: .82rem; }
  .toast { align-items: flex-start; width: calc(100% - 20px); padding: .85rem; }
}

@media (max-width: 380px) {
  .stat-pill, .pill { font-size: .76rem; padding: .5rem .58rem; }
  .code-editor { min-height: 42vh; padding: .85rem; }
}