* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: #e9edf5; color: #24262b; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
button { font-family: inherit; cursor: pointer; }

/* ---------- DesiLingo site header — same branding as the rest of lingodesi.com ---------- */
.dl-site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 56px; flex-shrink: 0; padding: 0 16px;
  background: rgba(255,255,255,0.97); border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 700; overflow-x: auto; white-space: nowrap;
}
.dl-site-header a { text-decoration: none; }
.dl-site-header-brand {
  display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: #0f172a;
  flex-shrink: 0;
}
.dl-site-header-brand img { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.dl-site-header-crumbs { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; }
.dl-site-header-crumbs a { padding: 6px 10px; border-radius: 8px; color: #334155; flex-shrink: 0; text-decoration: none; }
.dl-site-header-crumbs a:hover { background: rgba(28,176,246,0.08); color: #0369A1; }
.dl-site-header-crumbs .current { padding: 6px 10px; color: #0369A1; font-weight: 800; flex-shrink: 0; }
.dl-site-header-crumbs .crumb-sep { color: #94a3b8; flex-shrink: 0; }

/* ---------- Toolbar ---------- */
#toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: #1CB0F6; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  position: sticky; top: 0; z-index: 50;
}
.toolbar-brand { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.project-name-input {
  border: none; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600;
  width: 180px; background: rgba(255,255,255,0.9); color: #222;
}
.flag-btn, .stop-btn, .toolbar-btn {
  border: none; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,0.15); color: #fff; transition: transform .1s, background .15s;
}
.flag-btn { background: #59c059; }
.flag-btn:hover { background: #4aa84a; transform: scale(1.04); }
.stop-btn { background: #ff5c5c; }
.stop-btn:hover { background: #e14b4b; transform: scale(1.04); }
.toolbar-btn:hover { background: rgba(255,255,255,0.28); }
.toolbar-spacer { flex: 1; }
.project-menu-wrap { position: relative; }
.project-menu {
  position: absolute; top: 42px; right: 0; width: 220px; background: #fff; color: #222;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); overflow: hidden; z-index: 60;
}
.project-menu.hidden { display: none; }
.project-menu-empty { padding: 14px; font-size: 12px; color: #888; text-align: center; }
.project-menu-row { display: flex; border-bottom: 1px solid #eee; }
.project-menu-row button:first-child { flex: 1; text-align: left; padding: 9px 12px; border: none; background: none; font-size: 13px; }
.project-menu-row button:first-child:hover { background: #f2f4fb; }
.project-menu-delete { border: none; background: none; padding: 9px 10px; font-size: 13px; }
.project-menu-delete:hover { background: #ffecec; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #24262b; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px;
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 100; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- In-app prompt modal (replaces the browser's native prompt()) ---------- */
.cq-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 800; padding: 16px;
}
.cq-modal-card {
  background: #fff; border-radius: 16px; padding: 20px;
  width: min(340px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.cq-modal-message { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.cq-modal-input {
  width: 100%; border: 2px solid #e2e8f0; border-radius: 10px; padding: 9px 12px;
  font-size: 14px; color: #0f172a; box-sizing: border-box;
}
.cq-modal-input:focus { outline: none; border-color: #1CB0F6; }
.cq-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cq-modal-btn {
  border: none; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cq-modal-cancel { background: #f1f5f9; color: #334155; }
.cq-modal-cancel:hover { background: #e2e8f0; }
.cq-modal-ok { background: #1CB0F6; color: #fff; }
.cq-modal-ok:hover { background: #0ea5e9; }

/* ---------- Layout ---------- */
#main-layout { display: flex; flex: 1; min-height: 0; }

/* ---------- Palette ---------- */
#palette { width: 250px; background: #f4f6fb; border-right: 1px solid #d8dcea; display: flex; flex-direction: column; }
.palette-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid #d8dcea; }
.palette-tab {
  border: none; border-radius: 14px; padding: 5px 10px; font-size: 11px; font-weight: 700;
  background: #e2e6f0; color: #555;
}
.palette-tab.active { background: var(--tab-color); color: #fff; }
.palette-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.palette-chip { cursor: grab; align-self: flex-start; touch-action: none; }
.palette-action-btn {
  border: 2px dashed #59c059; background: #eafbe9; color: #2c7a2c; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; font-weight: 700; margin-bottom: 4px;
}
.palette-action-btn:hover { background: #d9f5d6; }

/* ---------- Workspace ---------- */
#workspace-wrap {
  flex: 1; position: relative; overflow: auto;
  background-color: #eef1f8;
  background-image: radial-gradient(circle, #d4daea 1px, transparent 1px);
  background-size: 22px 22px;
}
#workspace-canvas { position: relative; width: 2400px; height: 1600px; }
.root-stack { position: absolute; }
/* Slow attention pulse on a loose block the lesson wants the learner to
   drag next (see lessons.js's withFloatingBlock). Stops automatically once
   the block is attached elsewhere, since it's no longer rendered as a root. */
.root-stack-hint { animation: rootStackHintPulse 1.6s ease-in-out infinite; border-radius: 10px; }
@keyframes rootStackHintPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(28, 176, 246, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 10px rgba(28, 176, 246, 0.85)); transform: scale(1.04); }
}
.chain { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Blocks ---------- */
.block {
  --block-color: #999; --block-dark: #777;
  background: var(--block-color); color: #fff;
  border-radius: 6px; padding: 2px 4px;
  box-shadow: 0 2px 0 var(--block-dark);
  font-size: 12.5px; font-weight: 600; user-select: none;
}
.block.shape-hat { border-radius: 14px 14px 6px 6px; padding-top: 6px; }
.block.shape-cap { border-radius: 6px 6px 14px 14px; }
.block.shape-reporter { border-radius: 999px; display: inline-flex; padding: 3px 10px; }
.block.shape-boolean {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  display: inline-flex; padding: 3px 12px;
}
.block-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-height: 20px; touch-action: none; }
.block-label { white-space: nowrap; }
.block-body {
  margin: 2px 0 2px 14px;
  padding: 3px 0 3px 6px;
  border-left: 3px solid var(--block-dark);
}
.block-else-label { font-size: 11px; font-weight: 700; opacity: 0.85; margin: 2px 0 2px 4px; }
.block-bottom-bar { height: 6px; }

.input-slot { display: inline-flex; align-items: center; }
.block-field {
  border: none; border-radius: 10px; padding: 2px 6px; font-size: 12px; color: #333;
  width: 46px; text-align: center; background: #fff;
}
.input-slot.kind-text .block-field { width: 90px; text-align: left; }
.input-slot select {
  border: none; border-radius: 10px; padding: 2px 6px; font-size: 11.5px; color: #333; background: #fff;
}
.empty-slot {
  display: inline-block; min-width: 54px; min-height: 22px;
  background: rgba(255,255,255,0.25); border: 2px dashed rgba(255,255,255,0.65); border-radius: 6px;
}
.bool-slot {
  min-width: 46px; min-height: 20px; background: rgba(255,255,255,0.25);
  border: 2px dashed rgba(255,255,255,0.65);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.drop-hover { outline: 3px solid #fff26b; outline-offset: 1px; }
.ghost-block { opacity: 0.88; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35)); }

/* category colors come from CATEGORIES in blocks-core.js via inline --block-color/--block-dark */

/* ---------- Right panel: stage / sprites / costumes ---------- */
#right-panel { width: 340px; background: #fff; border-left: 1px solid #d8dcea; display: flex; flex-direction: column; overflow-y: auto; }
#stage-wrap { position: relative; padding: 10px; }
#stage-canvas { width: 100%; aspect-ratio: 480 / 360; border-radius: 10px; box-shadow: 0 0 0 1px #d8dcea; display: block; }
#stage-overlays { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; pointer-events: none; }
.say-bubble {
  position: absolute; transform: translate(-50%, -100%); background: #fff; border: 2px solid #24262b;
  border-radius: 12px; padding: 5px 10px; font-size: 11px; max-width: 140px; white-space: normal;
}
.say-bubble.think { border-radius: 50%; }
.watcher-panel { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.9); border-radius: 8px; padding: 6px 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 11px; }
.watcher-row { display: flex; gap: 8px; justify-content: space-between; }
.watcher-name { font-weight: 700; color: #555; }
.watcher-value { color: #ff8c1a; font-weight: 800; }

#sprite-panel { padding: 10px; border-top: 1px solid #eee; }
.sprite-name-input { width: 100%; border: 1px solid #d8dcea; border-radius: 8px; padding: 6px 8px; font-size: 12.5px; margin-bottom: 8px; }
.sprite-list { display: flex; gap: 8px; flex-wrap: wrap; }
.sprite-card {
  border: 2px solid #d8dcea; border-radius: 10px; background: #f7f8fc; padding: 6px 8px; text-align: center; width: 64px;
}
.sprite-card.active { border-color: #1CB0F6; background: #e0f4ff; }
.sprite-card-emoji { font-size: 22px; }
.sprite-card-name { font-size: 10px; color: #555; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sprite-add-btn { border: 2px dashed #b7bfe0; border-radius: 10px; background: #f7f8fc; padding: 10px 8px; font-size: 11px; color: #555; height: 58px; }
.sprite-add-btn.danger { border-color: #ffb3b3; color: #c23; }

#costume-panel { padding: 10px; border-top: 1px solid #eee; }
.panel-label { font-size: 11px; font-weight: 800; color: #888; letter-spacing: .5px; margin-bottom: 6px; }
.costume-list { display: flex; gap: 6px; flex-wrap: wrap; }
.costume-chip { border: 2px solid #d8dcea; border-radius: 8px; background: #f7f8fc; padding: 4px 8px; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.costume-chip.active { border-color: #1CB0F6; background: #e0f4ff; }
.costume-emoji { font-size: 16px; }
.costume-add-btn { border: 2px dashed #b7bfe0; border-radius: 8px; background: #f7f8fc; width: 32px; font-size: 14px; color: #555; }

/* ---------- Lessons ---------- */
.lessons-btn { background: #FF9933; color: #4a3a10; }
.lessons-btn:hover { background: #ffd989; }

/* ---------- Home page (world map) — mirrors Process Quest's map-body ---------- */
body.home-body {
  margin: 0; min-height: 100vh; overflow-x: hidden; overflow-y: auto; display: block;
  background: radial-gradient(ellipse at top, #1b3a5c 0%, #0c1a2e 55%, #060c18 100%);
  color: #e8ecf4;
}
#home-header { text-align: center; padding: 28px 20px 6px; }
#home-header h1 { margin: 0; font-size: 26px; }
#home-header p { color: #93a0bf; margin: 6px 0 0; font-size: 13px; }
#home-card { width: min(900px, 96vw); margin: 20px auto 10px; }
.lessons-card-sub { color: #93a0bf; font-size: 12.5px; margin: 0 0 10px; text-align: center; }
.lessons-back-btn { border: none; background: #232d45; border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 700; color: #1CB0F6; margin-right: 4px; }
.lessons-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; }
.lesson-row-target { font-size: 10.5px; color: #888; font-weight: 500; }
.lesson-row-complexity, .lesson-bar-complexity { font-size: 10px; letter-spacing: 1px; margin-left: 6px; }
.lessons-list.hidden, .lessons-map-wrap.hidden { display: none; }
#home-footer { text-align: center; padding: 10px 0 40px; display: flex; justify-content: center; gap: 12px; }
#home-footer .ghost-btn-lg {
  background: transparent; border: 1px solid #3a4a6b; color: #93a0bf; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block;
}
#home-footer .ghost-btn-lg:hover { color: #e8ecf4; border-color: #93a0bf; }

/* ---------- Lessons world map (mirrors Process Quest's world map) ---------- */
.lessons-map-wrap { position: relative; }
.lessons-map-canvas {
  position: relative; isolation: isolate; height: 560px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
    linear-gradient(180deg, #2a6f5e 0%, #163f34 60%, #0c231d 100%);
  border: 1px solid #1c3a30;
}
.lmap-cloud { position: absolute; font-size: 22px; opacity: 0.5; animation: lmapDrift 50s linear infinite; }
.lmap-c1 { top: 8%; left: -10%; }
.lmap-c2 { top: 20%; left: -30%; animation-duration: 70s; animation-delay: -15s; font-size: 16px; }
@keyframes lmapDrift { from { transform: translateX(0); } to { transform: translateX(140vw); } }
.lessons-map-hint { text-align: center; font-size: 11px; color: #999; margin-top: 6px; }

.lmap-island {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  gap: 3px; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; animation: lmapBob 4s ease-in-out infinite;
}
@keyframes lmapBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
.lmap-island-glow-wrap { position: relative; width: 60px; height: 60px; }
.lmap-island-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--isl-color, #1CB0F6) calc(var(--dwell, 0) * 1%), rgba(255,255,255,0.1) 0);
  opacity: 0; transition: opacity 0.2s;
}
.lmap-island.lmap-island-near .lmap-island-ring { opacity: 1; }
.lmap-island.lmap-island-near .lmap-island-glow { transform: scale(1.12); box-shadow: 0 0 20px 6px color-mix(in srgb, var(--isl-color, #1CB0F6) 60%, transparent); }
.lmap-island-glow {
  position: relative; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; border: 2px solid var(--isl-color, #1CB0F6);
  background: radial-gradient(circle, rgba(255,255,255,0.08), rgba(0,0,0,0.25));
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--isl-color, #1CB0F6) 50%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lmap-island-name { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.lmap-island-place { font-size: 9.5px; color: #cfd6e8; white-space: nowrap; }
.lmap-island-progress { font-size: 9.5px; color: var(--isl-color, #1CB0F6); font-weight: 700; }
.lmap-island-hint {
  position: absolute; top: -16px; font-size: 8.5px; font-weight: 700; color: var(--isl-color, #1CB0F6);
  background: rgba(10,14,24,0.85); padding: 2px 6px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none;
}
.lmap-island.lmap-island-near .lmap-island-hint { opacity: 1; }
.lmap-island.lmap-island-done .lmap-island-glow { border-color: #FF9933; box-shadow: 0 0 14px 2px rgba(255,203,107,0.6); }

.lmap-player { position: absolute; width: 52px; z-index: 6; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4)); will-change: left, top; }
.lmap-turtle-inner { transition: transform 0.15s ease; transform-origin: center bottom; }
.lmap-turtle-inner.flip { transform: scaleX(-1); }
.lmap-player:not(.walking) .lmap-turtle-inner { animation: lmapIdleSway 2.2s ease-in-out infinite; }
@keyframes lmapIdleSway { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(1.5deg); } }
.lmap-player.walking .tq-leg-left { animation: lmapLegA 0.42s linear infinite; }
.lmap-player.walking .tq-leg-right { animation: lmapLegB 0.42s linear infinite; }
.lmap-player.walking .tq-arm-left { animation: lmapLegB 0.42s linear infinite; }
.lmap-player.walking .tq-arm-back { animation: lmapLegA 0.42s linear infinite; }
@keyframes lmapLegA { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes lmapLegB { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
.lesson-row {
  display: flex; align-items: center; gap: 10px; border: 2px solid #e4e7f2; border-radius: 10px;
  background: #f9faff; padding: 8px 12px; text-align: left; font-size: 13px;
}
.lesson-row:not(:disabled):hover { border-color: #1CB0F6; background: #e0f4ff; }
.lesson-row.active { border-color: #1CB0F6; background: #e0f4ff; }
.lesson-row.done { border-color: #59c059; background: #eafbe9; }
.lesson-row.locked { opacity: 0.5; cursor: not-allowed; }
.lesson-num { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }

.lesson-bar {
  display: flex; gap: 14px; align-items: flex-start; background: #fffaf0; border-bottom: 3px solid #FF9933;
  padding: 10px 16px; position: sticky; top: 52px; z-index: 40;
}
.lesson-bar.hidden { display: none; }
.lesson-bar-glyph { font-size: 32px; }
.lesson-bar-body { flex: 1; }
.lesson-bar-title { font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.lesson-bar-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lesson-bar-target { font-size: 12.5px; font-weight: 700; color: #a35a00; background: #fff3e0; display: inline-block; padding: 2px 8px; border-radius: 6px; }
.lesson-bar-narrator { font-size: 12.5px; color: #555; margin: 6px 0; }
.lesson-bar-steps { margin: 0 0 6px 18px; padding: 0; font-size: 12px; color: #333; }
.lesson-bar-steps li { margin-bottom: 2px; }
.lesson-bar-details { margin-bottom: 6px; }
.lesson-bar-details summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: #1CB0F6;
  list-style: none; padding: 3px 0;
}
.lesson-bar-details summary::-webkit-details-marker { display: none; }
.lesson-bar-details summary::before { content: "▸ "; }
.lesson-bar-details[open] summary::before { content: "▾ "; }
.lesson-bar-feedback { font-size: 12.5px; font-weight: 700; min-height: 16px; }
.lesson-bar-feedback.ok { color: #2c7a2c; }
.lesson-bar-feedback.bad { color: #a94442; }
.lesson-bar-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.lesson-check-btn, .lesson-exit-btn, .lesson-next-btn {
  border: none; border-radius: 8px; padding: 0 12px; font-size: 13px; font-weight: 700; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px;
}
.lesson-check-btn { background: #59c059; color: #fff; }
.lesson-exit-btn { background: #eee; color: #444; }
.lesson-next-btn { background: #1CB0F6; color: #fff; }
.lesson-next-btn.hidden { display: none; }

/* ---------- Mobile: topic list instead of the walking map ---------- */
.topics-list-mobile { display: none; }
.topic-list-row {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid #e4e7f2; border-radius: 12px;
  background: #1a2436; padding: 10px 12px; margin-bottom: 8px;
  text-align: left; width: 100%; color: #e8ecf4; font-family: inherit;
}
.topic-list-row .tlr-glow {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  border: 2px solid var(--tp-color, #1CB0F6);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--tp-color, #1CB0F6) 50%, transparent);
}
.topic-list-row .tlr-body { flex: 1; min-width: 0; }
.topic-list-row .tlr-name { font-weight: 700; font-size: 13.5px; }
.topic-list-row .tlr-place { font-size: 11px; color: #93a0bf; }
.topic-list-row .tlr-progress { font-size: 11px; color: var(--tp-color, #1CB0F6); font-weight: 700; margin-top: 2px; }

/* ---------- Mobile: home/world-map page ---------- */
@media (max-width: 640px) {
  #home-header { padding: 20px 14px 4px; }
  #home-header h1 { font-size: 20px; }
  #home-header p { font-size: 12px; }
  #home-card { width: 96vw; margin: 14px auto 8px; }
  /* The walking map doesn't work well on a phone (no keyboard, tiny targets) —
     show a tappable list of the same topics instead. */
  .lessons-map-wrap { display: none; }
  .topics-list-mobile:not(.hidden) { display: block; }
  #home-footer { flex-direction: column; align-items: center; gap: 8px; padding: 8px 14px 32px; }
  #home-footer .ghost-btn-lg { width: 100%; max-width: 280px; }
  .lesson-row { flex-wrap: wrap; }
}

/* ---------- Drawer toggle + backdrop (blocks palette, mobile only) ---------- */
.drawer-toggle { display: none; }
.drawer-backdrop { display: none; }

/* ---------- Run-result popup (mobile only — see mobile-ui.js) ---------- */
.run-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 700; display: flex; align-items: center; justify-content: center; }
.run-modal.hidden { display: none; }
.run-modal-card { background: #fff; border-radius: 14px; padding: 10px; width: 92vw; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.run-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 800; font-size: 13px; color: #333; }
#run-modal-close { border: none; background: #eee; border-radius: 8px; width: 26px; height: 26px; font-size: 13px; }
#run-modal-slot #stage-wrap { padding: 0; }

/* ---------- Mobile: editor page (icon-only toolbar, blocks as a drawer, touch-friendly) ---------- */
@media (max-width: 900px) {
  #main-layout { flex-direction: column; overflow-y: auto; position: relative; }

  .drawer-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 30px; padding: 0 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,0.15); color: #fff; flex-shrink: 0; white-space: nowrap;
  }
  .drawer-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 390; }

  /* The palette becomes a slide-in drawer instead of a block at the top —
     dragging still works via Pointer Events (see workspace.js). */
  #palette {
    position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 300px;
    z-index: 400; transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3); border-right: none;
  }
  #palette.drawer-open { transform: translateX(0); }

  #right-panel { width: 100%; border-left: none; border-top: 1px solid #d8dcea; }
  #workspace-wrap { min-height: 320px; }
  .project-name-input { width: 90px; }
  .toolbar-brand span:last-child { display: none; }
  /* Icon-only action buttons — the tooltip (title attr) still carries the label. */
  .flag-btn span, .stop-btn span, .toolbar-btn span { display: none; }
  .flag-btn, .stop-btn, .toolbar-btn { padding: 7px 9px; }

  .lesson-bar { flex-wrap: wrap; top: 0; padding: 8px 16px; }
  .lesson-bar-glyph { font-size: 24px; }
  .lesson-bar-title { font-size: 12.5px; }
  .lesson-bar-meta { flex-wrap: wrap; }
  .lesson-bar-target { font-size: 11.5px; }
  .lesson-bar-actions { flex-direction: row; width: 100%; }
  .lesson-check-btn, .lesson-exit-btn, .lesson-next-btn { flex: 1; }
}