/* MABNI v54 UX Asset System
   Purpose: use Kenney assets intentionally without clutter: puzzle board for maze, robot as actor,
   medals/stars only as rewards, prompts only in context, and a compact classroom layout. */
:root{
  --m54-bg:#eef7ff;
  --m54-surface:#ffffff;
  --m54-soft:#f5fbff;
  --m54-line:#cfe2f5;
  --m54-ink:#17324d;
  --m54-muted:#60738a;
  --m54-blue:#004E92;
  --m54-cyan:#18a8d8;
  --m54-green:#22c55e;
  --m54-gold:#f5b82e;
  --m54-red:#ef4444;
  --m54-shadow:0 10px 24px rgba(20,50,86,.10);
}
*{box-sizing:border-box}
html,body{overflow:hidden!important;background:var(--m54-bg)!important;color:var(--m54-ink)!important}
#app{height:100dvh!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;background:linear-gradient(180deg,#f9fdff 0%,#edf7ff 100%)!important;}
/* Compact header: classroom controls, not cockpit controls. */
.topbar{min-height:74px!important;max-height:86px!important;padding:7px 10px!important;gap:10px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--m54-line)!important;box-shadow:0 8px 18px rgba(20,50,86,.08)!important;overflow:hidden!important;}
.brand{width:58px!important;min-width:58px!important}.brand img{width:52px!important;height:52px!important;border-radius:14px!important;box-shadow:none!important;background:#fff!important}
.lesson-level-cluster{gap:5px!important;min-width:0!important;}
.lesson-chooser{height:34px!important;min-height:34px!important;padding:5px 14px!important;border-radius:18px!important;background:#fff!important;background-image:none!important;border:1px solid #bcd8f2!important;box-shadow:none!important;}
.lesson-chooser span{font-size:10px!important;letter-spacing:.12em!important;color:#66788d!important}.lesson-chooser strong{font-size:17px!important;color:#142b43!important}
.level-row{height:38px!important;min-height:38px!important;gap:5px!important}.level-row>.small{width:34px!important;height:34px!important;min-height:34px!important;border-radius:50%!important;padding:0!important}.level-strip{height:38px!important;gap:5px!important;align-items:end!important;overflow:hidden!important;}
.level-chip{width:46px!important;min-width:46px!important;height:38px!important;border-radius:14px 14px 0 0!important;background:#f7fbff!important;background-image:none!important;border:1px solid #cfe1f5!important;box-shadow:none!important;display:grid!important;grid-template-rows:1fr!important;place-items:center!important;overflow:hidden!important;}
.level-chip .level-chip-num{font-size:18px!important;font-weight:1000!important;color:#1e5068!important}.level-chip .chip-stars{display:none!important}.level-chip.active{background:#fff8d9!important;border-color:#f2b633!important;box-shadow:inset 0 3px 0 #f2b633!important}.level-chip.done{background:#eefcf2!important;border-color:#a9e8ba!important}
.user-area{gap:6px!important;overflow:auto!important;white-space:nowrap!important}.user-area .secondary,.user-area .toplink,.avatar-btn{height:36px!important;min-height:36px!important;padding:6px 11px!important;border-radius:16px!important;background:#edf7ff!important;background-image:none!important;border:1px solid #c7def5!important;color:#17324d!important;box-shadow:none!important;font-size:13px!important}.avatar-btn{width:40px!important;padding:0!important;overflow:hidden!important}.v54-robot-mini{width:30px;height:30px;object-fit:contain;display:block;filter:drop-shadow(0 3px 3px rgba(20,50,86,.18))}
/* The focus control is a small pin tab, not a billboard. */
.focus-toggle-float,.top-pin-toggle{position:fixed!important;top:86px!important;left:50%!important;transform:translateX(-50%)!important;z-index:80!important;width:auto!important;min-width:0!important;max-width:140px!important;height:30px!important;padding:4px 11px!important;border-radius:0 0 16px 16px!important;background:#ffffff!important;background-image:none!important;border:1px solid #bcd8f2!important;border-top:0!important;box-shadow:0 8px 18px rgba(20,50,86,.12)!important;color:#17324d!important;font-size:12px!important;font-weight:900!important;letter-spacing:0!important;text-transform:none!important;display:inline-flex!important;align-items:center!important;gap:5px!important;}
.focus-toggle-float .pin-icon{font-size:14px!important}.focus-toggle-float .pin-copy{display:inline!important}.focus-toggle-float .pin-arrow{font-size:13px!important}.top-pin-return{position:fixed!important;top:0!important;left:50%!important;transform:translateX(-50%)!important;height:30px!important;border-radius:0 0 16px 16px!important;z-index:90!important;background:#fff!important;border:1px solid #bcd8f2!important;border-top:0!important;color:#17324d!important;padding:4px 12px!important;box-shadow:0 8px 18px rgba(20,50,86,.12)!important;font-size:12px!important;font-weight:900!important;}
body.top-collapsed .topbar{display:none!important}body.top-collapsed .focus-toggle-float{top:0!important;border-radius:0 0 16px 16px!important}
/* Main workspace: maximize maze + Blockly; no instruction walls. */
.game-shell{height:100%!important;min-height:0!important;overflow:hidden!important;padding:8px!important;gap:8px!important;display:grid!important;grid-template-columns:minmax(440px,52vw) 8px minmax(460px,1fr)!important;background:var(--m54-bg)!important;}
.left-panel,.right-panel{min-height:0!important;min-width:0!important;background:#fff!important;background-image:none!important;border:1px solid var(--m54-line)!important;border-radius:20px!important;box-shadow:var(--m54-shadow)!important;overflow:hidden!important;}
.left-panel{padding:8px!important;display:grid!important;grid-template-rows:34px minmax(0,1fr) 54px!important;gap:7px!important}.right-panel{padding:8px!important;display:grid!important;grid-template-rows:44px minmax(0,1fr)!important;gap:7px!important}.layout-splitter{background:#cceeff!important;border:1px solid #a8d8ef!important;border-radius:99px!important;box-shadow:none!important}
/* Mission row: one clear line. No prompt chips, no status essays. */
.mission-bar{height:34px!important;min-height:34px!important;padding:4px 8px!important;margin:0!important;border-radius:15px!important;background:#f8fcff!important;background-image:none!important;border:1px solid #d7e8f7!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:6px!important;overflow:hidden!important}.mission-chip{height:24px!important;min-height:24px!important;padding:3px 8px!important;border-radius:999px!important;background:#eff7ff!important;border:1px solid #d3e6f7!important;color:#264967!important;font-size:11px!important;font-weight:900!important;box-shadow:none!important;background-image:none!important;white-space:nowrap!important}.level-chip-title{flex:1 1 auto!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;background:#fff!important;color:#17324d!important;font-size:12px!important}.level-chip-title .phase-badge{display:none!important}.mission-goals,.learning-focus-card,.v49-run-hints,.v49-input-hints,.v50-compact-hints,.maze-help-row{display:none!important}
/* Maze board: actual Sokoban board, with fallback colors underneath. */
.visualization{height:100%!important;min-height:320px!important;padding:6px!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:#e7f5ff!important;background-image:linear-gradient(135deg,rgba(255,255,255,.72),rgba(231,245,255,.94))!important;border:1px solid #bdd8ef!important;border-radius:18px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)!important;}
#phaserMaze{display:none!important}#svgMaze{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;filter:drop-shadow(0 9px 18px rgba(15,45,80,.14))!important;}
#svgMaze .tile-base{opacity:1!important;stroke:none!important}#svgMaze .tile-base.path{fill:#e8f7ff!important}#svgMaze .tile-base.start{fill:#bfeaff!important}#svgMaze .tile-base.goal{fill:#ffe47b!important}#svgMaze .tile-base.trail{fill:#a7f4c8!important}#svgMaze .tile-base.wall{fill:#5aaed1!important}
#svgMaze .kenney-maze-tile-img{opacity:1!important;mix-blend-mode:normal!important;filter:none!important}#svgMaze .kenney-maze-tile-img.path{opacity:.88!important}#svgMaze .kenney-maze-tile-img.wall{opacity:1!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))!important}#svgMaze .kenney-maze-tile-img.trail{opacity:.95!important}#svgMaze .kenney-maze-tile-img.goal,#svgMaze .kenney-maze-tile-img.start{opacity:.98!important}
#svgMaze .tile-frame{fill:transparent!important;pointer-events:none!important}#svgMaze .tile-frame.path{stroke:#94c3e4!important;stroke-width:1.4!important}#svgMaze .tile-frame.start{stroke:#0ea5e9!important;stroke-width:2.8!important}#svgMaze .tile-frame.goal{stroke:#e8a600!important;stroke-width:3.2!important}#svgMaze .tile-frame.trail{stroke:#16a66b!important;stroke-width:3!important}#svgMaze .tile-frame.wall{stroke:#126486!important;stroke-width:3.2!important}
#svgMaze .tile.current-step{stroke:#f59e0b!important;stroke-width:5!important;filter:drop-shadow(0 0 10px rgba(245,158,11,.62))!important}#svgMaze .tile.step-error{stroke:#ef4444!important;stroke-width:6!important;filter:drop-shadow(0 0 12px rgba(239,68,68,.8))!important}
#svgMaze .player-token circle{opacity:.08!important}#svgMaze .player-robot-sprite{filter:drop-shadow(0 10px 8px rgba(12,32,56,.34))!important}#svgMaze .player-emoji-badge{display:none!important}.goal-item .goal-medal{display:none!important}.goal-target{opacity:1!important;filter:drop-shadow(0 4px 6px rgba(130,90,0,.24))!important}.board-item,.task-item{filter:drop-shadow(0 4px 7px rgba(15,35,60,.24))!important}
/* Run dock: always visible, never over the maze. */
.run-dock{height:54px!important;min-height:54px!important;margin:0!important;padding:5px!important;position:relative!important;z-index:5!important;display:grid!important;grid-template-columns:minmax(140px,1.35fr) repeat(4,minmax(72px,.75fr))!important;gap:5px!important;background:#f8fcff!important;background-image:none!important;border:1px solid #cfe1f5!important;border-radius:18px!important;box-shadow:0 8px 18px rgba(20,50,86,.08)!important}.run-dock button{height:44px!important;min-height:44px!important;border-radius:14px!important;padding:6px 9px!important;font-size:13px!important;line-height:1!important;font-weight:1000!important;background-image:none!important;box-shadow:none!important;white-space:nowrap!important}.big-run{background:linear-gradient(135deg,#1fd15c,#8cf0a0)!important;color:#062d18!important;border:0!important;font-size:18px!important;letter-spacing:.02em!important}#stepBtn,#resetBtn,#clearBtn,#hintBtn{background:#eaf5ff!important;border:1px solid #c7def5!important;color:#17324d!important}
#feedback,.feedback,.run-feedback-details,.v47-trace-panel{display:none!important}.event-game-pad{border-radius:18px!important;background:#fff!important;border:1px solid #d5e6f7!important}.event-game-score{display:none!important}
/* Blockly panel: clear, calm, and no fake space cockpit. */
.workspace-head{height:44px!important;min-height:44px!important;margin:0!important;padding:6px 10px!important;border-radius:16px!important;background:#f8fcff!important;background-image:none!important;border:1px solid #d7e8f7!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-note{display:none!important}#capacityBubble{height:28px!important;min-height:28px!important;padding:4px 9px!important;border-radius:999px!important;background:#e6f7ff!important;border:1px solid #bfe6f5!important;color:#183850!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;border:1px solid #d8e7f6!important;background:#fff!important;overflow:hidden!important}#blocklyDiv{height:100%!important;min-height:0!important}.blocklyFlyoutBackground{fill:#f5fbff!important}.blocklyToolboxDiv{background:#f8fcff!important;border-right:1px solid #d7e8f7!important}.blocklyScrollbarHandle{fill:#5fa1cc!important}.blocklySelected>.blocklyPath,.blocklySelected>.blocklyPathDark{stroke:#f5b82e!important;stroke-width:3px!important}.blocklyHighlightedConnectionPath{stroke:#22c55e!important;stroke-width:4px!important}
/* Lesson dialog: clean circles, label below, stars below. */
.dialog-card{background:#fff!important;background-image:none!important;border:1px solid var(--m54-line)!important;box-shadow:0 18px 40px rgba(20,50,86,.14)!important}.mp-course-hero{display:none!important}.mp-world-card{background:#fff!important;background-image:none!important;border:1px solid #d7e8f7!important;border-radius:24px!important;box-shadow:0 10px 24px rgba(20,50,86,.08)!important}.mp-world-card.is-active{border-color:#65c7d1!important;box-shadow:0 12px 28px rgba(20,150,170,.15)!important}.mp-level-road{padding:14px 12px 18px!important;gap:16px!important;align-items:flex-start!important;overflow-x:auto!important}.mp-level-bubble{width:70px!important;min-width:70px!important;height:96px!important;display:grid!important;grid-template-rows:52px 18px 18px!important;place-items:center!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}.mp-level-bubble::after{top:25px!important;left:55px!important;width:28px!important;height:3px!important;background:#d9e5f4!important}.mp-level-bubble .bubble-core{width:52px!important;height:52px!important;border-radius:50%!important;background:#f4fbff!important;background-image:none!important;border:2px solid #cfe1f5!important;box-shadow:0 6px 14px rgba(20,50,86,.10)!important;color:#17324d!important;display:grid!important;place-items:center!important}.mp-level-bubble .bubble-core strong{font-size:19px!important;color:#17435f!important}.mp-level-bubble.is-active .bubble-core{background:#fff6d8!important;border-color:#f2b633!important;box-shadow:0 0 0 5px rgba(242,182,51,.18),0 8px 16px rgba(242,182,51,.18)!important}.mp-level-bubble.is-done .bubble-core{background:#eefcf2!important;border-color:#7bdc97!important}.mp-level-bubble .bubble-label{font-size:10px!important;font-weight:850!important;color:#52677f!important;background:transparent!important;border:0!important;padding:0!important;max-width:68px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.mp-level-bubble .bubble-stars{display:flex!important;align-items:center!important;justify-content:center!important;gap:1px!important;height:16px!important;position:static!important;transform:none!important;margin:0!important}.mp-level-bubble .bubble-stars .kenney-star{width:12px!important;height:12px!important;filter:none!important}.kenney-star{background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}
/* Teacher dashboard: friendlier density + asset accents without clutter. */
.teacher-shell .topbar,.teacher-app .topbar,.dashboard .topbar{background:#fff!important;background-image:none!important}.class-scope-banner{border-radius:16px!important;background:#eefaf6!important;border:1px solid #bae8d5!important;color:#144b37!important}.teacher-shell .panel,.teacher-shell .card,.teacher-shell .metric-card,.teacher-shell .class-card,.teacher-shell .student-card{border-radius:20px!important;border:1px solid #d7e8f7!important;box-shadow:0 8px 22px rgba(20,50,86,.08)!important;background:#fff!important;background-image:none!important;overflow-wrap:anywhere!important}.teacher-shell .btn,.teacher-shell .btn-small{border-radius:14px!important;min-height:40px!important}.teacher-shell .primary{background:#004E92!important;color:#fff!important}.teacher-shell .pill{border-radius:999px!important;padding:6px 10px!important;white-space:normal!important;line-height:1.2!important}
@media(max-height:820px) and (min-width:1000px){.topbar{min-height:66px!important;max-height:74px!important}.brand{width:50px!important;min-width:50px!important}.brand img{width:46px!important;height:46px!important}.lesson-chooser{height:30px!important;min-height:30px!important}.level-row{height:34px!important;min-height:34px!important}.level-chip{height:34px!important;min-width:42px!important}.focus-toggle-float{top:74px!important}.left-panel{grid-template-rows:30px minmax(0,1fr) 48px!important;gap:5px!important;padding:6px!important}.mission-bar{height:30px!important}.run-dock{height:48px!important;min-height:48px!important}.run-dock button{height:38px!important;min-height:38px!important}.right-panel{grid-template-rows:38px minmax(0,1fr)!important}.workspace-head{height:38px!important;min-height:38px!important}.visualization{min-height:280px!important;padding:4px!important}}
@media(max-width:1100px){html,body{overflow:auto!important}.topbar{max-height:none!important;min-height:96px!important;display:grid!important;grid-template-columns:54px 1fr!important}.user-area{grid-column:1/-1}.game-shell{height:auto!important;min-height:100dvh!important;overflow:visible!important;display:block!important}.layout-splitter{display:none!important}.left-panel,.right-panel{min-height:520px!important;margin-bottom:10px!important}.focus-toggle-float{top:96px!important}.run-dock{grid-template-columns:1fr 1fr!important;height:auto!important;min-height:0!important}.big-run{grid-column:1/-1}}