/* Shriftlar internetdan (@import) emas, lokal fayllardan yuklanadi — Blockly kabi
   internetsiz (oflayn) sinf kompyuterlarida ham sahifa tezda va to'liq ishlashi uchun. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500;font-display:swap;src:url('../js/vendor/fonts/Baloo2-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('../js/vendor/fonts/Baloo2-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('../js/vendor/fonts/Baloo2-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500;font-display:swap;src:url('../js/vendor/fonts/Baloo2-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02CC,U+02CE-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('../js/vendor/fonts/Baloo2-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02CC,U+02CE-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('../js/vendor/fonts/Baloo2-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02CC,U+02CE-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url('../js/vendor/fonts/Nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../js/vendor/fonts/Nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../js/vendor/fonts/Nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url('../js/vendor/fonts/Nunito-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02CC,U+02CE-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../js/vendor/fonts/Nunito-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02CC,U+02CE-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../js/vendor/fonts/Nunito-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02CC,U+02CE-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0;}

:root{
  --bg-deep:#1B1035;
  --bg-panel:#251A47;
  --bg-panel-light:#31245C;
  --ink:#F4EFFF;
  --ink-dim:#B9A9E8;
  --fwd:#4ADE80;
  --left:#38BDF8;
  --right:#FB923C;
  --loop:#C084FC;
  --ifw:#2DD4BF;
  --lab:#E879F9;
  --run:#FF6B6B;
  --run-dark:#E03E3E;
  --gold:#FFD166;
  --wall:#463270;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,209,102,0.12), transparent 40%),
    radial-gradient(circle at 85% 92%, rgba(56,189,248,0.14), transparent 45%),
    var(--bg-deep);
  font-family:'Nunito', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  color:var(--ink);
  padding:20px 14px 40px;
}

.wrap{ width:100%; max-width:460px; margin:0 auto; position:relative; }

.test-mode-btn{
  position:absolute; top:0; right:0; z-index:5;
  border:none; background:var(--bg-panel-light); color:var(--ink);
  width:34px; height:34px; border-radius:10px; font-size:1rem; cursor:pointer;
}
.test-mode-btn.unlocked{ background:var(--fwd); color:#1B1035; }

.reset-progress-btn{
  position:absolute; top:0; left:0; z-index:5;
  border:none; background:var(--bg-panel-light); color:var(--ink);
  width:34px; height:34px; border-radius:10px; font-size:1rem; cursor:pointer;
}

.layout{ display:block; }
.code-col-label{ font-family:'Baloo 2', sans-serif; font-weight:800; color:var(--ink-dim); margin:18px 0 4px; font-size:0.95rem; }

@media (min-width:900px){
  .wrap{ max-width:1180px; }
  header{ text-align:left; }
  .layout{
    display:grid; grid-template-columns: minmax(480px, 1fr) 420px;
    gap:26px; align-items:start;
  }
  .stage-col, .code-col{ min-width:0; }
  .stage-col{ order:2; }
  .code-col{ order:1; position:sticky; top:20px; }
  .code-col-label{ margin-top:0; }
  #blocklyDiv{ height:780px; }
}

@media (min-width:1300px){
  .wrap{ max-width:1620px; }
  #blocklyDiv{ height:860px; }
}

header{ text-align:center; margin-bottom:14px; }
h1{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.5rem; margin:0 0 6px; }
.subtitle{ color:var(--ink-dim); font-size:0.92rem; margin:0; }

.hud-bar{ display:flex; gap:8px; margin-bottom:10px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:0.9rem; }
.hud-item{
  flex:1; min-width:0; background:var(--bg-panel); border-radius:12px; padding:6px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border:2px solid rgba(255,255,255,0.06);
}
#batteryText.low{ color:var(--run); }
#batteryText.mid{ color:var(--gold); }
#batteryText.ok{ color:var(--fwd); }
#coinsText{ color:var(--gold); }

.cell.coin, .cell.battery{
  position:absolute; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; z-index:2;
  animation:floatItem 1.6s ease-in-out infinite;
}
.cell.battery{ background:transparent !important; }
@keyframes floatItem{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* Tanga (coin) belgisi emoji shriftiga bog'liq bo'lmasligi uchun to'liq CSS orqali chiziladi —
   ba'zi brauzerlarda 🪙 belgisi (yangi Unicode) "tofu" bo'lib ko'rinishining oldini oladi. */
