/* =========================================================
   编程冒险岛 · 混合版 v8
   ========================================================= */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; height:100%; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#1a1333; color:#fff;
  user-select:none; -webkit-user-select:none;
}
#app {
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top);
}

/* ============ 顶部栏 ============ */
#topbar {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px;
  background:linear-gradient(180deg,#2a1f4d,#1a1333);
  border-bottom:1px solid #3d2f6b;
  gap:6px; overflow:hidden;
}
#topbar .logo {
  font-size:14px; font-weight:700; flex:0 0 auto;
  background:linear-gradient(90deg,#7ef,#b9f,#f9c);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hud { display:flex; gap:4px; flex-wrap:nowrap; overflow:hidden; }
.pill {
  background:#2e2358; border:1px solid #4a3a80;
  border-radius:20px; padding:3px 8px;
  font-size:11px; display:flex; align-items:center; gap:3px;
  white-space:nowrap;
}

/* ============ 模式切换条 ============ */
#modeBar {
  flex:0 0 auto;
  display:flex; align-items:center;
  gap:6px; padding:5px 8px;
  background:#1e1740;
  border-bottom:1px solid #3d2f6b;
}
.mode-btn {
  padding:5px 12px;
  border-radius:16px;
  border:1px solid #4a3a80;
  background:transparent;
  color:#7a6ab0;
  font-family:inherit;
  font-size:12px; font-weight:700;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.mode-btn.active {
  background:linear-gradient(135deg,#7c5cff,#5a3fd6);
  color:#fff; border-color:#7c5cff;
  box-shadow:0 2px 8px rgba(124,92,255,.4);
}
.mode-btn:disabled { opacity:.35; cursor:not-allowed; }
.mode-hint {
  font-size:11px; color:#a898e0;
  flex:1; text-align:right;
  white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}

/* ============ 主区域：游戏 + 编程 横排 ============ */
#mainRow {
  flex:1 1 auto;
  display:flex;
  flex-direction:row;
  min-height:0;
  overflow:hidden;
}

/* 游戏区 */
#stage {
  flex:1 1 auto;
  position:relative;          /* 必须有：绝对定位子元素的参照 */
  overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#2d2355 0%,#1a1333 70%);
  min-height:0;
  min-width:0;
  /* 用 flex 居中 canvasWrap，比 absolute+translate 更可靠 */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* canvas 包装盒：用 transform 缩放 */
#canvasWrap {
  position:relative;          /* 改成 relative，靠 flex 居中 */
  transform-origin:center center;
  width:0;                    /* 初始为 0，由 JS 设置实际尺寸 */
  height:0;
  flex:0 0 auto;
}
canvas { display:block; }

/* 编程区（右侧竖条） */
#coder {
  flex:0 0 auto;
  width:360px;                 /* ★ 固定 360px 宽 */
  background:#221a42;
  border-left:1px solid #3d2f6b;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  height:100%;                 /* ★ 撑满父容器高度 */
}
#coder.hidden { display:none; }

/* ============ 积木库（顶部 8 个小方块） ============ */
#palette {
  flex:0 0 auto;
  padding:5px;
  display:grid;
  grid-template-columns:repeat(8, 1fr);   /* ★ 一行 8 个 */
  gap:4px;
  border-bottom:1px solid #3d2f6b;
  background:#1e1740;
  width:100%;
  box-sizing:border-box;
}

.block {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:4px 2px;
  border:none;
  border-radius:6px;
  color:#fff;
  font-family:inherit;
  font-size:8px;
  font-weight:600;
  cursor:pointer;
  transition:transform .08s;
  box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  text-align:center;
  aspect-ratio:1 / 1;
  min-width:0;
  min-height:0;
  overflow:hidden;
  /* ★ 关键：强制显示背景色 */
  background-clip:padding-box;
}

.block:active {
  transform:translateY(2px);
  box-shadow:0 0 0 rgba(0,0,0,.35);
}

