/* MABNI Coding Studio 1.2.7 - robot direction + header/level/focus polish
   Focus: robot face orientation, arrow-move rotation, top layout, readable level numbers, compact hide/show toggle. */

/* One useful concept header only: left side owns the concept. The lesson picker no longer duplicates it above levels. */
.topbar{
  grid-template-columns:minmax(230px,330px) minmax(420px,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:82px!important;
  height:82px!important;
  padding:8px 14px!important;
  overflow:hidden!important;
}
.topbar .workspace-concept-brand{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  min-width:230px!important;
  max-width:330px!important;
  min-height:54px!important;
  height:54px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:2px!important;
  padding:8px 18px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#ffffff,#ecf7ff)!important;
  border:1.5px solid #b8d7f1!important;
  box-shadow:0 10px 28px rgba(0,78,146,.08)!important;
  overflow:hidden!important;
}
.workspace-concept-brand #workspaceConceptKicker{
  display:block!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  color:#61758f!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.workspace-concept-brand #workspaceConceptName{
  display:block!important;
  font-size:22px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  color:#0b2a44!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}
.lesson-level-cluster{
  display:grid!important;
  grid-template-rows:1fr!important;
  min-width:0!important;
  min-height:58px!important;
  align-items:center!important;
  gap:0!important;
  overflow:hidden!important;
}
/* Hide duplicated lesson/concept bar inside the topbar only. The mission bar under it stays visible. */
.topbar .lesson-chooser{display:none!important;}
.level-row{
  height:58px!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 48px!important;
  gap:8px!important;
  align-items:center!important;
  overflow:hidden!important;
}
.level-row>.secondary.small{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  padding:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font-size:26px!important;
  line-height:1!important;
  color:#123a55!important;
  background:linear-gradient(180deg,#f8fcff,#e8f5ff)!important;
  border:1.5px solid #b9d9f0!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
.level-strip{
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:4px 2px!important;
  scrollbar-width:none!important;
}
.level-strip::-webkit-scrollbar{display:none!important;}
.level-chip,.level-strip button{
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:48px!important;
  min-height:48px!important;
  border-radius:22px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
  background:linear-gradient(180deg,#f7fcff,#eaf6ff)!important;
  border:1.5px solid #b9d9f0!important;
  box-shadow:0 5px 12px rgba(14,78,146,.07)!important;
  color:#133a55!important;
}
.level-chip .level-chip-num,.level-strip button .level-chip-num{
  display:block!important;
  position:static!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:1000!important;
  color:#123a55!important;
  white-space:nowrap!important;
  text-align:center!important;
  transform:none!important;
  writing-mode:horizontal-tb!important;
}
.level-chip.active,.level-strip button.active,[aria-current="true"]{
  background:linear-gradient(180deg,#ffe071,#f6bb2e)!important;
  border-color:#f59e0b!important;
  box-shadow:0 0 0 4px rgba(45,212,191,.24),0 8px 18px rgba(245,158,11,.18)!important;
}
.level-chip.active .level-chip-num,.level-strip button.active .level-chip-num{color:#102a43!important;}
.level-chip .chip-stars{position:absolute!important;bottom:-12px!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;gap:1px!important;pointer-events:none!important;}
.level-chip .chip-stars.empty{display:none!important;}

/* Focus toggle: no pin, no full-width show strip, just a small elegant up/down button. */
#showTopBtn{display:none!important;}
.focus-toggle-float.top-arrow-toggle,#focusToggleFloat{
  position:fixed!important;
  top:92px!important;
  right:18px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:10050!important;
  width:auto!important;
  max-width:170px!important;
  min-width:112px!important;
  height:38px!important;
  min-height:38px!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;
}
.focus-toggle-float .pin-icon,.focus-toggle-float .pin-copy,.focus-toggle-float .pin-arrow{display:none!important;}
.focus-toggle-float .arrow-symbol{display:inline-grid!important;place-items:center!important;font-size:18px!important;line-height:1!important;color:#004E92!important;}
.focus-toggle-float .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:calc(100dvh - 12px)!important;}

/* Robot face and movement polish. The eyes are the face, independent from the artwork orientation. */
.player-token{transition:transform .28s cubic-bezier(.2,.9,.2,1)!important;will-change:transform!important;}
.player-robot-sprite{
  transform-box:fill-box!important;
  transform-origin:center!important;
  transition:transform .16s ease-out!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 8px 10px rgba(15,42,68,.18))!important;
}
.robot-face-overlay{pointer-events:none!important;transition:transform .16s ease-out!important;filter:drop-shadow(0 2px 3px rgba(15,42,68,.12));}
.robot-eye{animation:robotEyePulse 1.2s ease-in-out infinite alternate;}
.player-token.is-turning .robot-face-overlay{filter:drop-shadow(0 0 6px rgba(0,78,146,.28));}
@keyframes robotEyePulse{from{opacity:.85}to{opacity:1}}

/* Keep the left panel clean with the new top layout. */
.mission-bar{min-height:42px!important;}
.run-dock{overflow:visible!important;}

@media(max-width:1180px){
  .topbar{grid-template-columns:minmax(200px,280px) minmax(320px,1fr)!important;height:auto!important;min-height:118px!important;overflow:visible!important;}
  .compact-user-area.user-area-restored{grid-column:1/-1!important;justify-content:flex-start!important;}
  #focusToggleFloat{top:118px!important;right:12px!important;}
}
@media(max-width:760px){
  .topbar{grid-template-columns:1fr!important;min-height:160px!important;}
  .topbar .workspace-concept-brand{max-width:none!important;width:100%!important;}
  .lesson-level-cluster{width:100%!important;}
  .level-row{grid-template-columns:44px minmax(0,1fr) 44px!important;}
  #focusToggleFloat{top:160px!important;right:10px!important;}
}