.cell.coin-icon{
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%, #FFF6D8, var(--gold) 55%, #C99A2E 100%) !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.35), inset 0 -2px 3px rgba(0,0,0,0.25);
}

.tabs{ display:flex; gap:6px; margin-bottom:14px; }
.tab{
  flex:1; min-width:0; border:none; border-radius:14px; padding:8px 2px;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:0.75rem;
  color:var(--ink-dim); background:var(--bg-panel);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; border:2px solid transparent;
  text-align:center; overflow-wrap:anywhere;
}
.tab .ic{ font-size:1.15rem; }
.tab .tab-label{ display:block; width:100%; text-align:center; overflow-wrap:anywhere; line-height:1.15; }
.tab.active{ color:#1B1035; }
.tab.active.linear{ background:var(--fwd); }
.tab.active.loop{ background:var(--loop); }
.tab.active.branch{ background:var(--ifw); }
.tab.active.lab{ background:var(--lab); }

.level-bar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0 0 8px; font-family:'Baloo 2', sans-serif;
}
.nav-arrow{
  border:none; background:var(--bg-panel-light); color:var(--ink);
  width:34px; height:34px; border-radius:10px; font-size:1rem; cursor:pointer; flex:0 0 auto;
}
.nav-arrow:disabled{ opacity:0.3; cursor:not-allowed; }
.level-pill{
  flex:1; min-width:0; text-align:center; background:var(--bg-panel-light); border-radius:999px;
  padding:6px 10px; font-weight:700; font-size:0.85rem; border:2px solid rgba(255,255,255,0.06);
}
.stars{ font-size:1rem; letter-spacing:2px; flex:0 0 auto; }

.hint{
  background:var(--bg-panel); border-left:4px solid var(--gold); border-radius:10px;
  padding:10px 14px; font-size:0.9rem; line-height:1.4; margin-bottom:16px;
}

.screen{
  background:linear-gradient(160deg,#12092A,#1E1240);
  border-radius:24px; padding:18px; border:3px solid #3A2A66;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.03), 0 18px 40px -18px rgba(0,0,0,0.6);
  display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden;
  min-height:240px;
}
.screen.shake{ animation:shake 0.45s; }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-8px); } 40%,60%{ transform:translateX(8px); }
}

.maze{ position:relative; display:grid; gap:3px; }
.cell{ border-radius:7px; background:rgba(255,255,255,0.04); }
.cell.wall{ background:var(--wall); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.06); }
.cell.tile-red{ background:rgba(239,68,68,0.32); box-shadow: inset 0 0 0 2px rgba(239,68,68,0.55); }
.cell.tile-blue{ background:rgba(56,189,248,0.32); box-shadow: inset 0 0 0 2px rgba(56,189,248,0.55); }
.cell.goal{
  background:rgba(255,209,102,0.12); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; animation:pulseGoal 1.8s ease-in-out infinite;
}
@keyframes pulseGoal{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.12); filter:brightness(1.25); } }

.robot{ position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;
  transition: left 0.36s cubic-bezier(.4,1.4,.6,1), top 0.36s cubic-bezier(.4,1.4,.6,1); }
