:root {
  --brand: #4c3fd1; --brand-d: #3a2fb0; --accent: #ffab19; --blue: #4c97ff;
  --bg: #e9eef6; --panel: #fff; --ink: #575e75; --line: #d9e0ee; --sel: #d6e4ff;
  --stage-w: 480px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); display: flex; flex-direction: column; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- topo ---------- */
#top { display: flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; padding: 0 12px; height: 48px; flex: none; padding-top: env(safe-area-inset-top); }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.3px; margin-right: 6px; }
.brand b { color: var(--accent); }
.menus { display: flex; gap: 2px; }
.menu { position: relative; }
.mbtn { background: transparent; border: 0; color: #fff; padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.mbtn:hover, .mbtn:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.drop { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; color: var(--ink); border-radius: 8px; box-shadow: 0 8px 28px rgba(20, 20, 60, .28); padding: 6px; z-index: 50; }
.drop.up { top: auto; bottom: 100%; left: auto; right: 0; margin-bottom: 6px; }
.drop button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 5px; }
.drop button:hover, .drop button:focus-visible { background: var(--sel); outline: none; }
.drop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.drop .desc { display: block; font-size: 12px; opacity: .7; font-weight: 400; }
#projName { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 6px; padding: 5px 10px; width: 200px; margin-left: auto; }
#projName::placeholder { color: rgba(255, 255, 255, .6); }
#saved { font-size: 12px; opacity: .8; min-width: 70px; }

