/* MABNI Coding Studio 1.2.8
   Scope: robot orientation, topbar/levels spacing, run dock layout, focus arrow button.
   This file deliberately overrides older layered CSS without changing unrelated teacher/Firebase code. */

/* ---------- Top area: concept first row, levels get a full clean row ---------- */
.topbar{
  display:grid!important;
  grid-template-columns:minmax(280px,430px) minmax(0,1fr) auto!important;
  grid-template-rows:54px 58px!important;
  min-height:118px!important;
  height:118px!important;
  max-height:118px!important;
  align-items:center!important;
  gap:6px 12px!important;
  padding:6px 14px 8px!important;
  overflow:visible!important;
}
.topbar .workspace-concept-brand{
  grid-column:1 / 2!important;
  grid-row:1 / 2!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  padding:6px 18px!important;
  border-radius:22px!important;
  align-self:center!important;
}
.workspace-concept-brand #workspaceConceptKicker{font-size:10.5px!important;letter-spacing:.17em!important;}
.workspace-concept-brand #workspaceConceptName{font-size:22px!important;line-height:1.05!important;}
.compact-user-area.user-area-restored,
.user-area.compact-user-area{
  grid-column:3 / 4!important;
  grid-row:1 / 2!important;
  align-self:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  gap:8px!important;
}
.lesson-level-cluster{
  grid-column:1 / -1!important;
  grid-row:2 / 3!important;
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  min-height:54px!important;
  display:block!important;
  overflow:visible!important;
}
.topbar .lesson-chooser{display:none!important;}
.level-row{
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 46px!important;
  align-items:center!important;
  gap:10px!important;
  overflow:visible!important;
}
.level-row>.secondary.small{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  border-radius:50%!important;
  font-size:26px!important;
  line-height:1!important;
  padding:0!important;
  z-index:2!important;
}
.level-strip{
  min-width:0!important;
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  align-items:center!important;
  justify-content:center!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding:3px 6px 6px!important;
  scrollbar-width:thin!important;
  scroll-padding-inline:12px!important;
}
.level-strip::-webkit-scrollbar{height:6px!important;display:block!important;}
.level-strip::-webkit-scrollbar-thumb{background:rgba(0,78,146,.22)!important;border-radius:999px!important;}
.level-chip,.level-strip button{
  flex:0 0 62px!important;
  width:62px!important;
  min-width:62px!important;
  max-width:62px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  border-radius:20px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow:visible!important;
}
.level-chip .level-chip-num,.level-strip button .level-chip-num{
  display:block!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  writing-mode:horizontal-tb!important;
  white-space:nowrap!important;
  transform:none!important;
}
.level-chip .chip-stars{bottom:-10px!important;transform:translateX(-50%) scale(.86)!important;}