.robot-inner{
  width:78%; height:78%; background:linear-gradient(160deg,#FFE9A8,var(--gold)); border-radius:10px;
  position:relative; transition:transform 0.22s ease; box-shadow:0 3px 0 rgba(0,0,0,0.2);
}
.robot-inner::before{
  content:""; position:absolute; top:-28%; left:50%; width:10%; height:26%;
  background:#7A5AF8; border-radius:2px; transform:translateX(-50%);
}
.robot-eyes{ position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); display:flex; gap:14%; }
.robot-eyes span{ width:16%; aspect-ratio:1; background:#2A1B4D; border-radius:50%; display:block; }

/* Lab Interactive UI */
#labScreen{
  display:none; width:100%; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; font-family:'Baloo 2',sans-serif; text-align:center;
}
.conveyor-box{
  width:100%; background:var(--bg-panel); border-radius:18px; padding:16px 12px;
  border:2px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:12px;
}
.belt{
  display:flex; justify-content:center; gap:10px; background:#12092A;
  padding:10px; border-radius:12px; border:2px dashed #463270;
}
.belt-slot{
  width:56px; height:56px; background:rgba(255,255,255,0.05); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  border:1px solid rgba(255,255,255,0.1); transition:all 0.3s;
}
.belt-slot.active{
  border-color:var(--gold); box-shadow:0 0 10px rgba(255,209,102,0.4);
  background:rgba(255,209,102,0.1);
}
.bins{ display:flex; justify-content:space-around; width:100%; font-size:0.9rem; }
.bin-item{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.bin-item .ic{ font-size:2rem; }

#blocklyDiv{
  width:100%; height:520px; border-radius:14px; overflow:hidden;
  border:2px solid var(--bg-panel-light); margin-top:8px;
}

/* Blockly'ning o'z kategoriya ro'yxati (Harakat, Boshqaruv, Sezish...) — standart matn
   rangi och fonga nisbatan juda xira edi, o'qish qiyin bo'lardi. */
.blocklyToolboxCategoryLabel{
  color:#1B1035 !important;
  fill:#1B1035 !important;
  font-family:'Baloo 2', sans-serif !important;
  font-weight:700 !important;
  font-size:0.95rem !important;
}
.blocklyToolboxCategoryContainer{ padding:4px 2px !important; }

.util-row{ margin-top:10px; display:flex; gap:10px; }
.util-btn{ flex:1; border:2px solid var(--bg-panel-light); background:transparent; color:var(--ink-dim); border-radius:12px; padding:9px; font-family:'Nunito',sans-serif; font-weight:700; font-size:0.85rem; cursor:pointer; }
.util-btn:active{ background:var(--bg-panel-light); }

.run-btn{
  margin-top:14px; width:100%; border:none; border-radius:18px; padding:16px;
  font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.15rem; color:#fff;
  background:linear-gradient(150deg,var(--run),var(--run-dark)); box-shadow:0 6px 0 #A02525; cursor:pointer;
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.run-btn:active{ transform:translateY(5px); box-shadow:0 1px 0 #A02525; }
.run-btn:disabled{ opacity:0.5; cursor:not-allowed; }

.status{ margin-top:12px; text-align:center; font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1rem; min-height:1.4em; }
.status.win{ color:var(--fwd); }
.status.fail{ color:var(--run); }

.next-btn{
  display:none; margin:10px auto 0; border:none; border-radius:14px; padding:12px 22px;
  font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1rem; color:#1B1035;
  background:var(--gold); box-shadow:0 5px 0 #C99A2E; cursor:pointer;
}

.teacher-toggle{ display:block; margin:22px auto 0; background:none; border:none; color:var(--ink-dim); font-size:0.82rem; text-decoration:underline; cursor:pointer; }
.teacher-note{ display:none; margin-top:10px; background:var(--bg-panel); border-radius:12px; padding:12px 14px; font-size:0.82rem; line-height:1.5; color:var(--ink-dim); }
.teacher-note strong{ color:var(--ink); }

.confetti-piece{ position:fixed; top:-10px; width:8px; height:14px; z-index:50; pointer-events:none; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(540deg); opacity:0.3; } }

@media (max-width:360px){ h1{ font-size:1.25rem; } .run-btn{ font-size:1rem; } .tab{ font-size:0.68rem; } }

.tab.locked{ opacity:0.45; cursor:not-allowed; filter:grayscale(1); }

.tab{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.tab-progress{ font-size:0.7rem; color:var(--gold); font-weight:700; opacity:0.85; }
.tab.locked .tab-progress{ display:none; }