
/* MABNI v48 hotfix: clean level bubbles, recoverable focus mode, non-overlapping controls, teacher class scope. */
:root{--v48-blue:#004E92;--v48-gold:#CFA15B;--v48-cyan:#00b7d8;--v48-ink:#142033;--v48-muted:#667085;}
/* ---- Level picker: number, type and stars must never fight inside one tiny circle ---- */
#lessonDialog .mp-level-road{grid-template-columns:repeat(10,minmax(64px,1fr))!important;gap:18px 14px!important;padding:20px 4px 8px!important;align-items:start!important;}
#lessonDialog .mp-level-road::before{top:42px!important;left:38px!important;right:38px!important;}
#lessonDialog .mp-level-bubble{width:auto!important;height:auto!important;min-width:58px!important;min-height:78px!important;border-radius:18px!important;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:grid!important;grid-template-rows:52px 16px 14px!important;place-items:center!important;gap:3px!important;overflow:visible!important;color:var(--v48-ink)!important;}
#lessonDialog .mp-level-bubble .bubble-core{width:52px!important;height:52px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,#ffffff,#f4f8ff)!important;border:2px solid #d7e2f1!important;box-shadow:0 10px 20px rgba(15,23,42,.07)!important;position:relative!important;z-index:1!important;}
#lessonDialog .mp-level-bubble .bubble-core strong{font-size:1.08rem!important;line-height:1!important;font-weight:1000!important;color:var(--v48-ink)!important;}
#lessonDialog .mp-level-bubble .bubble-label{max-width:76px!important;min-height:14px!important;font-size:.58rem!important;line-height:1!important;text-align:center!important;font-weight:1000!important;text-transform:uppercase!important;letter-spacing:.02em!important;color:#596a82!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#lessonDialog .mp-level-bubble .bubble-stars{position:static!important;transform:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:14px!important;display:flex!important;gap:1px!important;align-items:center!important;justify-content:center!important;}
#lessonDialog .mp-level-bubble .kenney-star.mini{width:12px!important;height:12px!important;}
#lessonDialog .mp-level-bubble.is-active .bubble-core{background:linear-gradient(135deg,var(--purple),var(--cyan))!important;border-color:transparent!important;box-shadow:0 14px 30px rgba(111,60,195,.26),0 0 0 4px rgba(0,183,216,.14)!important;}
#lessonDialog .mp-level-bubble.is-active .bubble-core strong{color:white!important;}
#lessonDialog .mp-level-bubble.is-active .bubble-label{color:#155e75!important;}
#lessonDialog .mp-level-bubble.is-done:not(.is-active) .bubble-core{background:linear-gradient(135deg,#f6fffd,#ffffff)!important;border-color:#b8eee5!important;}
#lessonDialog .mp-level-bubble.is-starter:not(.is-active)::after,#lessonDialog .mp-level-bubble[data-kind*=debug]:not(.is-active)::after{right:13px!important;top:1px!important;z-index:3!important;}
html[data-theme="night"] #lessonDialog .mp-level-bubble .bubble-core{background:linear-gradient(135deg,#11182d,#18213a)!important;border-color:#263653!important;color:#eaf6ff!important;}
html[data-theme="night"] #lessonDialog .mp-level-bubble .bubble-core strong{color:#eaf6ff!important;}
html[data-theme="night"] #lessonDialog .mp-level-bubble .bubble-label{color:#9badc9!important;}
@media(max-width:900px){#lessonDialog .mp-level-road{grid-template-columns:repeat(5,minmax(64px,1fr))!important;}#lessonDialog .mp-level-road::before{display:none!important;}}
@media(max-width:520px){#lessonDialog .mp-level-road{grid-template-columns:repeat(3,minmax(64px,1fr))!important;}#lessonDialog .mp-level-bubble .bubble-label{font-size:.55rem!important;display:block!important;}}
/* Top level strip: keep stars below the number, not smashed into it. */
.level-strip{padding-bottom:12px!important;align-items:start!important;}
.level-chip{width:42px!important;min-width:42px!important;height:46px!important;border-radius:15px!important;display:grid!important;grid-template-rows:27px 13px!important;place-items:center!important;overflow:visible!important;padding:0!important;}
.level-chip .level-chip-num{width:30px;height:27px;display:grid;place-items:center;font-weight:1000;line-height:1;}
.level-chip .chip-stars{position:static!important;transform:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:13px!important;display:flex!important;gap:0!important;}
.level-chip .kenney-star.mini{width:10px!important;height:10px!important;}
.level-chip.done:not(.active){background:linear-gradient(135deg,#f9fffd,#ffffff)!important;border-color:#a8ece0!important;color:#0f766e!important;}
.level-chip.active{box-shadow:0 10px 22px rgba(111,60,195,.20),0 0 0 3px rgba(0,183,216,.12)!important;}
/* Focus mode must be discoverable and reversible. */
.focus-toggle-float{position:fixed;left:14px;bottom:14px;z-index:10000;border:0;border-radius:999px;padding:.72rem 1rem;font-weight:1000;background:linear-gradient(135deg,#004E92,#00b7d8);color:#fff;box-shadow:0 18px 46px rgba(0,78,146,.34);cursor:pointer;min-width:96px;}
body:not(.top-collapsed) .focus-exit-btn{display:none!important;}
body.top-collapsed .focus-toggle-float{background:linear-gradient(135deg,#CFA15B,#f59e0b);color:#201300;}
body.top-collapsed .game-shell{height:100dvh!important;min-height:100dvh!important;grid-template-columns:minmax(420px,var(--left-col,56vw)) 10px minmax(300px,1fr)!important;overflow:hidden!important;}
body.top-collapsed .left-panel{grid-template-rows:minmax(280px,1fr) auto auto!important;min-height:0!important;overflow:hidden!important;}
body.top-collapsed .visualization{height:auto!important;min-height:0!important;max-height:none!important;}
body.top-collapsed .run-dock{position:relative!important;bottom:auto!important;z-index:8!important;margin-top:0!important;box-shadow:0 12px 28px rgba(15,23,42,.10)!important;}
body.top-collapsed .feedback,body.top-collapsed .run-feedback-details{position:relative!important;z-index:7!important;}
@media(max-width:1100px){body.top-collapsed .game-shell{grid-template-columns:1fr!important;overflow:auto!important;}body.top-collapsed .left-panel{grid-template-rows:minmax(320px,52vh) auto auto!important;}.focus-toggle-float{left:12px;bottom:12px;}}
/* Teacher class-scoped dashboard */
.class-context-control{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px;box-shadow:0 8px 20px rgba(16,24,40,.06);font-size:13px;font-weight:900;color:var(--v48-ink);max-width:100%;}
.class-context-control span{white-space:nowrap;color:var(--v48-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;}
.class-context-control select{border:0;background:transparent;outline:0;font-weight:900;max-width:min(320px,46vw);color:var(--v48-ink);}
.class-scope-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid #d8e8ff;border-radius:18px;background:linear-gradient(135deg,#f8fbff,#eef8ff);color:#17324d;font-weight:900;}
.class-scope-banner .muted{font-weight:700;color:var(--v48-muted);}
.class-card.is-selected{outline:3px solid rgba(0,78,146,.18);border-color:#7cc8ff!important;}
.class-card .class-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.online-only-note{font-size:.78rem;color:var(--v48-muted);line-height:1.35;max-width:220px;}
@media(max-width:760px){.class-context-control{width:100%;border-radius:16px;align-items:flex-start;flex-direction:column}.class-context-control select{max-width:100%;width:100%;}.class-scope-banner{align-items:flex-start;flex-direction:column}.topbar .status-row{width:100%;}}