/* ---------- Main workspace: keep controls BELOW the maze, never on top of it ---------- */
.game-shell{
  height:calc(100dvh - 118px)!important;
  min-height:0!important;
  padding:8px!important;
  gap:8px!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
.left-panel{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
  gap:8px!important;
  padding:8px!important;
}
.left-panel>.mission-bar{flex:0 0 34px!important;min-height:34px!important;height:34px!important;}
.left-panel>#learningFocusCard{display:none!important;}
.left-panel>.visualization{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
  position:relative!important;
  z-index:1!important;
  margin:0!important;
}
#svgMaze{width:100%!important;height:100%!important;max-height:100%!important;display:block!important;}
.left-panel>.run-dock{
  flex:0 0 62px!important;
  height:62px!important;
  min-height:62px!important;
  max-height:62px!important;
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:minmax(150px,1.35fr) repeat(4,minmax(86px,1fr))!important;
  gap:8px!important;
  align-items:center!important;
  border-radius:20px!important;
  background:#f8fcff!important;
  border:1px solid #cfe0f3!important;
  box-shadow:0 8px 18px rgba(24,52,90,.08)!important;
  overflow:hidden!important;
}
.run-dock button,
.run-dock .secondary{
  height:46px!important;
  min-height:46px!important;
  border-radius:16px!important;
  padding:0 12px!important;
  white-space:nowrap!important;
  min-width:0!important;
}
#runBtn.big-run,
.run-dock .big-run{
  background:linear-gradient(180deg,#0872b9,#004E92)!important;
  color:#fff!important;
  border:1px solid #004E92!important;
  font-size:18px!important;
  font-weight:1000!important;
  box-shadow:0 8px 18px rgba(0,78,146,.20)!important;
}
#runBtn svg,#runBtn i{color:#fff!important;stroke:#fff!important;}
.left-panel>.feedback,.left-panel>#runFeedbackDetails{display:none!important;}

/* ---------- Focus toggle: replace blue dot/pin with clear Kenney arrow asset ---------- */
#showTopBtn{display:none!important;}
#focusToggleFloat.focus-toggle-float,
.focus-toggle-float.top-arrow-toggle{
  position:fixed!important;
  top:126px!important;
  right:18px!important;
  left:auto!important;
  transform:none!important;
  z-index:10050!important;
  width:auto!important;
  min-width:132px!important;
  max-width:168px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  background:linear-gradient(180deg,#ffffff,#eaf6ff)!important;
  border:1.5px solid #b8d7f1!important;
  color:#0b2a44!important;
  font-weight:1000!important;
  font-size:14px!important;
  letter-spacing:0!important;
  box-shadow:0 10px 24px rgba(0,78,146,.14)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#focusToggleFloat .arrow-symbol{display:none!important;}
#focusToggleFloat .focus-arrow-img{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  object-fit:contain!important;
  display:block!important;
  filter:none!important;
}
#focusToggleFloat .arrow-copy{display:inline!important;font-size:14px!important;line-height:1!important;color:#0b2a44!important;}
body.top-collapsed #focusToggleFloat{top:10px!important;background:linear-gradient(180deg,#fffdf3,#fff2c2)!important;border-color:#f2c24e!important;}
body.top-collapsed .topbar{display:none!important;}
body.top-collapsed .game-shell{height:100dvh!important;padding-top:58px!important;}

/* ---------- Robot: no fake face overlay; use original asset eyes and rotate the sprite ---------- */
#svgMaze .robot-face-overlay{display:none!important;}
#svgMaze .player-token circle{opacity:.10!important;}
#svgMaze .player-robot-sprite{
  transform-box:fill-box!important;
  transform-origin:center center!important;
  transform-origin:center!important;
  transition:transform .18s ease-out!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 8px 9px rgba(15,42,68,.20))!important;
}
#svgMaze .player-token.is-turning .player-robot-sprite{filter:drop-shadow(0 0 8px rgba(0,78,146,.28)) drop-shadow(0 8px 9px rgba(15,42,68,.18))!important;}

/* ---------- Responsive fallback ---------- */
@media(max-width:1280px){
  .topbar{grid-template-columns:minmax(240px,360px) minmax(0,1fr) auto!important;}
  .level-chip,.level-strip button{flex-basis:56px!important;width:56px!important;min-width:56px!important;}
  .level-strip{gap:8px!important;justify-content:flex-start!important;}
  .left-panel>.run-dock{grid-template-columns:1.2fr repeat(4,minmax(70px,1fr))!important;}
}
@media(max-width:1100px){
  html,body{overflow:auto!important;}
  .topbar{height:auto!important;max-height:none!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;min-height:160px!important;}
  .topbar .workspace-concept-brand,.compact-user-area.user-area-restored,.lesson-level-cluster{grid-column:1/-1!important;grid-row:auto!important;}
  .compact-user-area.user-area-restored{justify-content:flex-start!important;flex-wrap:wrap!important;}
  .game-shell{height:auto!important;min-height:100dvh!important;grid-template-columns:1fr!important;overflow:visible!important;}
  .left-panel{min-height:620px!important;}
  .left-panel>.run-dock{height:auto!important;min-height:0!important;max-height:none!important;grid-template-columns:1fr 1fr!important;}
  #runBtn.big-run{grid-column:1/-1!important;}
  #focusToggleFloat.focus-toggle-float{top:166px!important;right:12px!important;}
}