/* MABNI v51 classroom-clean repair
   Purpose: undo over-aggressive metallic/space styling, keep Kenney assets where they help,
   restore visible maze/workspace, compact vertical layout, and make focus hide/show usable. */
:root{
  --v51-blue:#004E92;
  --v51-cyan:#00B7D8;
  --v51-gold:#F6B72D;
  --v51-ink:#17324d;
  --v51-muted:#5c7188;
  --v51-line:#cfe0f3;
  --v51-card:#ffffff;
  --v51-bg:#f5fbff;
  --v51-soft:#eaf6ff;
}
html,body{height:100%;margin:0;overflow:hidden!important;background:var(--v51-bg)!important;color:var(--v51-ink)!important;}
#app{height:100dvh!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;background:linear-gradient(180deg,#f9fdff,#edf7ff)!important;}
/* Clean top area. No giant chrome spaceship button. */
.topbar{
  min-height:96px!important;
  max-height:118px!important;
  padding:8px 12px!important;
  gap:10px!important;
  background:rgba(250,253,255,.96)!important;
  border-bottom:1px solid var(--v51-line)!important;
  box-shadow:0 10px 24px rgba(24,52,90,.08)!important;
  backdrop-filter:blur(10px);
  overflow:hidden!important;
}
.brand{width:74px!important;min-width:74px!important;display:grid!important;place-items:center!important;}
.brand img{width:64px!important;height:64px!important;object-fit:contain!important;border-radius:16px!important;box-shadow:0 8px 20px rgba(0,78,146,.10)!important;}
.lesson-level-cluster{min-width:0!important;gap:6px!important;align-self:stretch!important;}
.lesson-chooser{height:42px!important;min-height:42px!important;padding:6px 16px!important;border-radius:22px!important;background:#fff!important;border:1px solid #bfd6ef!important;box-shadow:none!important;color:var(--v51-ink)!important;}
.lesson-chooser span{font-size:11px!important;letter-spacing:.12em!important;color:#667b94!important;}
.lesson-chooser strong{font-size:18px!important;color:#1d2d44!important;}
.level-row{height:48px!important;min-height:48px!important;gap:6px!important;align-items:center!important;overflow:hidden!important;}
.level-row>.small{width:42px!important;height:42px!important;min-height:42px!important;border-radius:50%!important;padding:0!important;}
.level-strip{height:48px!important;gap:6px!important;align-items:center!important;overflow:hidden!important;}
.level-chip{height:46px!important;min-width:54px!important;max-width:62px!important;border-radius:22px 22px 0 0!important;background:#f8fcff!important;border:1px solid #cfe0f3!important;box-shadow:none!important;display:grid!important;place-items:center!important;}
.level-chip .level-chip-num,.level-chip strong{font-size:20px!important;line-height:1!important;color:#1d5068!important;}
.level-chip .chip-stars,.level-chip .chip-label,.level-chip em,.level-chip small{display:none!important;}
.level-chip.active{background:#fff9df!important;border-color:#f4b63a!important;box-shadow:inset 0 3px 0 #f4b63a!important;}
.user-area{gap:8px!important;align-items:center!important;overflow:hidden!important;flex-wrap:nowrap!important;}
.user-area .secondary,.user-area .toplink,.avatar-btn{min-height:42px!important;height:42px!important;padding:8px 13px!important;border-radius:18px!important;background:#eff7ff!important;border:1px solid #c6dff8!important;box-shadow:none!important;color:#17324d!important;white-space:nowrap!important;}
.avatar-btn{width:46px!important;padding:0!important;display:grid!important;place-items:center!important;}
/* Main playground: fit without browser zoom. */
.game-shell{
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(430px,52vw) 8px minmax(460px,1fr)!important;
  gap:8px!important;
  padding:8px!important;
  background:#edf7ff!important;
}
.left-panel,.right-panel{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#fff!important;
  background-image:none!important;
  border:1px solid #cfe0f3!important;
  border-radius:22px!important;
  box-shadow:0 10px 26px rgba(24,52,90,.10)!important;
}
.left-panel{
  padding:8px!important;
  display:grid!important;
  grid-template-rows:38px minmax(0,1fr) 54px minmax(38px,auto)!important;
  gap:7px!important;
}
.right-panel{
  padding:8px!important;
  display:grid!important;
  grid-template-rows:48px minmax(0,1fr)!important;
  gap:6px!important;
}
.layout-splitter{border-radius:999px!important;background:#d9eefc!important;border:1px solid #b8dbf1!important;box-shadow:none!important;}
/* Mission row: one useful line, not five badges shouting at children. */
.mission-bar{
  min-height:0!important;height:38px!important;padding:5px 8px!important;margin:0!important;
  background:#f8fcff!important;background-image:none!important;border:1px solid #d8e8f7!important;border-radius:16px!important;
  box-shadow:none!important;display:flex!important;align-items:center!important;gap:7px!important;overflow:hidden!important;
}
.mission-chip{height:26px!important;min-height:26px!important;padding:4px 8px!important;border-radius:999px!important;background:#eef7ff!important;border:1px solid #cee4f7!important;color:#25445f!important;font-size:11px!important;font-weight:900!important;white-space:nowrap!important;box-shadow:none!important;background-image:none!important;}
#lessonGrade{max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.level-chip-title{flex:1 1 auto!important;max-width:none!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;background:#fff!important;color:#17324d!important;font-size:13px!important;}
.mission-goals{display:none!important;}
.learning-focus-card,.v49-run-hints{display:none!important;}
/* Board: no chrome frame, make the actual maze visible. */
.visualization{
  min-height:0!important;height:100%!important;max-height:none!important;overflow:hidden!important;
  background:linear-gradient(180deg,#eef9ff,#f9fdff)!important;background-image:none!important;
  border:1px solid #d7e8f7!important;border-radius:18px!important;padding:6px!important;
  display:grid!important;place-items:center!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
}
#phaserMaze{display:none!important;}
#svgMaze{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-height:220px!important;overflow:visible!important;}
.tile-frame.path{fill:rgba(255,255,255,.68)!important;stroke:#bfd6ef!important;stroke-width:1.6!important;}
.tile-frame.wall{fill:rgba(75,151,196,.42)!important;stroke:#2b7ca8!important;stroke-width:2.5!important;}
.tile-frame.trail{fill:rgba(103,232,152,.34)!important;stroke:#16a34a!important;stroke-width:3!important;}
.kenney-maze-tile-img{opacity:.88!important;}
.player-robot-sprite{filter:drop-shadow(0 7px 7px rgba(15,40,70,.28))!important;}
/* Hide legend by default: it was eating vertical space. */
.maze-legend{display:none!important;}
/* Run dock: compact, stable, never covering the maze/status. */
.run-dock{
  position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;z-index:3!important;
  height:54px!important;min-height:54px!important;margin:0!important;padding:5px!important;
  background:#f8fcff!important;background-image:none!important;border:1px solid #cfe0f3!important;border-radius:18px!important;
  box-shadow:0 8px 18px rgba(24,52,90,.08)!important;display:grid!important;
  grid-template-columns:1.35fr repeat(4,minmax(64px,.75fr))!important;gap:5px!important;align-items:center!important;
}
.run-dock button{height:44px!important;min-height:44px!important;border-radius:14px!important;padding:6px 9px!important;font-size:13px!important;font-weight:1000!important;line-height:1!important;box-shadow:none!important;white-space:nowrap!important;background-image:none!important;}
.big-run{background:linear-gradient(135deg,#24d05a,#87f19c)!important;color:#06351b!important;font-size:17px!important;letter-spacing:.02em!important;border:0!important;}
#stepBtn,#resetBtn,#clearBtn,#hintBtn{background:#eaf5ff!important;border:1px solid #c7def5!important;color:#153957!important;}
.feedback{
  min-height:38px!important;max-height:56px!important;overflow:auto!important;margin:0!important;padding:7px 10px!important;
  background:#fff!important;border:1px solid #d7e8f7!important;border-radius:15px!important;box-shadow:none!important;font-size:12px!important;line-height:1.35!important;
}
.feedback-label{font-size:10px!important;margin-right:7px!important;color:#6f3cc3!important;letter-spacing:.08em!important;text-transform:uppercase!important;}
.run-feedback-details,.v47-trace-panel{display:none!important;}
/* Blockly side: clean head and more usable vertical room. */
.workspace-head{height:48px!important;min-height:48px!important;margin:0!important;padding:6px 10px!important;border-radius:16px!important;background:#f8fcff!important;background-image:none!important;border:1px solid #d8e8f7!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;}
.workspace-head .eyebrow{font-size:11px!important;letter-spacing:.16em!important;margin:0!important;color:#596b82!important;}
.workspace-head h2{font-size:15px!important;margin:0!important;color:#17324d!important;}
.workspace-meta{gap:6px!important;align-items:center!important;}
.workspace-note{display:none!important;}
#capacityBubble{height:30px!important;min-height:30px!important;padding:4px 9px!important;border-radius:999px!important;background:#e8f8ff!important;border:1px solid #bfe6f5!important;font-size:12px!important;font-weight:900!important;white-space:nowrap!important;}
#blocklyArea{height:100%!important;min-height:0!important;border-radius:18px!important;overflow:hidden!important;background:#fff!important;border:1px solid #dbe8f6!important;}
#blocklyDiv{height:100%!important;min-height:0!important;}
.blocklyFlyoutBackground{fill:#f5fbff!important;}
.blocklyMainBackground{stroke:none!important;fill:#fff!important;}
.blocklyScrollbarHandle{fill:#4d9cc7!important;}
/* Focus pin: tiny tab, not a billboard. */
.focus-exit-btn{display:none!important;}
.focus-toggle-float{
  position:fixed!important;top:104px!important;right:14px!important;left:auto!important;bottom:auto!important;transform:none!important;z-index:10030!important;
  width:46px!important;height:34px!important;min-width:46px!important;min-height:34px!important;padding:0!important;border-radius:0 0 14px 14px!important;
  background:#ffffff!important;background-image:none!important;border:1px solid #b9d4ef!important;box-shadow:0 6px 16px rgba(24,52,90,.16)!important;
  color:#153957!important;font-size:0!important;display:grid!important;place-items:center!important;gap:0!important;overflow:hidden!important;
}
.focus-toggle-float .pin-copy{display:none!important;}.focus-toggle-float .pin-icon{font-size:16px!important;line-height:1!important;}.focus-toggle-float .pin-arrow{font-size:15px!important;line-height:1!important;margin-left:2px!important;}
body.top-collapsed .focus-toggle-float{top:8px!important;right:10px!important;border-radius:14px!important;width:58px!important;background:#fff8d6!important;border-color:#f3c35b!important;}
body.top-collapsed #app{grid-template-rows:minmax(0,1fr)!important;}
body.top-collapsed .topbar{display:none!important;}
body.top-collapsed .game-shell{height:100dvh!important;padding-top:48px!important;}
body.top-collapsed .left-panel{grid-template-rows:minmax(0,1fr) 54px minmax(38px,auto)!important;}
body.top-collapsed .mission-bar{display:none!important;}
/* Kill metallic/space panel leftovers everywhere visible. */
.dialog-card,.panel,.card,.class-card,.stats-card,.teacher-summary,.mp-world-card,.phase-badge,.class-code,.pill,.status-pill{
  background-image:none!important;box-shadow:0 8px 22px rgba(24,52,90,.08)!important;
}
.completion-stars,.feedback-stars,.bubble-stars,.chip-stars{background:none!important;border:0!important;box-shadow:none!important;}
.kenney-star{background:none!important;border:0!important;box-shadow:none!important;filter:none!important;}
.kenney-star.empty{opacity:.25!important;filter:grayscale(1)!important;}
/* Lesson dialog bubbles cleanup. */
.mp-level-bubble{width:64px!important;height:84px!important;grid-template-rows:44px 16px 16px!important;gap:2px!important;}
.mp-level-bubble .bubble-core{width:44px!important;height:44px!important;background:#f8fcff!important;border:2px solid #cfe0f3!important;box-shadow:none!important;color:#17445f!important;}
.mp-level-bubble.is-active .bubble-core{background:#fff7d8!important;border-color:#f3b72c!important;}
.mp-level-bubble .bubble-label{font-size:8px!important;line-height:1!important;max-width:64px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;background:transparent!important;border:0!important;padding:0!important;color:#536981!important;}
.mp-level-bubble .bubble-stars{height:14px!important;display:flex!important;justify-content:center!important;gap:1px!important;}
.mp-level-bubble .bubble-stars .kenney-star{width:11px!important;height:11px!important;}
/* Responsive safeguards. */
@media(max-width:1200px){
  .topbar{max-height:none!important;min-height:110px!important;grid-template-columns:70px 1fr!important;}
  .user-area{grid-column:1/-1;justify-content:flex-start;overflow:auto!important;padding-bottom:2px!important;}
  .focus-toggle-float{top:112px!important;}
  .game-shell{grid-template-columns:1fr!important;overflow:auto!important;height:auto!important;min-height:100dvh!important;}
  .layout-splitter{display:none!important;}
  .left-panel{min-height:560px!important;}.right-panel{min-height:520px!important;}
  html,body{overflow:auto!important;}
}
@media(max-height:820px) and (min-width:1000px){
  .topbar{min-height:86px!important;max-height:96px!important;padding:6px 10px!important;}
  .brand img{width:54px!important;height:54px!important;}.brand{width:62px!important;min-width:62px!important;}
  .lesson-chooser{height:38px!important;min-height:38px!important;}.level-row{height:42px!important;min-height:42px!important;}.level-strip{height:42px!important;}.level-chip{height:40px!important;min-width:48px!important;}
  .focus-toggle-float{top:90px!important;}
  .left-panel{grid-template-rows:34px minmax(0,1fr) 50px 36px!important;gap:5px!important;padding:6px!important;}
  .mission-bar{height:34px!important;}.run-dock{height:50px!important;min-height:50px!important;}.run-dock button{height:40px!important;min-height:40px!important;}
  .feedback{min-height:34px!important;max-height:38px!important;padding:5px 8px!important;}
  .workspace-head{height:42px!important;min-height:42px!important;}
}