:root{
  --bg:#f4f7ff;
  --panel:#ffffff;
  --surface:#ffffff;
  --workspace:#ffffff;
  --text:#151b2d;
  --muted:#64748b;
  --line:#d9e3f2;
  --purple:#6f3cc3;
  --purple-dark:#53289b;
  --purple-soft:#efe7ff;
  --cyan:#00b7d8;
  --cyan-soft:#e6fbff;
  --green:#17a66a;
  --danger:#e5484d;
  --warn:#e89b15;
  --shadow:0 18px 45px rgba(32,27,69,.12);
  --tile-radius:0px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;color:var(--text);background:radial-gradient(circle at top left,rgba(0,183,216,.12),transparent 32%),radial-gradient(circle at bottom right,rgba(111,60,195,.12),transparent 34%),linear-gradient(135deg,#f7fbff,#fff 48%,#f5efff)}
body{overflow:hidden}
button,input{font:inherit}
button{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;padding:.62rem .88rem;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;font-weight:850}
button:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(111,60,195,.11)}
button.primary{background:linear-gradient(135deg,var(--purple),#8257e8);border-color:transparent;color:#fff;box-shadow:0 12px 25px rgba(111,60,195,.24)}
button.primary:hover{background:linear-gradient(135deg,var(--purple-dark),var(--purple))}
button.secondary{background:#f9fbff;border-color:#d9e6f6}
button.danger{background:#fff1f2;border-color:#fecdd3;color:#b91c1c}
button.small{padding:.38rem .58rem;border-radius:12px;font-size:.9rem}
input{border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;width:100%;background:#fff;color:var(--text)}
.hidden{display:none!important}.wrap{flex-wrap:wrap}.eyebrow{margin:0;color:var(--purple);text-transform:uppercase;letter-spacing:.08em;font-size:.73rem;font-weight:950}.center{justify-content:center!important}

.topbar{height:86px;display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.55rem .9rem;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);position:relative;z-index:30}
.brand{height:70px;width:90px;display:grid;place-items:center;overflow:hidden}
.brand img{width:84px;height:64px;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 22px rgba(111,60,195,.16))}
.logo{display:none}
.lesson-level-cluster{min-width:0;display:grid;grid-template-rows:34px 34px;gap:.32rem;align-content:center}
.lesson-chooser{width:100%;text-align:left;background:linear-gradient(135deg,#fbfdff,#f5f0ff);border-color:#d9cdf6;display:flex;align-items:center;gap:.65rem;padding:.42rem .68rem;min-height:34px}
.lesson-chooser span{font-size:.68rem;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;white-space:nowrap}
.lesson-chooser strong{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.level-row{min-width:0;height:34px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.4rem;padding:0;background:transparent;border:0;position:relative;z-index:25}
.level-strip{display:flex;gap:.36rem;overflow-x:auto;scrollbar-width:thin;padding:.05rem .1rem .18rem;align-items:center}
.level-chip{min-width:32px;height:28px;border-radius:11px;padding:0;display:grid;place-items:center;position:relative;font-size:.84rem;background:#f8fbff}
.level-chip.active{background:linear-gradient(135deg,var(--purple),var(--cyan));border-color:transparent;color:#fff}
.level-chip.done{border-color:#b5efe5;background:#f0fffb;color:#0f766e}
.level-chip.done::after{content:'★';position:absolute;right:-5px;top:-7px;background:var(--cyan);color:#fff;width:15px;height:15px;border-radius:999px;font-size:.58rem;display:grid;place-items:center;box-shadow:0 4px 8px rgba(0,183,216,.25)}
.level-chip.active.done{color:#fff}
.user-area{display:flex;align-items:center;gap:.5rem;margin-left:auto;white-space:nowrap}.avatar-btn{width:42px;height:42px;padding:0;border-radius:16px;background:var(--cyan-soft);font-size:1.25rem}

.game-shell{height:calc(100dvh - 86px);display:grid;grid-template-columns:minmax(500px,620px) minmax(0,1fr);gap:.8rem;padding:.75rem;background:rgba(244,247,255,.5);overflow:hidden}
.left-panel{min-height:0;display:grid;grid-template-rows:auto minmax(260px,1fr) auto auto;gap:.52rem;overflow:hidden;padding-bottom:.1rem}
.right-panel{min-height:0;background:#fff;border:1px solid #ccd9ef;border-radius:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.mission-bar{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:.45rem .55rem;box-shadow:0 10px 28px rgba(32,27,69,.08);flex-shrink:0;min-height:44px;overflow:hidden}
.mission-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .58rem;border-radius:999px;background:#f8fbff;border:1px solid #d7e5fb;font-size:.84rem;font-weight:900;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lesson-chip{color:var(--purple);background:#f5efff;border-color:#d9cdf6;max-width:150px}
.level-chip-title{background:#eefdff;border-color:#c6f4ff;color:#0e7490;max-width:210px}
.mission-goals{display:flex;gap:.35rem;flex-wrap:nowrap;justify-content:flex-start;min-width:0;overflow-x:auto;scrollbar-width:thin;flex:1;padding-bottom:.05rem}
.goal-pill{display:inline-flex;align-items:center;gap:.32rem;padding:.36rem .52rem;border-radius:999px;background:#fbfdff;border:1px solid #d7e5fb;font-size:.8rem;font-weight:850;white-space:nowrap}
.goal-pill strong{color:var(--purple)}.goal-paper-icon,.paper-trash-mini{width:20px;height:20px;display:inline-block;vertical-align:middle}
.visualization{position:relative;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #cfdcf0;border-radius:22px;box-shadow:0 16px 34px rgba(32,27,69,.10);padding:.52rem;display:grid;place-items:center;min-height:0;overflow:hidden}
.visualization::before{content:"";position:absolute;inset:10px;border-radius:18px;background:radial-gradient(circle at top left,rgba(0,183,216,.10),transparent 35%),radial-gradient(circle at bottom right,rgba(111,60,195,.10),transparent 34%);pointer-events:none}
#svgMaze{width:100%;height:100%;max-height:100%;position:relative;z-index:1}
#capacityBubble{z-index:2;position:absolute;left:16px;bottom:14px;background:rgba(16,24,39,.84);color:#fff;padding:.5rem .75rem;border-radius:999px;font-weight:850;font-size:.82rem}.win-banner{display:none}
.run-dock{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:.45rem;background:rgba(255,255,255,.97);border:1px solid #d7e3f5;border-radius:18px;padding:.5rem;box-shadow:0 16px 32px rgba(32,27,69,.12);position:sticky;bottom:0;z-index:18;flex-shrink:0}.run-dock button{min-height:40px;white-space:nowrap}.big-run{font-size:1rem;letter-spacing:.01em}
.feedback{background:#fff;border:1px solid var(--line);border-radius:15px;padding:.58rem .72rem;color:var(--muted);box-shadow:0 12px 24px rgba(32,27,69,.07);min-height:38px;font-size:.9rem;flex-shrink:0;line-height:1.25}.feedback.good{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.feedback.bad{background:#fff1f2;border-color:#fecdd3;color:#b91c1c}.feedback.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.workspace-head{display:flex;justify-content:space-between;align-items:center;padding:.6rem .85rem;border-bottom:1px solid var(--line);background:#fbfdff;flex-shrink:0}.workspace-head h2{font-size:.96rem;margin:.08rem 0 0}.workspace-note{color:#38618c;font-size:.78rem;font-weight:800;background:#f0f7ff;padding:.4rem .58rem;border-radius:999px;border:1px solid #d5e6fb}#blocklyArea{position:relative;flex:1;min-height:0;background:#fff;border-top:1px solid #e4edf9}#blocklyDiv{position:absolute;inset:0}.blocklyMainBackground{stroke:#d3e0f2!important;fill:#fff!important}.blocklyToolboxDiv{background:#f2f7ff!important;color:#151b2d!important;border-right:1px solid #cfe0f5!important;box-shadow:inset -1px 0 0 #e0eafd}.blocklyFlyoutBackground{fill:#edf5ff!important;fill-opacity:1!important}.blocklyWorkspace{background:#fff!important}.blocklyGridPattern line{stroke:#dce8f7!important}.blocklyText{font-family:Inter,system-ui,sans-serif!important;font-weight:750!important}.blocklyFlyout .blocklyBlockCanvas .blocklyPath,.blocklyWorkspace .blocklyBlockCanvas .blocklyPath{filter:drop-shadow(0 4px 6px rgba(32,27,69,.16))}.blocklySelected>.blocklyPath{stroke:var(--cyan)!important;stroke-width:3px!important}.blocklyInsertionMarker>.blocklyPath{fill:var(--cyan)!important;fill-opacity:.25!important;stroke:var(--cyan)!important;stroke-width:2!important}.blocklyTrash image{display:none!important}.mabni-trash-art{pointer-events:none}
.player-token{transition:transform .34s cubic-bezier(.2,.8,.2,1);will-change:transform}.player-token.crash{animation:shake .26s ease}.tile{transition:fill .24s ease,stroke .24s ease}.tile.trail{fill:#e3f8ff!important}.tile.task-done{fill:#f4eaff!important}.board-item{transition:opacity .2s ease}.trail{opacity:.34}.error-pulse{animation:errorPulse .7s ease forwards}@keyframes shake{0%,100%{filter:none}25%{filter:drop-shadow(-5px 0 0 rgba(229,72,77,.38))}75%{filter:drop-shadow(5px 0 0 rgba(229,72,77,.38))}}@keyframes errorPulse{0%{opacity:.9;stroke-width:4;r:12}100%{opacity:0;stroke-width:1;r:34}}
.dialog{border:none;border-radius:24px;padding:0;background:transparent;max-width:92vw}.dialog::backdrop{background:rgba(15,23,42,.38);backdrop-filter:blur(5px)}.dialog-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.2rem;box-shadow:var(--shadow);width:min(520px,92vw)}.dialog.wide .dialog-card{width:min(960px,92vw)}.dialog h2{margin:.1rem 0 .45rem}.dialog p{color:var(--muted);margin:.2rem 0 1rem;line-height:1.45}.dialog label{font-weight:900;font-size:.9rem;display:block;margin:.3rem 0}.dialog-actions{display:flex;gap:.55rem;justify-content:flex-end;margin-top:1rem}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.complete-card{text-align:center;position:relative;overflow:hidden}.complete-card::before{content:"";position:absolute;inset:auto -20% -45% -20%;height:170px;background:radial-gradient(circle,rgba(0,183,216,.15),transparent 62%);pointer-events:none}.completion-mark{width:86px;height:86px;margin:0 auto .8rem;border-radius:30px;background:linear-gradient(135deg,var(--purple),var(--cyan));display:grid;place-items:center;box-shadow:0 20px 40px rgba(111,60,195,.22);transform:rotate(8deg)}.completion-mark span{width:38px;height:38px;background:#fff;clip-path:polygon(50% 0%,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%)}.completion-stars{display:flex;justify-content:center;gap:.32rem;margin:.5rem 0 .4rem}.completion-stars span{width:24px;height:24px;background:linear-gradient(135deg,var(--cyan),var(--purple));clip-path:polygon(50% 0%,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%)}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}.lesson-card-btn{text-align:left;border-radius:20px;padding:1rem;background:#f8fbff}.lesson-card-btn.active{background:#f4efff;border-color:#cab8f0}.lesson-card-btn strong{display:block;font-size:1rem;margin:.25rem 0}.lesson-card-btn span{color:var(--muted);font-size:.9rem;line-height:1.35}.lesson-card-btn .mini-progress{margin-top:.55rem;color:var(--purple);font-size:.85rem;font-weight:900}.custom-preview{display:grid;grid-template-columns:92px minmax(0,1fr);gap:1rem;align-items:center;background:#f8fbff;border:1px solid var(--line);border-radius:20px;padding:.9rem;margin-bottom:1rem}.preview-tile{height:76px;border-radius:22px;background:linear-gradient(135deg,#e6fbff,#efe7ff);display:grid;place-items:center;font-size:2.4rem;border:1px solid #cbd5e1}.custom-preview p{margin:.25rem 0 0}.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:.5rem}.choice{height:48px;padding:.4rem;border-radius:16px;background:#f8fbff;font-size:1.25rem}.choice.active{outline:3px solid var(--cyan);border-color:transparent;background:#effcff}.colors .choice{font-size:0}.teacher-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.summary-card{background:#f8fbff;border:1px solid var(--line);border-radius:18px;padding:.9rem}.summary-card strong{display:block;font-size:1.25rem;color:var(--purple);overflow:hidden;text-overflow:ellipsis}.summary-card span{color:var(--muted);font-size:.88rem}.import-label{display:inline-flex;align-items:center;justify-content:center;padding:.68rem .95rem;border:1px solid var(--line);border-radius:14px;background:#f8fbff;cursor:pointer;font-weight:900}.import-label input{display:none}
@media (max-width:1100px){body{overflow:auto}.topbar{height:auto;grid-template-columns:76px minmax(0,1fr);align-items:start}.brand{height:58px;width:72px}.brand img{width:70px;height:54px}.lesson-level-cluster{grid-column:2}.user-area{grid-column:1 / -1;justify-content:flex-start}.game-shell{height:auto;grid-template-columns:1fr;overflow:visible}.left-panel{overflow:visible}.visualization{height:min(62vh,480px);min-height:340px}.right-panel{height:620px}.run-dock{grid-template-columns:1fr 1fr;position:sticky;bottom:0}.custom-grid{grid-template-columns:1fr}}
@media (max-width:640px){.mission-bar{align-items:flex-start;flex-wrap:wrap}.mission-goals{justify-content:flex-start;max-width:none;width:100%}.run-dock{grid-template-columns:1fr}.right-panel{height:560px}.lesson-level-cluster{grid-column:1 / -1}.topbar{grid-template-columns:1fr}.brand{width:100%;justify-content:start}.brand img{margin-right:auto}.user-area{width:100%;justify-content:flex-start}}


/* v12: sharper Mabni interface + night mode */
:root{--corner:0px}
button,input,.topbar,.lesson-chooser,.level-chip,.avatar-btn,.right-panel,.mission-bar,.mission-chip,.goal-pill,.visualization,#capacityBubble,.run-dock,.feedback,.workspace-note,.dialog,.dialog-card,.completion-mark,.lesson-card-btn,.custom-preview,.preview-tile,.choice,.summary-card,.import-label{border-radius:0!important}
.lesson-chooser span{display:none!important}
.lesson-chooser{background:linear-gradient(135deg,#ffffff,#f7f3ff);border-left:4px solid var(--purple);}
.lesson-chooser strong{font-size:1rem;letter-spacing:.01em}
.choice-grid.colors .choice span{border-radius:0!important}
#svgMaze rect{rx:0!important}
html[data-theme="night"]{color-scheme:dark;--bg:#090b16;--panel:#101426;--surface:#11182d;--workspace:#0b1020;--text:#eef6ff;--muted:#9badc9;--line:#263653;--purple:#8a4dff;--purple-dark:#6f3cc3;--purple-soft:#1a1331;--cyan:#00d7ff;--cyan-soft:#072a35;--green:#2ee696;--danger:#ff5b68;--warn:#ffc857;--shadow:0 18px 45px rgba(0,0,0,.42)}
html[data-theme="night"] body{background:radial-gradient(circle at top left,rgba(0,215,255,.16),transparent 32%),radial-gradient(circle at bottom right,rgba(138,77,255,.18),transparent 34%),linear-gradient(135deg,#070a13,#0b1020 48%,#130d25);color:var(--text)}
html[data-theme="night"] .topbar,html[data-theme="night"] .mission-bar,html[data-theme="night"] .feedback,html[data-theme="night"] .dialog-card{background:rgba(16,20,38,.96);border-color:var(--line);color:var(--text)}
html[data-theme="night"] .game-shell{background:rgba(9,11,22,.92)}
html[data-theme="night"] button{background:#11182d;color:var(--text);border-color:#263653}
html[data-theme="night"] button.secondary{background:#11182d;border-color:#2a3a59;color:#eaf6ff}
html[data-theme="night"] button.primary{background:linear-gradient(135deg,var(--purple),var(--cyan));color:#06101d}
html[data-theme="night"] .lesson-chooser{background:linear-gradient(135deg,#11182d,#1a1331);border-color:#34265d;border-left-color:var(--cyan)}
html[data-theme="night"] .level-chip{background:#11182d;color:#dbeafe;border-color:#2a3a59}
html[data-theme="night"] .level-chip.active{background:linear-gradient(135deg,var(--purple),var(--cyan));color:#06101d}
html[data-theme="night"] .level-chip.done{background:#0a2724;color:#79f3e3;border-color:#155e63}
html[data-theme="night"] .right-panel,html[data-theme="night"] .visualization{background:#0c1224;border-color:#263653}
html[data-theme="night"] .visualization::before{background:radial-gradient(circle at top left,rgba(0,215,255,.18),transparent 36%),radial-gradient(circle at bottom right,rgba(138,77,255,.18),transparent 35%)}
html[data-theme="night"] .workspace-head{background:#101426;border-color:#263653}
html[data-theme="night"] #blocklyArea{background:#0b1020;border-color:#263653}
html[data-theme="night"] .blocklyMainBackground{stroke:#263653!important;fill:#0b1020!important}
html[data-theme="night"] .blocklyToolboxDiv{background:#0e1528!important;color:#eef6ff!important;border-right-color:#263653!important}
html[data-theme="night"] .blocklyFlyoutBackground{fill:#101a31!important}
html[data-theme="night"] .blocklyWorkspace{background:#0b1020!important}
html[data-theme="night"] .blocklyGridPattern line{stroke:#1d2b46!important}
html[data-theme="night"] .blocklyText{fill:#eef6ff!important}
html[data-theme="night"] .mission-chip,html[data-theme="night"] .goal-pill,html[data-theme="night"] .workspace-note,html[data-theme="night"] .choice,html[data-theme="night"] .summary-card,html[data-theme="night"] .lesson-card-btn{background:#11182d;border-color:#2a3a59;color:#eaf6ff}
html[data-theme="night"] .lesson-chip{background:#1a1331;color:#d9c7ff;border-color:#34265d}
html[data-theme="night"] .level-chip-title{background:#072a35;color:#9cf3ff;border-color:#14556a}
html[data-theme="night"] input{background:#0e1528;border-color:#2a3a59;color:#fff}

/* v13: star badge fix + square customization polish */
.level-strip{padding-top:.22rem!important;overflow-y:visible!important;min-height:34px!important;}
.level-chip{overflow:visible!important;}
.level-chip.done::after{
  right:1px!important;
  top:1px!important;
  width:13px!important;
  height:13px!important;
  border-radius:0!important;
  font-size:.48rem!important;
  line-height:1!important;
  box-shadow:none!important;
  outline:2px solid var(--panel);
}
.level-chip.active.done::after{outline-color:transparent;background:#ffffff;color:var(--purple)}
.choice-grid .choice,
.choice-grid.colors .choice,
.custom-grid .choice,
.custom-preview,
.preview-tile{border-radius:0!important;}
.choice-grid.colors .choice span{border-radius:0!important;}
.goal-img-icon{object-fit:contain;}
html[data-tile-style="blueprint"] .tile:not([fill="#bacce3"]){stroke-dasharray:3 3;}
html[data-tile-style="contrast"] .tile{stroke-width:3!important;}
html[data-tile-style="sharp"] .tile{filter:drop-shadow(0 2px 0 rgba(111,60,195,.12));}

/* v14: rounded customization, unclipped labels, completion color levels, movement style chooser */
.level-chip.done::after{content:none!important;display:none!important;}
.level-chip.done{font-weight:1000;color:#2b2100!important;border-color:#f2c94c!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);}
.level-chip.done.star-3{background:linear-gradient(135deg,#ffd25a,#c79216)!important;}
.level-chip.done.star-2{background:linear-gradient(135deg,rgba(255,210,90,.72),rgba(199,146,22,.62))!important;}
.level-chip.done.star-1{background:linear-gradient(135deg,rgba(255,210,90,.42),rgba(199,146,22,.34))!important;}
.level-chip.active.done{outline:3px solid var(--cyan)!important;outline-offset:2px;background:linear-gradient(135deg,#ffd25a,#c79216)!important;color:#141000!important;}
html[data-theme="night"] .level-chip.done{color:#0d0b00!important;border-color:#ffd25a!important;}
html[data-theme="night"] .level-chip.done.star-3{background:linear-gradient(135deg,#ffe08a,#d99a13)!important;}
html[data-theme="night"] .level-chip.done.star-2{background:linear-gradient(135deg,rgba(255,224,138,.78),rgba(217,154,19,.66))!important;}
html[data-theme="night"] .level-chip.done.star-1{background:linear-gradient(135deg,rgba(255,224,138,.48),rgba(217,154,19,.38))!important;}

#avatarDialog .custom-preview{border-radius:20px!important;}
#avatarDialog .preview-tile{border-radius:22px!important;}
#avatarDialog .choice-grid{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));align-items:stretch;}
#avatarDialog #tileChoices.choice-grid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));}
#avatarDialog .choice-grid .choice,
#avatarDialog .choice-grid.colors .choice,
#avatarDialog .custom-grid .choice{
  min-height:72px!important;
  height:auto!important;
  border-radius:16px!important;
  padding:.65rem .55rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  line-height:1.12!important;
  font-size:1.05rem!important;
}
#avatarDialog #characterChoices .choice,
#avatarDialog #goalChoices .choice{font-size:1.55rem!important;}
#avatarDialog .choice-grid.colors .choice{min-height:58px!important;}
#avatarDialog .choice-grid.colors .choice span{height:32px!important;border-radius:12px!important;}
#svgMaze rect.tile{rx:var(--tile-radius)!important;}
#svgMaze rect:first-child{rx:20px!important;}

.movement-choice{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:.45rem 0 .2rem;}
.movement-option{display:grid!important;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;margin:0!important;padding:.85rem;border:1px solid var(--line);border-radius:18px;background:#f8fbff;cursor:pointer;}
.movement-option input{width:auto;margin:0;accent-color:var(--purple);}
.movement-option strong{display:block;font-size:.95rem;color:var(--text);}
.movement-option small{display:block;color:var(--muted);font-weight:700;line-height:1.25;margin-top:.18rem;}
.movement-option:has(input:checked){border-color:var(--cyan);background:linear-gradient(135deg,var(--cyan-soft),var(--purple-soft));box-shadow:0 0 0 3px rgba(0,183,216,.13);}
html[data-theme="night"] .movement-option{background:#11182d;border-color:#2a3a59;}
html[data-theme="night"] .movement-option:has(input:checked){background:linear-gradient(135deg,#072a35,#1a1331);border-color:var(--cyan);}
html[data-theme="night"] .movement-option strong{color:var(--text);}
@media (max-width:640px){.movement-choice{grid-template-columns:1fr}}

/* v15: forced local sign-in, run-event block, night-mode import fix */
html[data-theme="night"] .import-label{
  background:#11182d!important;
  border-color:#2a3a59!important;
  color:#eaf6ff!important;
}
html[data-theme="night"] .import-label:hover{
  background:#17213b!important;
  color:#ffffff!important;
}
html[data-theme="night"] input[type="file"]{color:#eaf6ff!important;}
html[data-theme="night"] .custom-preview,
html[data-theme="night"] .preview-tile{
  background:#11182d!important;
  border-color:#2a3a59!important;
  color:#eaf6ff!important;
}
#capacity{white-space:nowrap;}


/* v16: maximize game area, move block counter to workspace header, stronger action animations */
.game-shell{
  grid-template-columns:minmax(520px, min(52vw, 760px)) minmax(420px,1fr)!important;
  gap:.65rem!important;
  padding:.55rem!important;
}
.left-panel{
  grid-template-rows:auto minmax(410px,1fr) auto auto!important;
  gap:.42rem!important;
}
.visualization{
  min-height:430px!important;
  padding:.4rem!important;
}
#svgMaze{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
}
.workspace-head{
  gap:.75rem!important;
  padding:.52rem .7rem!important;
}
.workspace-meta{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:220px;
}
#capacityBubble{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  background:linear-gradient(135deg,rgba(111,60,195,.12),rgba(0,183,216,.16))!important;
  color:var(--text)!important;
  border:1px solid rgba(0,183,216,.34)!important;
  padding:.42rem .58rem!important;
  font-size:.76rem!important;
  box-shadow:none!important;
  border-radius:12px!important;
  max-width:100%;
}
#capacity{white-space:normal!important;line-height:1.12;}
#blocklyArea{min-height:0!important;}
.run-dock{padding:.42rem!important;gap:.38rem!important;}
.feedback{padding:.48rem .62rem!important;min-height:34px!important;}
.movement-editor{background:#f8fbff;border:1px solid var(--line);border-radius:20px;padding:.9rem;margin-bottom:1rem;}
.movement-choice.compact{grid-template-columns:1fr 1fr;margin:.35rem 0 0;}
.movement-choice.compact .movement-option{padding:.72rem;}
html[data-theme="night"] .movement-editor{background:#11182d;border-color:#2a3a59;color:#eaf6ff;}
html[data-theme="night"] #capacityBubble{background:linear-gradient(135deg,rgba(138,77,255,.22),rgba(0,215,255,.18))!important;color:#eaf6ff!important;border-color:#285e72!important;}

.planting-spot .soil{transform-origin:center;}
.tree-grow{transform-box:fill-box;transform-origin:center bottom;animation:treeGrow .62s cubic-bezier(.2,.9,.2,1) forwards;}
.clean-bin{animation:binPop .42s ease both;}
.waste-to-bin{animation:wasteToBin .48s ease forwards;transform-box:fill-box;transform-origin:center;}
.recycle-to-bin{animation:recycleToBin .48s ease forwards;transform-box:fill-box;transform-origin:center;}
.collect-pop{animation:collectPop .5s ease forwards;transform-box:fill-box;transform-origin:center;}
.sparkle-burst{animation:sparkleBurst .72s ease forwards;transform-box:fill-box;transform-origin:center;}
@keyframes treeGrow{0%{transform:scale(.1);opacity:.2}55%{transform:scale(1.16);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes binPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes wasteToBin{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(16px,10px) rotate(40deg) scale(.15);opacity:0}}
@keyframes recycleToBin{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(14px,12px) rotate(-35deg) scale(.18);opacity:0}}
@keyframes collectPop{0%{transform:scale(1);opacity:1}60%{transform:scale(1.35);opacity:.9}100%{transform:scale(.2);opacity:0}}
@keyframes sparkleBurst{0%{transform:scale(.2);opacity:0}35%{transform:scale(1.25);opacity:1}100%{transform:scale(1.8);opacity:0}}
@media (min-width:1350px){.game-shell{grid-template-columns:minmax(620px, 48vw) minmax(520px,1fr)!important}.visualization{min-height:500px!important}}
@media (max-width:1100px){.game-shell{grid-template-columns:1fr!important}.visualization{min-height:360px!important}.workspace-meta{justify-content:flex-start}.movement-choice.compact{grid-template-columns:1fr}}


/* v17: one-line blocks header, draggable split layout, fitted playground, fixed tile-targeted action visuals */
:root{--left-col:52vw;--run-dock-h:64px;}
.game-shell{
  grid-template-columns:minmax(420px,var(--left-col)) 10px minmax(420px,1fr)!important;
  gap:.5rem!important;
  padding:.45rem!important;
}
.layout-splitter{
  width:10px;
  min-width:10px;
  cursor:col-resize;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,183,216,.28),rgba(111,60,195,.28));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);
}
.layout-splitter:hover,
body.resizing-layout .layout-splitter{background:linear-gradient(180deg,var(--cyan),var(--purple));}
body.resizing-layout{cursor:col-resize;user-select:none;}
.left-panel{
  grid-template-rows:auto minmax(240px,1fr) auto auto!important;
  gap:.36rem!important;
  overflow:hidden!important;
}
.visualization{
  min-height:0!important;
  height:100%!important;
  padding:.34rem!important;
}
#svgMaze{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
}
.run-dock{
  position:relative!important;
  bottom:auto!important;
  z-index:2!important;
  padding:.35rem!important;
  gap:.34rem!important;
  min-height:0!important;
}
.run-dock button{min-height:42px!important;padding:.48rem .62rem!important;}
.feedback{font-size:.78rem!important;min-height:28px!important;padding:.35rem .5rem!important;}
.workspace-head{
  min-height:54px!important;
  padding:.5rem .75rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.75rem!important;
}
.workspace-head>div:first-child{display:flex!important;align-items:center!important;gap:.65rem!important;min-width:0!important;}
.workspace-head .eyebrow{margin:0!important;font-size:.9rem!important;letter-spacing:.08em!important;white-space:nowrap!important;}
#workspaceTitle,#workspaceNote{display:none!important;}
.workspace-meta{margin-left:auto!important;min-width:0!important;flex-wrap:nowrap!important;justify-content:flex-end!important;}
#capacityBubble{
  white-space:nowrap!important;
  border-radius:999px!important;
  padding:.42rem .65rem!important;
  font-size:.78rem!important;
  max-width:none!important;
}
#capacity{white-space:nowrap!important;line-height:1!important;}
#blocklyArea{border-top:1px solid var(--line)!important;}
html[data-theme="night"] .layout-splitter{border-color:#263653;background:linear-gradient(180deg,rgba(0,215,255,.23),rgba(138,77,255,.26));}
html[data-theme="night"] .workspace-head{background:#101426!important;border-color:#263653!important;}
html[data-theme="night"] .workspace-head .eyebrow{color:#a989ff!important;}
html[data-theme="night"] #capacityBubble{border-radius:999px!important;}
.clean-bin-inner{animation:binPop .42s ease both;transform-box:fill-box;transform-origin:center;}
.tree-grow-inner{animation:treeGrow .62s cubic-bezier(.2,.9,.2,1) forwards;transform-box:fill-box;transform-origin:center bottom;}
.task-fade-out{transition:opacity .24s ease,filter .24s ease;opacity:0!important;filter:blur(1px);}
@media (max-width:1100px){
  .game-shell{grid-template-columns:1fr!important;}
  .layout-splitter{display:none!important;}
  .left-panel{overflow:visible!important;}
  .visualization{height:min(58vh,520px)!important;min-height:320px!important;}
  .workspace-meta{justify-content:flex-start!important;}
  #capacityBubble,#capacity{white-space:normal!important;line-height:1.12!important;}
}
/* v17 safety override: never animate an SVG group that also owns the tile translate() */
.clean-bin{animation:none!important;}
.clean-bin-inner{animation:binPop .42s ease both!important;}


/* v18: collapsible top chrome + adaptive playground sizing */
:root{
  --topbar-live-h:86px;
}
.topbar{
  transition:height .24s ease, padding .24s ease, opacity .18s ease, transform .24s ease, border-color .18s ease!important;
  will-change:height,transform,opacity;
}
.chrome-toggle{
  position:fixed;
  top:78px;
  right:16px;
  z-index:80;
  min-height:30px;
  padding:.32rem .58rem!important;
  border-radius:999px!important;
  font-size:.76rem!important;
  line-height:1!important;
  background:linear-gradient(135deg,rgba(111,60,195,.95),rgba(0,183,216,.95))!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.22)!important;
}
.chrome-toggle:hover{transform:translateY(-1px)!important;}
.game-shell{
  height:calc(100dvh - var(--topbar-live-h))!important;
  transition:height .24s ease, padding .24s ease!important;
}
body.top-collapsed{
  --topbar-live-h:0px;
}
body.top-collapsed .topbar{
  height:0!important;
  min-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border-bottom-color:transparent!important;
  opacity:0!important;
  overflow:hidden!important;
  transform:translateY(-110%)!important;
  pointer-events:none!important;
}
body.top-collapsed .chrome-toggle{
  top:8px;
  right:12px;
  background:linear-gradient(135deg,var(--cyan),var(--purple))!important;
}
body.top-collapsed .game-shell{
  height:100dvh!important;
  padding-top:2.55rem!important;
}
.visualization{
  resize:vertical;
  min-height:220px!important;
}
#svgMaze{
  contain:layout paint;
}
@media (max-width:1100px){
  :root{--topbar-live-h:0px;}
  .chrome-toggle{top:8px;right:8px;}
  body:not(.top-collapsed){--topbar-live-h:0px;}
  .topbar{position:relative!important;}
  .game-shell{height:auto!important;min-height:100dvh!important;padding-top:2.5rem!important;}
  body.top-collapsed .game-shell{height:auto!important;min-height:100dvh!important;}
}
html[data-theme="night"] .chrome-toggle{
  border-color:#263653!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34)!important;
}