:root{
  --bg:#0f1226;
  --panel:#181c3a;
  --panel2:#212752;
  --ink:#f3f4ff;
  --muted:#a6acd8;
  --accent:#ffcc33;
  --accent2:#4dd6ff;
  --pink:#ff6fae;
  --green:#57e389;
  --red:#ff6b6b;
  --purple:#b586ff;
  --radius:16px;
  font-family:"Comic Sans MS","Comic Sans","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(circle at 10% 0%, #232a5c 0%, var(--bg) 55%);
  color:var(--ink);
  min-height:100vh;
}

a{color:inherit;text-decoration:none;}

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  background:rgba(15,18,38,0.85);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid #2a3068;
}
.brand{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;}
.brand .logo{font-size:1.8rem;}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;}
.nav-links a{
  padding:8px 14px;border-radius:999px;font-weight:700;font-size:0.95rem;
  color:var(--muted);
}
.nav-links a:hover{background:var(--panel2);color:var(--ink);}
.nav-links a.active{background:var(--accent);color:#26260a;}

main{max-width:1100px;margin:0 auto;padding:28px 20px 80px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;border-radius:999px;padding:12px 22px;
  font-family:inherit;font-weight:800;font-size:1rem;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 0 rgba(0,0,0,0.25);
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,0.25);}
.btn-yellow{background:var(--accent);color:#3a2c00;}
.btn-blue{background:var(--accent2);color:#03263a;}
.btn-green{background:var(--green);color:#03321a;}
.btn-pink{background:var(--pink);color:#3a0420;}
.btn-purple{background:var(--purple);color:#210448;}
.btn-outline{background:transparent;color:var(--ink);border:2px solid #3a4088;box-shadow:none;}
.btn-outline:active{transform:none;}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:0 6px 0 rgba(0,0,0,0.25);}
.btn-sm{padding:8px 14px;font-size:0.85rem;box-shadow:0 4px 0 rgba(0,0,0,.25);}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:var(--radius);
  border:1px solid #2a3068;
  padding:22px;
}

.hero{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  padding:40px 0 20px;
}
.hero h1{font-size:2.6rem;margin:0 0 12px;line-height:1.15;}
.hero p{color:var(--muted);font-size:1.15rem;max-width:520px;}
.hero-emoji{font-size:7rem;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));}

.path{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:26px;}
.path-card{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  padding:20px;border-radius:var(--radius);
  background:var(--panel);border:1px solid #2a3068;
  transition:transform .15s ease, border-color .15s ease;
}
.path-card:hover{transform:translateY(-4px);border-color:var(--accent2);}
.path-card .step{font-size:.8rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;}
.path-card .icon{font-size:2.4rem;}
.path-card h3{margin:0;font-size:1.2rem;}
.path-card p{margin:0;color:var(--muted);font-size:.92rem;}
.locked{opacity:.45;filter:grayscale(60%);pointer-events:none;}
.lock-note{color:var(--red);font-size:.8rem;margin:0;}

section.section{margin-top:46px;}
section.section h2{font-size:1.6rem;margin-bottom:6px;}
section.section .sub{color:var(--muted);margin-bottom:18px;}

/* ---------- Learn / Maze page ---------- */
.learn-layout{display:grid;grid-template-columns:280px 1fr 280px;gap:18px;align-items:start;}
@media (max-width:980px){.learn-layout{grid-template-columns:1fr;}}

.panel-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin:0 0 10px;}

.palette{display:flex;flex-direction:column;gap:8px;}
.pal-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.92rem;color:#111;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.pal-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25);}
.pal-move{background:var(--accent2);}
.pal-turn{background:var(--purple);color:#fff;}
.pal-repeat{background:var(--accent);}
.pal-if{background:var(--pink);color:#fff;}
.pal-say{background:var(--green);}

.program{
  min-height:120px;display:flex;flex-direction:column;gap:6px;
  background:#0c0e22;border-radius:12px;padding:12px;border:2px dashed #333a78;
}
.prog-placeholder{color:var(--muted);font-size:.85rem;padding:4px 2px;}
.prog-block{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;border-radius:10px;font-weight:700;font-size:.88rem;color:#111;
  cursor:grab;
}
.prog-block .blk-label{flex:1;}
.prog-block .handle{cursor:grab;opacity:.55;font-size:1rem;letter-spacing:-2px;}
.prog-block.dragging{opacity:.4;}
.prog-block.static-bar{cursor:default;opacity:.85;font-size:.8rem;justify-content:center;}
.blk-ctrls{display:flex;gap:3px;opacity:0;transition:opacity .12s;}
.prog-block:hover .blk-ctrls{opacity:1;}
.prog-block .rm{
  background:rgba(0,0,0,.22);border:none;border-radius:7px;
  padding:1px 6px;cursor:pointer;color:inherit;font-weight:900;font-size:.72rem;line-height:1.4;
}
.prog-block .rm:hover{background:rgba(0,0,0,.42);}
.prog-block.running{outline:3px solid #fff;}
.inline-num{
  width:46px;border:none;border-radius:6px;padding:2px 4px;
  font-family:inherit;font-weight:800;font-size:.82rem;
}

/* nesting + drop targets */
.nest{
  margin-left:16px;padding-left:10px;
  border-left:3px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;gap:4px;
}
.dropzone{height:8px;border-radius:6px;transition:background .12s, height .12s;}
.dropzone.over{background:var(--accent);height:20px;}
.dropzone.active-slot{background:repeating-linear-gradient(90deg,var(--accent2) 0 6px,transparent 6px 12px);height:6px;}
.empty-slot{
  color:var(--muted);font-size:.75rem;font-style:italic;
  padding:6px 8px;border:2px dashed #3a4088;border-radius:8px;cursor:pointer;
}
.empty-slot:hover{border-color:var(--accent2);color:var(--ink);}

.stage-wrap{display:flex;flex-direction:column;gap:14px;align-items:center;}
#maze-canvas{background:#0c0e22;border-radius:14px;border:1px solid #2a3068;}
.stage-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.status-line{font-weight:700;color:var(--accent2);min-height:1.4em;text-align:center;}
.level-select{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.level-select button{
  width:34px;height:34px;border-radius:10px;border:none;font-weight:800;cursor:pointer;
  background:var(--panel2);color:var(--muted);
}
.level-select button.active{background:var(--accent);color:#3a2c00;}
.level-select button.done{background:var(--green);color:#03321a;}

.flowchart{display:flex;flex-direction:column;align-items:center;gap:4px;max-height:640px;overflow-y:auto;padding-right:4px;}
.fc-node{
  width:100%;padding:8px 10px;border-radius:10px;font-size:.78rem;font-weight:700;
  text-align:center;color:#111;background:var(--accent2);
}
.fc-node.diamond{background:var(--pink);color:#fff;border-radius:10px;}
.fc-node.loop{background:var(--accent);}
.fc-node.active{outline:3px solid #fff;}
.fc-arrow{color:var(--muted);font-size:1rem;}

.lesson-note{background:var(--panel2);border-left:4px solid var(--accent2);padding:12px 16px;border-radius:10px;font-size:.92rem;color:var(--muted);margin-bottom:16px;}
.lesson-note b{color:var(--ink);}

/* ---------- Game Lab ---------- */
.game-layout{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;}
@media (max-width:900px){.game-layout{grid-template-columns:1fr;}}
.event-block{background:var(--panel2);border-radius:12px;padding:12px;margin-bottom:10px;}
.event-block .ev-title{font-weight:800;font-size:.85rem;color:var(--accent);margin-bottom:6px;}
.event-block select, .event-block input[type=range], .event-block input[type=number]{
  width:100%;font-family:inherit;
}
.slider-row{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-top:6px;}
#game-canvas{background:linear-gradient(180deg,#0c0e22,#141838);border-radius:14px;border:1px solid #2a3068;display:block;margin:0 auto;}
.scoreboard{display:flex;gap:18px;justify-content:center;margin:12px 0;font-weight:800;}
.scoreboard span{background:var(--panel2);padding:8px 16px;border-radius:999px;}
.footer{text-align:center;color:var(--muted);padding:30px;font-size:.85rem;}