.block .ico {
  font-size:15px;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

.block .txt {
  font-size:8px;
  line-height:1;
  color:#fff;
  opacity:.95;
  font-weight:700;
  white-space:nowrap;
}

/* ★ 各类型颜色（必须带 !important 防止被覆盖） */
.block.b-motion {
  background:linear-gradient(135deg, #4a90e2, #357abd) !important;
}
.block.b-control {
  background:linear-gradient(135deg, #9b59b6, #7d3c98) !important;
}
.block.b-var {
  background:linear-gradient(135deg, #16a085, #0e7a63) !important;
}
.block.b-func {
  background:linear-gradient(135deg, #e67e22, #d35400) !important;
}

  /* ★ 1. 程序区：改为单列垂直排列，不使用网格 */
  #programArea {
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #1a1433;
    min-height: 0;
  }

  /* ★ 2. 每一行：拉伸铺满 */
  .prog-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 0 !important;
  }

  /* ★ 3. 程序条：宽度拉满，不再是一小截 */
  .prog-block {
    display: inline-flex;
    width: 100%;                 /* ★ 重点：宽度占满整行 */
    min-width: 0;
    max-width: 100%;
    min-height: 36px;            /* 高度稍微给一点 */
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
    flex: 1 1 auto;
    box-sizing: border-box;
    box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
    animation: pop .15s ease;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }
  
  .prog-block .label {
    font-size: 12px;
    flex: 1;
    text-align: left;
  }
  
  .prog-block .del {
    font-size: 14px;
    padding: 0 4px;
  }
.prog-block .del:hover,
.prog-block .del:active {
  color:#fff;
  background:rgba(255,60,60,.85);
}

/* 手机：删除按钮再大一点，方便手指点 */
@media (max-width:500px) {
  .prog-block {
    padding-right:32px;             /* 留更多空间 */
  }
  .prog-block .del {
    width:24px;
    height:24px;
    line-height:22px;
    font-size:14px;
    top:3px;
    right:4px;
  }
}


@keyframes pop { from{transform:scale(.9);opacity:0;} to{transform:scale(1);opacity:1;} }

/* ★ 程序积木各类型颜色（必须带 !important） */
.prog-block.prog-motion {
  background:linear-gradient(135deg, #4a90e2, #357abd) !important;
}
.prog-block.prog-control {
  background:linear-gradient(135deg, #9b59b6, #7d3c98) !important;
}
.prog-block.prog-var {
  background:linear-gradient(135deg, #16a085, #0e7a63) !important;
}
.prog-block.prog-func {
  background:linear-gradient(135deg, #e67e22, #d35400) !important;
}

/* 包裹区（循环内部） */
.prog-children-wrap {
  grid-column:1 / -1;
  position:relative;
  margin-left:16px;
  padding:6px 6px 6px 12px;
  border-left:4px solid #9b59b6;
  border-radius:0 0 0 8px;
  background:rgba(155,89,182,.08);
  margin-top:-2px;
  margin-bottom:4px;
  animation:wrapIn .2s ease;
}
@keyframes wrapIn {
  from{opacity:0; transform:translateX(-8px);}
  to{opacity:1; transform:translateX(0);}
}

.prog-children {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:5px;
}

.prog-children-empty {
  color:#7a6ab0;
  font-size:10px;
  font-style:italic;
  padding:8px 10px;
  border:1px dashed rgba(155,89,182,.4);
  border-radius:6px;
  background:rgba(155,89,182,.05);
  text-align:center;
}

.prog-branch-header {
  grid-column:1 / -1;
  font-size:10px;
  color:#c8b8ff;
  padding:3px 8px;
  font-weight:600;
}
.prog-branch-header.else { color:#ff9ec7; }

.func-section {
  grid-column:1 / -1;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #4a3a80;
}

#parentBar { display:none; }   /* 不再用旧样式 */

/* ============ 4 个控制按钮 ============ */
#controls {
  flex:0 0 auto;
  display:flex;
  gap:6px;
  padding:8px;
  justify-content:center;
  align-items:center;
  background:#221a42;
  border-top:1px solid #3d2f6b;
}
.ctrl-btn {
  flex:1 1 0;
  min-width:0;
  max-width:none;            /* ★ 不限制最大宽度 */
  padding:12px 4px;
  border:none; border-radius:12px;
  font-size:14px; font-weight:700;
  color:#fff; cursor:pointer;
  transition:transform .1s;
  font-family:inherit;
  white-space:nowrap;
  overflow:visible;          /* ★ 不隐藏 */
  text-overflow:clip;        /* ★ 不省略 */
  line-height:1.2;
  min-height:44px;
}
.ctrl-btn:active { transform:scale(.95); }
.ctrl-btn:disabled { opacity:.5; }
#btnRun   { background:linear-gradient(135deg,#2ecc71,#27ae60); box-shadow:0 3px 0 #1e8449; }
#btnReset { background:linear-gradient(135deg,#e67e22,#d35400); box-shadow:0 3px 0 #a04000; }
#btnHint  { background:linear-gradient(135deg,#f1c40f,#f39c12); color:#3a2a00; box-shadow:0 3px 0 #b9770e; }
#btnTools { background:linear-gradient(135deg,#9b59b6,#7d3c98); box-shadow:0 3px 0 #5b2c6f; }

/* ============ 底部导航 ============ */
#nav {
  flex:0 0 auto;
  display:flex;
  background:#221a42;
  border-top:1px solid #3d2f6b;
  padding-bottom:env(safe-area-inset-bottom);
}
#nav .nav-btn {
  flex:1; padding:8px 0 6px;
  background:none; border:none;
  color:#6a5a9a; font-size:11px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; font-family:inherit;
}
#nav .nav-btn .ico { font-size:18px; }
#nav .nav-btn.active { color:#b9a8ff; }

/* ============ 弹窗 ============ */
.overlay {
  position:absolute; inset:0;
  background:rgba(10,8,25,.85);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding:20px;
  backdrop-filter:blur(4px);
}
.overlay.show { display:flex; }
.dialog {
  background:linear-gradient(160deg,#2e2358,#1e1740);
  border:2px solid #6a5acd;
  border-radius:18px;
  padding:22px;
  max-width:380px; width:100%;
  max-height:80vh; overflow-y:auto;
  text-align:center;
  animation:dialogIn .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
@keyframes dialogIn { from{transform:scale(.7);opacity:0;} to{transform:scale(1);opacity:1;} }
.dialog h2 { font-size:20px; margin-bottom:10px; }
.dialog p { font-size:14px; color:#c8b8ff; line-height:1.7; margin-bottom:14px; }
.dialog .big-emoji { font-size:52px; display:block; margin-bottom:8px; }
.dialog button {
  background:linear-gradient(135deg,#7c5cff,#5a3fd6);
  border:none; color:#fff;
  padding:12px 28px; border-radius:12px;
  font-size:15px; font-weight:700; cursor:pointer;
  margin:4px; font-family:inherit;
  box-shadow:0 3px 0 #4a2fb8;
}
.dialog button:active { transform:translateY(2px); box-shadow:0 1px 0 #4a2fb8; }
.dialog button.ghost {
  background:transparent; border:1px solid #6a5acd; color:#b9a8ff;
  box-shadow:none;
}

/* ============ 商城按钮 ============ */
.shop-btn {
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  background: linear-gradient(135deg,#e67e22,#d35400);
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
  min-width: 72px; /* ★ 从 64px 调到 72px，确保三个字放得下 */
  text-align: center;
}

/* ============ 特效 ============ */
.confetti {
  position:absolute; pointer-events:none;
  font-size:18px;
  animation:fall 2s linear forwards;
  z-index:200;
}
@keyframes fall {
  from { transform:translateY(-20px) rotate(0); opacity:1; }
  to   { transform:translateY(400px) rotate(720deg); opacity:0; }
}

#hintLayer { position:absolute; inset:0; pointer-events:none; z-index:40; }
.hint-box {
  position:absolute;
  border:3px dashed #ffd93d;
  border-radius:10px;
  animation:breathe 1s ease-in-out infinite;
  box-shadow:0 0 20px rgba(255,217,61,.6);
}
@keyframes breathe {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(1.08); }
}

#toast {
  position:absolute; left:50%; top:12px;
  transform:translateX(-50%) translateY(-80px);
  background:rgba(20,15,40,.95);
  border:1px solid #6a5acd; color:#fff;
  font-size:13px; padding:8px 16px; border-radius:20px;
  transition:transform .3s, opacity .3s;
  opacity:0; pointer-events:none; z-index:50;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ============ 首页 ============ */
#home {
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%,#2d2355,#120e28 80%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px; z-index:60; padding:20px;
}
#home.hidden { display:none; }
#home .robot-home {
  width:120px; height:120px;
  position:relative;
  animation:float 2s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
#home h1 {
  font-size:26px; font-weight:800;
  background:linear-gradient(90deg,#7ef,#b9f,#f9c);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
#home .sub { font-size:13px; color:#a898e0; text-align:center; }
#home .start-btn {
  background:linear-gradient(135deg,#7c5cff,#5a3fd6);
  border:none; color:#fff;
  padding:14px 48px; border-radius:30px;
  font-size:17px; font-weight:800;
  cursor:pointer; font-family:inherit;
  box-shadow:0 6px 24px rgba(124,92,255,.5);
  transition:transform .15s;
}
#home .start-btn:active { transform:scale(.95); }

/* ============ 首页机器人 ============ */
.bot-body {
  position:absolute; left:50%; top:55%;
  transform:translate(-50%,-50%);
  width:70px; height:64px;
  background:#fff;
  border:3px solid #7c5cff;
  border-radius:22px;
  box-shadow:inset 0 -8px 0 rgba(124,92,255,.15);
}
.bot-eye {
  position:absolute; top:18px;
  width:16px; height:16px;
  background:#2a1f4d; border-radius:50%;
  overflow:hidden;
  transition:height .1s;
}
.bot-eye.l { left:12px; }
.bot-eye.r { right:12px; }
.bot-eye::after {
  content:''; position:absolute;
  top:2px; left:3px;
  width:6px; height:6px;
  background:#fff; border-radius:50%;
}
.bot-eye.blink { height:3px; top:25px; }
.bot-blush {
  position:absolute; top:34px;
  width:12px; height:7px;
  background:#ff9ec7; border-radius:50%;
  opacity:.8;
}
.bot-blush.l { left:8px; }
.bot-blush.r { right:8px; }
.bot-mouth {
  position:absolute; bottom:12px; left:50%;
  transform:translateX(-50%);
  width:18px; height:9px;
  border-bottom:3px solid #7c5cff;
  border-radius:0 0 18px 18px;
}
.bot-antenna {
  position:absolute; top:8px; left:50%;
  transform:translateX(-50%);
  width:3px; height:16px; background:#7c5cff;
}
.bot-antenna::after {
  content:''; position:absolute;
  top:-8px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  background:#ffd93d;
  box-shadow:0 0 10px #ffd93d;
  animation:blinkLight 1.2s ease-in-out infinite;
}
@keyframes blinkLight { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ============ 手机竖屏 ============ */
@media (max-width:600px) {

  /* ---------- 顶部栏更矮 ---------- */
  #topbar {
    padding: 3px 6px;
    min-height: 32px;
  }
  #topbar .logo { font-size: 12px; }
  .hud { gap: 3px; }
  .pill {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 14px;
  }

  /* ---------- 模式条更矮 ---------- */
  #modeBar {
    padding: 3px 6px;
    gap: 4px;
  }
  .mode-btn {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
  }
  .mode-hint { font-size: 10px; }

  /* ---------- 主区域：上下布局 ---------- */
  #mainRow { flex-direction: column; }

  /* 游戏区：自动撑开 */
  #stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* 编程区 */
  #coder {
    width: 100%;
    height: 210px;              
    border-left: none;
    border-top: 1px solid #3d2f6b;
    flex-direction: column;
  }

  /* 积木库 */
  #palette {
    grid-template-columns: repeat(8, 1fr);
    padding: 3px;
    gap: 3px;
    max-height: 56px;
  }
  .block {
    min-height: 36px;
    padding: 2px 1px;
    font-size: 8px;
  }

  /* ★★★ 核心修复：程序区改为单列 Flex 布局 ★★★ */
  #programArea {
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #1a1433;
    min-height: 0;
  }

  /* 顶层每一行 */
  .prog-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 0 !important;
  }

  /* ★ 程序积木：根据内容自适应宽度，不再被强制切分成网格 ★ */
  .prog-block {
    display: inline-flex;
    width: auto;
    min-width: 100px;          /* 最小宽度 */
    max-width: 100%;           /* 不能超出屏幕 */
    min-height: 36px;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 8px;
    flex: 0 1 auto;
    box-sizing: border-box;
    box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
    animation: pop .15s ease;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }
  
  .prog-block .label {
    font-size: 11px;
    flex: 1;
    text-align: left;
  }
  
  .prog-block .del {
    font-size: 13px;
    padding: 0 4px;
  }

  /* ★ 循环包裹区 */
  .prog-children-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 4px 8px;
    margin-left: 16px !important;        /* 缩进改小一点，多留空间 */
    border-left: 3px solid #9b59b6;
    border-radius: 0 0 0 6px;
    background: rgba(155,89,182,.06);
    width: calc(100% - 16px);
    box-sizing: border-box;
  }

  .prog-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .prog-children-empty {
    color: #7a6ab0;
    font-size: 10px;
    font-style: italic;
    padding: 6px 8px;
    border: 1px dashed rgba(155,89,182,.4);
    border-radius: 5px;
    background: rgba(155,89,182,.05);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* 控制按钮 */
  #controls {
    padding: 5px 6px;
    gap: 5px;
  }
  .ctrl-btn {
    padding: 8px 4px;
    font-size: 13px;
    border-radius: 10px;
    min-height: 40px;
    max-width: 130px;
  }

  /* 底部导航 */
  #nav .nav-btn {
    padding: 5px 0 4px;
    font-size: 10px;
  }
  #nav .nav-btn .ico { font-size: 16px; }

  /* 其他继承样式保留 */
  .edit-bar {
    background: linear-gradient(135deg,#3d2a6b,#2e2358);
    border: 1px solid #ffd93d;
    color: #ffd93d;
    padding: 5px 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .edit-bar button {
    background: #6a5acd;
    border: none; color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
  }
  
  .empty-hint { font-size: 12px; padding: 30px 10px; }
  .func-section { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #4a3a80; width: 100%; }
  #parentBar { display: none; }
}

/* ============ 平板 / 横屏大屏适配 ============ */
@media (min-width: 601px) {
  
  /* 1. 锁定整个屏幕高度，禁止滚动 */
  #app {
    height: 100vh;
    overflow: hidden;
  }

  /* 2. 主区域左右分栏 */
  #mainRow {
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
  }
  
  /* 3. 游戏区 */
  #stage {
    flex: 1 1 auto;
    border-right: 1px solid #3d2f6b;
    border-bottom: none;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* 保证画布绝对居中 */
  }
  
  /* 4. 编程区 */
  #coder {
    flex: 0 0 420px;
    width: 420px;
    height: 100%;
    border-top: none;
    border-left: 1px solid #3d2f6b;
    display: flex;
    flex-direction: column;
  }

  /* 5. 顶部积木库 */
  #palette {
    grid-template-columns: repeat(4, 1fr);
    max-height: none;
  }

  /* 6. 程序区多列网格 */
  #programArea {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    align-content: start;
    padding: 10px;
    gap: 8px;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .prog-block {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    font-size: 13px;
  }
  .prog-block .label { font-size: 13px; }
  .prog-children-wrap { grid-column: 1 / -1; }

  /* ★★★ 7. 修复弹窗居中 ★★★ */
  .overlay {
    position: fixed !important; /* 强制相对于屏幕定位，而不是父容器 */
    inset: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999;
  }
  .overlay.show {
    display: flex !important;
  }

  .dialog {
    max-width: 580px !important; 
    width: 85% !important;
    padding: 30px !important;     
    border-radius: 24px !important;
    /* ★ 关键：限制最大高度并允许内部滚动，防止内容把弹窗撑出屏幕导致不居中 */
    max-height: 85vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 外层隐藏溢出 */
  }

  /* 让弹窗里面的内容可以滚动 */
  .dialog > * {
    flex-shrink: 0;
  }
  .dialog .dialog-btns {
    flex-shrink: 0;
    margin-top: auto;
  }
  
  /* 如果弹窗里有商城列表，让它自己滚动 */
  .shop-list {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none;
  }

  .dialog h2 { font-size: 26px !important; margin-bottom: 16px; }
  .dialog p { font-size: 16px !important; line-height: 1.8; }
  .dialog .big-emoji { font-size: 64px !important; }
  .dialog button {
    padding: 14px 36px !important; 
    font-size: 16px !important;
    border-radius: 14px;
  }

  /* 商城卡片 */
  .shop-item { padding: 12px 16px !important; }
  .shop-item .name { font-size: 16px !important; }
  .shop-item .desc { font-size: 13px !important; }
  .shop-item .price { font-size: 15px !important; }
  .shop-btn { padding: 10px 20px !important; font-size: 14px !important; min-width: 80px !important; }
  
  /* 控制按钮 */
  #controls { padding: 10px 20px; }
  .ctrl-btn { padding: 12px 20px; font-size: 15px; max-width: 160px; }
}

/* 这些是全局的颜色和动画，不需要放在媒体查询里 */
@keyframes pop { from{transform:scale(.9);opacity:0;} to{transform:scale(1);opacity:1;} }

.prog-block.prog-motion  { background: linear-gradient(135deg,#4a90e2,#357abd) !important; }
.prog-block.prog-control { background: linear-gradient(135deg,#9b59b6,#7d3c98) !important; }
.prog-block.prog-var     { background: linear-gradient(135deg,#16a085,#0e7a63) !important; }
.prog-block.prog-func    { background: linear-gradient(135deg,#e67e22,#d35400) !important; }

.prog-branch-header { font-size: 10px; color: #c8b8ff; padding: 3px 0; font-weight: 600; }
.prog-branch-header.else { color: #ff9ec7; }
/* ============ 电脑宽屏 ============ */
@media (min-width:1200px) {
  #coder { width:400px; }     /* 大屏更宽 */
  .block .ico { font-size:22px; }
  .block .txt { font-size:11px; }
}

/* ============ 商城列表 ============ */
.shop-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:60vh;
  overflow-y:auto;
  padding-right:4px;
}
.shop-list::-webkit-scrollbar { width:5px; }
.shop-list::-webkit-scrollbar-thumb { background:#4a3a80; border-radius:3px; }

/* 商品卡片：外框 */
.shop-item {
  display:flex;
  align-items:center; 
  justify-content:space-between;
  background:#1a1433;
  border:1px solid #4a3a80;
  border-radius:12px;
  padding:10px;
  text-align:left;
  width:100%;
  box-sizing:border-box;
}

/* 左侧文字区 */
.shop-item .body {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.shop-item .row1 {
  display:flex;
  align-items:center;
  gap:10px;
}
.shop-item .icon {
  font-size:28px;
  line-height:1;
}
.shop-item .price {
  font-size:14px;
  font-weight:800;
  color:#ffd93d;
}
.shop-item .row2 {
  display:flex;
  flex-direction:column;
}
.shop-item .name {
  font-size:14px;
  font-weight:700;
  color:#fff;
}
.shop-item .desc {
  font-size:11px;
  color:#a898e0;
  margin-top:2px;
}

/* 右侧按钮区 */
.shop-item .right {
  flex:0 0 auto;
  margin-left:10px;
}
.shop-btn {
  border:none;
  color:#fff;
  padding:8px 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg,#e67e22,#d35400);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
  min-width:64px;
}
.shop-btn.equipped {
  background:#4a3a80;
  opacity:.7;
}
.shop-btn.equip {
  background:linear-gradient(135deg,#2ecc71,#27ae60);
}

/* 手机适配 */
@media (max-width:500px) {
  .shop-item {
    padding:8px 10px;
    gap:8px;
  }
  .shop-item .icon { font-size:26px; }
  .shop-item .price { font-size:12px; }
  .shop-item .name { font-size:13px; }
  .shop-item .desc { font-size:10px; }
  .shop-btn {
    padding:6px 10px;
    font-size:11px;
    min-width:56px;
  }
}

/* 加宽商城弹窗，但不超过屏幕宽度 */
#dialog {
  max-width: 480px !important;   /* 比原来宽一点 */
  width: 92% !important;
}

/* 让商城的滚动条不挡住内容 */
.shop-list {
  max-height: 55vh;             /* 留出足够的空间给上下标题和按钮 */
  overflow-y: auto;
  padding-right: 6px;
}
.shop-list::-webkit-scrollbar { width: 6px; }
.shop-list::-webkit-scrollbar-thumb { background:#4a3a80; border-radius:3px; }