/* ---------- layout ---------- */
#main { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
#editor { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(40, 50, 90, .12); }
#side { width: calc(var(--stage-w) + 4px); display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: none; position: relative; }
#side.small { --stage-w: 240px; }
.tabs { display: flex; gap: 2px; background: #f3f6fb; border-bottom: 1px solid var(--line); padding: 6px 6px 0; }
.tab { border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 7px 14px; border-radius: 8px 8px 0 0; font-weight: 600; white-space: nowrap; }
.tab.on { background: #fff; border-color: var(--line); color: var(--brand); box-shadow: 0 2px 0 #fff; }
.pane { flex: 1; min-height: 0; position: relative; }
#blockly { position: absolute; inset: 0; }

/* ---------- palco ---------- */
#stageWrap { background: var(--panel); border-radius: 10px; padding: 6px; box-shadow: 0 1px 3px rgba(40, 50, 90, .12); }
#stageWrap:fullscreen { background: #111; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.stagebar { display: flex; align-items: center; gap: 6px; padding: 0 2px 6px; }
.stagebar button { border: 1px solid var(--line); background: #fff; border-radius: 8px; height: 32px; padding: 0 10px; font-size: 16px; line-height: 1; }
.stagebar .flag { color: #2c9b2c; } .stagebar .stop { color: #d33; }
.stagebar .chip { font-size: 13px; font-weight: 600; } .stagebar .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.stagebar button:hover { background: var(--sel); }
.stagebar .flag.on { background: #d8f5d8; border-color: #86d686; }
.grow { flex: 1; }
#stage { border: 2px solid var(--line); border-radius: 6px; }
.coords { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 2px 0; opacity: .75; font-variant-numeric: tabular-nums; }
#errbar { margin-top: 6px; background: #fff0f0; border: 1px solid #f2a0a0; color: #a02020; border-radius: 6px; padding: 6px 10px; font-size: 12px; }

#spriteInfo { background: var(--panel); border-radius: 10px; padding: 8px 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; box-shadow: 0 1px 3px rgba(40, 50, 90, .12); font-size: 12px; }
#spriteInfo label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; min-width: 0; }
#spriteInfo label.wide { grid-column: span 2; }
#spriteInfo input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0; }
#spriteInfo input:not([type=checkbox]), #spriteInfo select, .asset-name input { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: #fff; min-width: 0; width: 100%; }
#spName { grid-column: span 2; }
#spriteInfo label:first-child { grid-column: span 2; }

#targets { flex: 1; min-height: 120px; display: flex; gap: 8px; background: var(--panel); border-radius: 10px; padding: 8px; box-shadow: 0 1px 3px rgba(40, 50, 90, .12); overflow: hidden; }
#spriteList { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); grid-auto-rows: 82px; gap: 8px; overflow-y: auto; align-content: start; padding: 2px; }
.thumb { position: relative; border: 2px solid var(--line); border-radius: 8px; background: #f7f9fd; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; cursor: pointer; overflow: hidden; }
.thumb:hover { border-color: #b6c6e6; }
.thumb.sel { border-color: var(--blue); background: var(--sel); }
.thumb img { max-width: 100%; max-height: 52px; object-fit: contain; pointer-events: none; }
.thumb .nm { font-size: 11px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.thumb .x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #ff6680; color: #fff; font-size: 11px; line-height: 18px; padding: 0; display: none; }
.thumb .dup { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; font-size: 11px; line-height: 18px; padding: 0; display: none; }
.thumb.sel .x, .thumb.sel .dup { display: block; }
.stagepick { width: 76px; flex: none; text-align: center; border-left: 1px solid var(--line); padding-left: 8px; }
.stage-thumb { height: 66px; }
.stage-lbl { font-size: 12px; font-weight: 700; margin-top: 4px; }
#addMenuWrap { position: absolute; right: 100px; bottom: 14px; }
.fab { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font-size: 26px; line-height: 1; box-shadow: 0 3px 8px rgba(30, 20, 100, .4); }
.fab:hover { background: var(--brand-d); }

/* ---------- fantasias e sons ---------- */
.asset-pane { display: flex; }
.asset-pane[hidden] { display: none; }
.asset-list { width: 140px; flex: none; background: #f3f6fb; border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.asset-list .thumb { height: 92px; flex: none; }
.asset-list .thumb .num { position: absolute; top: 2px; left: 4px; font-size: 11px; font-weight: 700; opacity: .6; }
.asset-list .thumb .x { display: none; } .asset-list .thumb.sel .x { display: block; }
.asset-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px; gap: 10px; }
.asset-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-tools button, .primary, .btn { border: 1px solid var(--line); background: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.asset-tools button:hover, .btn:hover { background: var(--sel); }
.primary { background: var(--brand); color: #fff; border-color: var(--brand); } .primary:hover { background: var(--brand-d); }
.asset-preview { flex: 1; min-height: 120px; border: 1px dashed var(--line); border-radius: 8px; background: repeating-conic-gradient(#f3f6fb 0 25%, #fff 0 50%) 0 0 / 20px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.asset-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sound-prev { flex-direction: column; gap: 10px; background: #fff; }
#soundBig { font-size: 64px; }
.asset-name { display: flex; align-items: center; gap: 8px; font-weight: 600; max-width: 320px; }
.js-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f3f6fb; border-bottom: 1px solid var(--line); }
.js-bar span { flex: 1; } .js-bar button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 10px; }
#pane-js { display: flex; flex-direction: column; } #pane-js[hidden] { display: none; }
#jsOut { flex: 1; margin: 0; padding: 12px 16px; overflow: auto; background: #1e2235; color: #dfe6ff; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }

/* ---------- modal ---------- */
#modalRoot .back { position: fixed; inset: 0; background: rgba(20, 20, 50, .5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 12px; }
.modal { background: #fff; border-radius: 12px; max-width: 760px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 14px 50px rgba(0, 0, 0, .4); }
.modal.wide { max-width: 940px; }
.modal h2 { margin: 0; padding: 14px 18px; background: var(--brand); color: #fff; border-radius: 12px 12px 0 0; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.modal h2 button { background: none; border: 0; color: #fff; font-size: 20px; }
.modal .body { padding: 16px 18px; overflow: auto; flex: 1; }
.modal .foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.modal label.f { display: block; font-weight: 600; margin-bottom: 10px; }
.modal input[type=text], .modal select { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
.modal .lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.modal .lib button { border: 2px solid var(--line); background: #f7f9fd; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 100px; justify-content: center; }
.modal .lib button:hover { border-color: var(--blue); background: var(--sel); }
.modal .lib img { max-width: 96px; max-height: 70px; object-fit: contain; }
.modal .lib span { font-weight: 600; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip2 { background: #ffe0e6; border: 1px solid #f5a8b8; border-radius: 14px; padding: 2px 4px 2px 10px; display: inline-flex; gap: 6px; align-items: center; }
.chip2 button { border: 0; background: none; color: #c03; padding: 0 4px; }
.row { display: flex; gap: 8px; }
.help h3 { margin: 18px 0 4px; color: var(--brand); } .help p, .help li { margin: 4px 0; } .help kbd { background: #eef1f8; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 12px; }

/* paint */
.paint { display: flex; gap: 12px; flex-wrap: wrap; }
.paint .tools { display: flex; flex-direction: column; gap: 6px; width: 120px; }
.paint .tools button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 8px; text-align: left; }
.paint .tools button.on { background: var(--sel); border-color: var(--blue); }
.paint canvas { border: 1px solid var(--line); background: repeating-conic-gradient(#f0f3fa 0 25%, #fff 0 50%) 0 0 / 16px 16px; touch-action: none; max-width: 100%; cursor: crosshair; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.swatches button { height: 22px; padding: 0; border-radius: 4px; border: 2px solid transparent; } .swatches button.on { border-color: #000; }

#bubble { position: fixed; z-index: 90; background: #fff; border: 2px solid var(--blue); border-radius: 12px; padding: 4px 12px; font-weight: 700; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); pointer-events: none; max-width: 260px; word-break: break-word; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #2b2f4a; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 120; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }

/* ---------- Blockly: toolbox à la Scratch ---------- */
.blocklyToolboxDiv { background: #fff !important; border-right: 1px solid var(--line); padding: 0 !important; width: 74px !important; }
.blocklyToolboxCategoryGroup { margin: 0; }
.blocklyToolboxCategory { margin: 0 !important; padding: 0 !important; height: auto !important; }
.blocklyTreeRow { height: auto !important; margin: 0 !important; padding: 6px 0 !important; border: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.blocklyTreeRow:hover { background: #f3f6fb; }
.blocklyToolboxCategory.blocklyToolboxSelected .blocklyTreeRow, .blocklyTreeSelected { background: #e6efff !important; }
.blocklyTreeRowContentContainer { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.blocklyTreeRowContentContainer::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--cc, #aaa); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12); }
.blocklyToolboxCategoryLabel, .blocklyTreeLabel { font-size: 10.5px !important; font-weight: 700; color: var(--ink) !important; margin: 0 !important; line-height: 1.1; padding: 0 2px; }
.blocklyToolboxCategoryIcon { display: none !important; }
.blocklyToolboxCategoryContainer { padding: 0 !important; }
.blocklyFlyoutBackground { fill: #f9f9f9 !important; fill-opacity: 1 !important; }
.blocklyFlyoutButton .blocklyText { font-weight: 700; }
.blocklyMainBackground { fill: #fff; }

/* ---------- celular / tablet ---------- */
@media (max-width: 980px) {
  :root { --stage-w: 320px; }
  #main { flex-direction: column-reverse; overflow: auto; }
  #editor { min-height: 460px; flex: none; height: 62vh; }
  #side { width: 100%; flex-direction: row; flex-wrap: wrap; }
  #stageWrap { width: calc(var(--stage-w) + 16px); max-width: 100%; }
  #spriteInfo { flex: 1; min-width: 240px; }
  #targets { flex-basis: 100%; }
  #projName { width: 120px; }
  .brand span { display: none; }
  #saved { display: none; }
}
@media (max-width: 560px) {
  :root { --stage-w: 100%; }
  #side { flex-direction: column; }
  #stageWrap { width: 100%; }
  .mbtn { padding: 8px 8px; }
}

/* ---------- brilho, lições, barra de ferramentas ---------- */
.blocklySvg .bl-glow { filter: drop-shadow(0 0 5px #ffe566) drop-shadow(0 0 2px #fff7b0); }
.tbtn { border: 1px solid transparent; background: transparent; border-radius: 8px; width: 34px; height: 32px; font-size: 17px; align-self: center; margin-bottom: 4px; }
.tbtn:hover { background: var(--sel); border-color: var(--line); }
.tabs .grow { flex: 1; }
#lesson { position: absolute; right: 14px; bottom: 14px; width: min(360px, calc(100% - 28px)); max-height: 70%; overflow: auto; background: #fff; border: 2px solid var(--brand); border-radius: 14px; box-shadow: 0 8px 30px rgba(30, 20, 100, .35); z-index: 20; padding: 10px 12px 12px; }
#lesson .lhead { display: flex; align-items: center; gap: 8px; color: var(--brand); }
#lesson .lhead b { flex: 1; font-size: 15px; }
#lesson .lhead span { font-size: 11px; opacity: .7; }
#lesson .lhead button { border: 0; background: none; font-size: 16px; opacity: .6; }
#lesson .lbar { height: 5px; border-radius: 3px; background: #e6e9f5; margin: 6px 0 8px; overflow: hidden; }
#lesson .lbar i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
#lBody { line-height: 1.5; font-size: 14px; }
#lBody b { color: #1f2a6b; }
.lok { margin-top: 8px; padding: 6px 10px; background: #e1f7e1; border: 1px solid #86d686; border-radius: 8px; color: #1f6b1f; font-weight: 700; }
#lHint { margin-top: 8px; padding: 6px 10px; background: #fff6d6; border: 1px solid #f0d26a; border-radius: 8px; font-size: 13px; }
.lfoot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.lfoot .btn, .lfoot .primary { padding: 5px 10px; font-size: 13px; }
#lNext.wait { opacity: .45; }
.modal .lib small { font-weight: 400; opacity: .7; text-align: center; }
.drop .desc { max-width: 300px; white-space: normal; }
@media (max-width: 980px) { #lesson { left: 8px; right: 8px; bottom: 8px; width: auto; } }