/* MABNI v55 critical UX fix
   Real classroom pass: login must close, maze must remain visible, top controls must stay compact,
   level numbers must not look chopped, and Run must stop pretending to be a giant toy slab. */
:root{
  --v55-ink:#17324d;
  --v55-blue:#004E92;
  --v55-cyan:#17a8d7;
  --v55-green:#20b96b;
  --v55-line:#cfe3f5;
  --v55-soft:#f4fbff;
  --v55-gold:#f5b82e;
}
/* Force SVG board to stay visible even if Phaser previously set body.phaser-ready. */
#phaserMaze,
#phaserMaze canvas{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
#svgMaze,
body.phaser-ready #svgMaze,
.phaser-ready #svgMaze{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:240px!important;
  pointer-events:none!important;
  z-index:2!important;
}
/* Clean, visible tile language. No blank bathtub board. */
.visualization{
  min-height:300px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.72),rgba(232,247,255,.96)),
    repeating-linear-gradient(45deg,rgba(0,78,146,.035) 0 10px,rgba(23,168,215,.035) 10px 20px)!important;
  border:1px solid #bcd9f0!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), 0 8px 22px rgba(20,50,86,.08)!important;
}
#svgMaze .tile-base{opacity:1!important;display:block!important;stroke:none!important;}
#svgMaze .tile-base.path{fill:#eaf8ff!important;}
#svgMaze .tile-base.wall{fill:#3a9ac7!important;}
#svgMaze .tile-base.start{fill:#b7ecff!important;}
#svgMaze .tile-base.goal{fill:#ffe079!important;}
#svgMaze .tile-base.trail{fill:#a3f1c9!important;}
#svgMaze .kenney-maze-tile-img{display:block!important;opacity:.92!important;visibility:visible!important;mix-blend-mode:normal!important;}
#svgMaze .kenney-maze-tile-img.wall{opacity:1!important;filter:drop-shadow(0 2px 2px rgba(15,45,75,.18))!important;}
#svgMaze .kenney-maze-tile-img.path{opacity:.74!important;}
#svgMaze .tile-frame{display:block!important;fill:transparent!important;pointer-events:none!important;vector-effect:non-scaling-stroke!important;}
#svgMaze .tile-frame.path{stroke:#8fc2e6!important;stroke-width:1.7!important;}
#svgMaze .tile-frame.wall{stroke:#0f668d!important;stroke-width:3.1!important;}
#svgMaze .tile-frame.start{stroke:#008fc7!important;stroke-width:3!important;}
#svgMaze .tile-frame.goal{stroke:#d99900!important;stroke-width:3.2!important;}
#svgMaze .tile-frame.trail{stroke:#15a66b!important;stroke-width:3!important;}
#svgMaze .player-token{display:block!important;opacity:1!important;visibility:visible!important;}
#svgMaze .player-robot-sprite{display:block!important;opacity:1!important;filter:drop-shadow(0 8px 8px rgba(10,35,70,.34))!important;}
#svgMaze .board-item,#svgMaze .goal-item,#svgMaze .task-item{display:block!important;opacity:1!important;visibility:visible!important;}
/* Top level numbers: simple pills, no chopped tab bottoms. */
.topbar{min-height:68px!important;max-height:76px!important;padding:6px 10px!important;align-items:center!important;}
.brand{width:54px!important;min-width:54px!important;}
.brand img{width:48px!important;height:48px!important;border-radius:14px!important;}
.lesson-chooser{height:30px!important;min-height:30px!important;padding:4px 13px!important;}
.lesson-chooser span{font-size:10px!important;}
.lesson-chooser strong{font-size:16px!important;}
.level-row{height:34px!important;min-height:34px!important;align-items:center!important;overflow:hidden!important;}
.level-strip{height:34px!important;min-height:34px!important;display:flex!important;align-items:center!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 2px!important;scrollbar-width:none!important;}
.level-strip::-webkit-scrollbar{display:none!important;}
.level-chip{
  width:42px!important;
  min-width:42px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  background:#f7fbff!important;
  background-image:none!important;
  border:1px solid #c8def3!important;
  box-shadow:none!important;
  padding:0!important;
}
.level-chip .level-chip-num{font-size:17px!important;font-weight:1000!important;line-height:1!important;color:#1b4d67!important;}
.level-chip .chip-stars{display:none!important;}
.level-chip.active{background:#fff7d6!important;border-color:#f2b533!important;box-shadow:0 0 0 2px rgba(245,184,46,.18)!important;}
.level-chip.done{background:#edfdf4!important;border-color:#9ee2b9!important;}
.level-row>.small{width:30px!important;height:30px!important;min-height:30px!important;border-radius:50%!important;}
/* Pin arrow: tiny, not a signboard. */
.focus-toggle-float,.top-pin-toggle{
  top:76px!important;
  right:18px!important;
  left:auto!important;
  transform:none!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:30px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:0 0 14px 14px!important;
  font-size:0!important;
  z-index:110!important;
}
.focus-toggle-float .pin-icon{font-size:14px!important;line-height:1!important;}
.focus-toggle-float .pin-copy{display:none!important;}
.focus-toggle-float .pin-arrow{font-size:12px!important;line-height:1!important;}
.top-pin-return{
  top:0!important;
  right:18px!important;
  left:auto!important;
  transform:none!important;
  width:42px!important;
  min-width:42px!important;
  height:30px!important;
  padding:0!important;
  font-size:0!important;
}
.top-pin-return::after{content:'↓';font-size:18px;font-weight:1000;color:var(--v55-ink);}
body.top-collapsed .focus-toggle-float{top:0!important;}
/* Main layout: give board real room while preserving Run visibility. */
.game-shell{padding:7px!important;gap:7px!important;grid-template-columns:minmax(420px,52vw) 7px minmax(440px,1fr)!important;}
.left-panel{grid-template-rows:30px minmax(280px,1fr) 48px!important;gap:6px!important;padding:7px!important;}
.mission-bar{height:30px!important;min-height:30px!important;border-radius:15px!important;padding:3px 7px!important;}
.mission-chip{height:22px!important;min-height:22px!important;font-size:10.5px!important;padding:3px 8px!important;}
.level-chip-title{font-size:12px!important;}
/* Run dock: clear classroom controls, not a giant green mattress. */
.run-dock{
  height:48px!important;
  min-height:48px!important;
  padding:4px!important;
  display:grid!important;
  grid-template-columns:1.18fr repeat(4,1fr)!important;
  gap:6px!important;
  border-radius:16px!important;
  background:#f8fcff!important;
  border:1px solid #d4e7f7!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:hidden!important;
}
.run-dock button,
.run-dock .secondary{
  min-width:0!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 10px!important;
  border-radius:13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:none!important;
  border:1px solid #c7def5!important;
  background:#eef8ff!important;
  color:var(--v55-ink)!important;
}
.run-dock .big-run,
#runBtn{
  background:linear-gradient(180deg,#086fb6,#004E92)!important;
  color:#fff!important;
  border-color:#004E92!important;
  font-size:15px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  box-shadow:0 5px 12px rgba(0,78,146,.18)!important;
}
#runBtn svg,#runBtn i{width:17px!important;height:17px!important;color:#fff!important;stroke-width:3!important;}
/* Blockly panel: remove leftover note clutter from the header. */
.workspace-head{height:42px!important;min-height:42px!important;padding:7px 10px!important;border-radius:16px!important;background:#f8fcff!important;border:1px solid #d8e8f7!important;}
.workspace-note{display:none!important;}
.capacityBubble,#capacityBubble{font-size:12px!important;height:28px!important;min-height:28px!important;border-radius:999px!important;}
/* Sign-in: make the local Start button visually obvious. */
.local-name-row{display:grid!important;grid-template-columns:minmax(0,1fr) 96px!important;gap:8px!important;align-items:center!important;}
#localSignInBtn{height:40px!important;border-radius:14px!important;background:var(--v55-blue)!important;color:white!important;font-weight:1000!important;}
/* Small screens: don't require browser zoom. */
@media(max-height:760px) and (min-width:900px){
  .topbar{min-height:60px!important;max-height:66px!important;}
  .brand img{width:42px!important;height:42px!important;}
  .focus-toggle-float{top:66px!important;}
  .left-panel{grid-template-rows:28px minmax(240px,1fr) 44px!important;}
  .run-dock{height:44px!important;min-height:44px!important;}
  .run-dock button{height:36px!important;min-height:36px!important;font-size:12px!important;}
  .visualization{min-height:240px!important;}
}