/* main.css —— 闯关页样式（重做：横幅顶栏 + 三栏自适应 + 玻璃拟态）
 *
 * 自适应要点（本轮核心需求）：
 *   1) 三个栏位宽度用 clamp() 随视口伸缩，不再是写死的 430/172px
 *   2) 高度全部走 flex 分配：编辑器吃满右侧剩余空间，窗口变高就变高
 *   3) 用「短视口」媒体查询（max-height）收紧纵向留白，笔记本 768 高也能放下
 *   4) 窄屏（<1100px）自动折叠成两栏，代码块列横向排布
 */

/* ================= 基础 ================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:#1F2937;overflow:hidden;
  font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:#0B1020;
  -webkit-font-smoothing:antialiased;
}
button{font:13px/1.4 inherit}
a{text-decoration:none}

/* 变量：栏位宽度与间距集中在这里，便于调 */
:root{
  --side-w: clamp(340px, 27vw, 460px);      /* 右栏（目标+编辑器+控制） */
  --palette-w: clamp(198px, 16.5vw, 264px); /* 中栏（代码块）—— 原 132/11vw/176 的 150% */
  --topbar-h: clamp(56px, 7.2vh, 76px);     /* 顶栏高度 */
  --gap: clamp(8px, 0.9vw, 14px);
  --radius: 14px;
  --glass: #FFFFFFF2;
  --glass-line: #FFFFFF80;
}

/* ================= 顶栏（AI 横幅） ================= */
.topbar{
  position:relative;height:var(--topbar-h);flex:0 0 auto;overflow:hidden;
  border-bottom:1px solid #FFFFFF26;
}
.topbar-bg{
  position:absolute;inset:0;
  /* 顶栏是细长条（约 65px 高）：取画面 62% 处，正好露出机器人与草地（而不是深色天空） */
  background:url('../assets-welcome/play-banner.jpg') center 62% / cover no-repeat;
  transform:scale(1.03);
}
.topbar-veil{
  position:absolute;inset:0;
  /* 压暗以保文字可读，但右侧留亮，让横幅画面透出来 */
  background:
    linear-gradient(90deg,#0B1020F2 0%,#0B1020CC 34%,#0B102033 62%,#0B102066 100%),
    linear-gradient(180deg,#0B102000 0%,#0B102066 100%);
}
.topbar-inner{
  position:relative;z-index:1;height:100%;
  display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  padding:0 clamp(12px,1.6vw,24px);
}

/* 品牌 */
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#4338CA,#7C3AED);
  box-shadow:0 4px 14px #4338CA88, inset 0 1px 0 #FFFFFF44;
}
.brand-text{
  font-size:16px;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  background:linear-gradient(100deg,#FFFFFF,#C7D2FE 50%,#67E8F9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 关卡胶囊 */
.lvchip{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  background:#FFFFFF14;border:1px solid #FFFFFF2E;border-radius:12px;
  padding:5px 14px 5px 6px;backdrop-filter:blur(10px);
}
.lvchip-no{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#CFFAFE;background:linear-gradient(160deg,#0E7490,#155E75);
  border:1px solid #22D3EE66;box-shadow:0 0 14px #22D3EE44;
}
.lvchip-meta{display:flex;flex-direction:column;line-height:1.25}
.lvchip-meta b{font-size:13.5px;color:#F1F5FF;font-weight:700;white-space:nowrap}
.lvchip-meta i{font-style:normal;font-size:11px;color:#93A3BD;white-space:nowrap}

/* 导航 */
.topnav{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:nowrap}
.tnav{
  font-size:12.5px;color:#C3CCDD;padding:6px 12px;border-radius:9px;
  border:1px solid #FFFFFF1F;background:#FFFFFF0F;white-space:nowrap;
  transition:.18s;backdrop-filter:blur(8px);
}
.tnav:hover{background:#FFFFFF1F;color:#fff;border-color:#FFFFFF33}
/* 顶栏里也有 button.tnav（❓ 新手引导）：抹掉 button 默认样式，与链接款一致 */
button.tnav{font:12.5px/1.4 inherit;cursor:pointer;font-weight:400}
button.tnav:hover{background:#FFFFFF1F}
.tnav.primary{
  background:linear-gradient(135deg,#4338CA,#7C3AED);
  border-color:#818CF866;color:#fff;font-weight:600;
}
.tnav.primary:hover{filter:brightness(1.12)}
.topnav-user{font-size:12px;color:#8A9AB5;white-space:nowrap;margin-left:4px}
.topnav-user a{color:#A5B4FC}

/* ================= 三栏主体 ================= */
main{
  display:flex;gap:var(--gap);
  padding:var(--gap);
  height:calc(100vh - var(--topbar-h));
  min-height:0;overflow:hidden;
}

/* ---- 左：地图舞台 ---- */
.stagewrap{
  flex:1 1 auto;min-width:0;position:relative;
  border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, #22D3EE14 0%, #0000 72%),
    radial-gradient(ellipse at 50% 40%, #1A2440 0%, #0B1020 78%);
  border:1px solid #FFFFFF17;
  box-shadow:0 14px 40px #00000055, inset 0 1px 0 #FFFFFF0F;
}
#stage{position:absolute;inset:0;overflow:auto;padding:16px}
/* 舞台内拖拽=平移（zoom.js 注入的 .iso{cursor:zoom-in} 只适用于选关卡片） */
#stage .iso{cursor:grab}
.stage-hint{
  position:absolute;left:12px;bottom:10px;font-size:11px;color:#6B7A94;
  background:#0B1020AA;border:1px solid #FFFFFF14;border-radius:7px;
  padding:3px 9px;pointer-events:none;backdrop-filter:blur(6px);
}
.iso{position:relative;margin:0 auto}
.iso img{position:absolute}
.tile{width:186px;height:138px}
.hill{width:186px;height:178px}
.gridcell{width:186px;height:138px;opacity:.42}
.robot{width:200px;height:240px;transition:left .22s ease,top .22s ease}
.ship{width:256px;height:228px;transition:left .22s ease,top .22s ease}
.item{width:78px;height:112px;transition:opacity .22s}
@keyframes dropAnim{0%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
 100%{opacity:0;transform:translateY(78px) scale(.55) rotate(24deg)}}
.robot.dropping{animation:dropAnim .8s ease-in forwards}
.orn{position:absolute;width:14px;height:14px;border-radius:3px;background:#94A3B8AA;transform:rotate(45deg)}
.pathanim{position:absolute;width:12px;height:12px;border-radius:50%;background:#10B98166}

/* ---- 中：代码块列 ---- */
.palettecol{
  flex:0 0 var(--palette-w);width:var(--palette-w);min-width:0;
  display:flex;flex-direction:column;min-height:0;
  border-radius:var(--radius);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:0 14px 40px #00000044;
  backdrop-filter:blur(12px);
}
#palette{flex:1 1 auto;overflow-y:auto;padding:8px;display:block;min-height:0}

/* ---- 右：目标 / 编辑器 / 控制 ---- */
aside{
  flex:0 0 var(--side-w);width:var(--side-w);min-width:0;
  display:flex;flex-direction:column;min-height:0;gap:0;
  border-radius:var(--radius);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:0 14px 40px #00000044;
  backdrop-filter:blur(12px);
}

/* 小标题（各栏统一） */
.colhead{
  display:flex;align-items:center;gap:8px;padding:10px 13px 9px;
  border-bottom:1px solid #00000010;flex:0 0 auto;
}
.colhead-tight{padding:8px 13px 7px}
.colhead-ic{font-size:14px;line-height:1}
/* 品牌化栏头图标（即梦生成 logo，缺图时回退 emoji） */
.colhead-ic-img{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4338CA,#7C3AED);
  box-shadow:0 3px 10px #4338CA55, inset 0 1px 0 #FFFFFF44;
}
.colhead-ic-img img{width:19px;height:19px;object-fit:contain;display:block}
.colhead-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.colhead-tx b{font-size:12.5px;color:#374151;font-weight:600}
.colhead-tx i{font-style:normal;font-size:10.5px;color:#9CA3AF;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* 编辑器标题栏右侧的「已用 N / 上限 M 行」实时计数
 * 左侧行号栏是物理行，这里才是评分口径（空行 / } 收尾行不计），红色即已超标掉星 */
.linebudget{
  margin-left:auto;flex:0 0 auto;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:#EEF2F7;color:#4B5563;border:1px solid #00000010;
}
.linebudget.over{background:#FEF2F2;color:#B91C1C;border-color:#FECACA}

/* 目标区 */
.pane-goals{flex:0 0 auto;padding-bottom:10px;border-bottom:1px solid #00000010}
.pane-goals .colhead{border-bottom:0;padding-bottom:4px}
#goals{display:flex;gap:7px;flex-wrap:wrap;padding:0 12px}
.goal{
  flex:1 1 88px;min-width:0;background:linear-gradient(165deg,#F9FAFB,#F3F4F6);
  border:1px solid #00000010;border-radius:10px;padding:7px 10px;
  font-size:12px;line-height:1.4;
}
.goal .gto{font-size:10.5px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal .gno{font-weight:800;color:#111827;font-size:17px;font-variant-numeric:tabular-nums;line-height:1.25}
.goal .gnu{font-size:10.5px;color:#6B7280;font-weight:400}
.goal .gsub{font-size:10px;color:#9CA3AF;margin-top:1px}
.goal.crystal{border-left:3px solid #F59E0B}
.goal.step{border-left:3px solid #3B82F6}
.goal.line{border-left:3px solid #8B5CF6}
#best{font-size:11.5px;color:#6B7280;padding:8px 13px 0}

/* 编辑器：吃满剩余高度（自适应核心） */
.editorwrap{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:132px;
  background:#FBFCFE;border-bottom:1px solid #00000010;
}
.editorwrap .colhead{background:#F6F8FB}
#editorBox{flex:1 1 auto;display:flex;min-height:0;overflow:hidden;position:relative}
#lines{
  width:clamp(38px,3.4vw,52px);flex:0 0 auto;padding:10px 6px 10px 0;text-align:right;
  font:13px/1.6 ui-monospace,Consolas,monospace;color:#9CA3AF;background:#F1F4F8;
  user-select:none;overflow:hidden;
}
#lines div.hit{background:#FEF3C7;color:#B45309;font-weight:700;border-radius:3px}
#code{
  flex:1 1 auto;min-width:0;border:0;outline:0;resize:none;padding:10px 12px;
  font:13px/1.6 ui-monospace,Consolas,monospace;
  background:transparent;color:#111827;tab-size:2;
}
#code::placeholder{color:#B6C0CF}
#code::selection{background:#DBEAFE}

/* 状态与评分 */
#msg{
  padding:9px 13px;font-size:12.5px;color:#7C2D12;background:#FFFBEB;
  border-bottom:1px solid #00000010;display:none;white-space:pre-wrap;
  max-height:22vh;overflow:auto;flex:0 0 auto;
}
#stars{display:flex;align-items:center;gap:8px;padding:7px 13px 3px;flex:0 0 auto}
#stars .star{width:34px;height:34px;flex:0 0 auto;display:inline-flex}
#stars .on .bigstar{fill:#FBBF24;stroke:#D97706;stroke-width:1;
  filter:drop-shadow(0 2px 3px #F59E0B55)}
#stars .off .bigstar{fill:none;stroke:#BFC7D2;stroke-width:1.7}
#stars em{font-size:12px;color:#6B7280;font-style:normal;margin-left:4px}
#scorecard{
  display:none;margin:0 12px 8px;padding:9px 12px;background:#F9FAFB;
  border:1px solid #00000010;border-radius:10px;font-size:12px;line-height:1.7;
  overflow-y:auto;max-height:26vh;flex:0 0 auto;
}
#scorecard.on{display:block}
#scorecard .r{display:flex;gap:8px;align-items:baseline}
#scorecard .ic{width:15px;text-align:center;font-weight:700;flex:0 0 15px}
#scorecard .ok{color:#0E9F6E}#scorecard .no{color:#DC2626}
#scorecard .k{width:100px;flex:0 0 100px;color:#374151}
#scorecard .d{color:#6B7280;min-width:0}
#scorecard .adv{margin-top:6px;padding-top:6px;border-top:1px dashed #00000018;color:#B45309}
#status{padding:8px 13px;font-size:12.5px;border-top:1px solid #00000010;min-height:36px;
  flex:0 0 auto;color:#4B5563}
.ok{color:#047857;font-weight:600}.bad{color:#B91C1C;font-weight:600}.run{color:#4338CA}

/* 控制条 */
.bar{
  display:flex;gap:8px;padding:10px 12px;border-top:1px solid #00000010;
  flex-wrap:wrap;background:#fff;flex:0 0 auto;align-items:center;
}
.bar .spacer{flex:1}
button{
  padding:8px 14px;border-radius:9px;border:1px solid #D1D5DB;background:#fff;
  cursor:pointer;font-weight:600;color:#374151;transition:.16s;white-space:nowrap;
}
button:hover{background:#F9FAFB;border-color:#C7D2FE}
button.primary{
  background:linear-gradient(135deg,#4338CA,#6D28D9);border-color:#4338CA;color:#fff;
  box-shadow:0 4px 14px #4338CA44;
}
button.primary:hover{filter:brightness(1.1)}
button.warn{background:#fff;border-color:#FCD34D;color:#B45309}
button.warn:hover{background:#FFFBEB}
button:disabled{opacity:.45;cursor:not-allowed}
.speedwrap{display:flex;align-items:center;gap:6px;font-size:12px;color:#9CA3AF;white-space:nowrap}
.speedwrap input[type=range]{width:clamp(64px,6vw,104px);vertical-align:middle;accent-color:#4338CA}

/* 代码块按钮：左侧 3D 图标徽章 + 右侧代码/说明 */
.chip{
  display:flex;align-items:center;gap:7px;width:100%;height:auto;
  padding:6px 7px;margin-bottom:6px;
  border:1px solid #E2E6F0;border-radius:10px;background:#fff;cursor:pointer;
  transition:.14s;text-align:left;font:12px/1.35 inherit;overflow:hidden;
}
.chip:last-child{margin-bottom:0}
.chip:hover{background:#EEF2FF;border-color:#4338CA;transform:translateX(2px);
  box-shadow:0 3px 10px #4338CA22}
.chip:active{transform:translateX(0)}
/* 指令图标徽章（即梦生成的糖果 3D 小图标，见 tools/palette_icon_post.py） */
.chip-ic{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EEF2FF,#E0E7FF);
  box-shadow:inset 0 0 0 1px #C7D2FE66;
}
.chip-ic img{width:21px;height:21px;object-fit:contain;display:block}
.chip-ic.noic{display:none}   /* 图标缺失时整块隐藏，退化为纯文字卡 */
.chip.ship .chip-ic{background:linear-gradient(160deg,#ECFEFF,#CFFAFE);
  box-shadow:inset 0 0 0 1px #67E8F966}
.chip-tx{min-width:0;flex:1 1 auto}
/* 代码标签：按 `(` 与 `.` 断行，避免把 `();` 拆到下一行 */
.chip b{
  display:block;font:11.5px/1.35 ui-monospace,Consolas,monospace;
  color:#312E81;font-weight:600;white-space:normal;overflow-wrap:break-word;
  word-break:keep-all;hyphens:none;
}
.chip i{display:block;font-style:normal;font-size:10px;color:#6B7280;line-height:1.35;
  white-space:normal;overflow-wrap:break-word;margin-top:1px}
.chip.ship b{color:#0E7490}
.chip.ship:hover{background:#ECFEFF;border-color:#0E7490}

/* 窄栏（<1440px 时栏宽降到 ~190px 以下）：缩小字号并收紧徽章，
   优先保证代码标签完整可读（否则会把 `Dev.turnRight();` 拆成两行且截断说明） */
@media (max-width:1440px){
  .chip{padding:6px}
  .chip-ic{flex-basis:22px;width:22px;height:22px;border-radius:7px}
  .chip-ic img{width:18px;height:18px}
  .chip b{font-size:11px}
  .chip i{font-size:9.5px}
}
@media (max-width:1280px){
  .chip{margin-bottom:5px}
  .chip b{font-size:10.5px;line-height:1.3}
  /* 说明文字保留：中栏加宽 150% 后 ~190px 足够放下单行说明（实测 4 个 chip 均 1 行、
     无滚动条）。此前因栏太窄才隐藏，现在再隐藏等于白扔加宽的收益。 */
}

/* 代码块分组 + 图例（填满竖栏留白） */
.palgroup{margin-bottom:10px}
.palgroup:last-child{margin-bottom:0}
.palgroup-t{font-size:10.5px;color:#9CA3AF;font-weight:600;letter-spacing:.04em;
  padding:2px 2px 6px}
.legend{
  border-top:1px dashed #00000018;padding-top:9px;
}
.lg-row{display:flex;align-items:center;gap:8px;font-size:11px;color:#4B5563;
  padding:3px 2px;line-height:1.4}
.lg-ic{flex:0 0 24px;width:24px;height:20px;display:flex;align-items:center;justify-content:center}
.lg-ic img{max-width:24px;max-height:20px;display:block}
/* 虚空无瓦片：虚线小菱形，贴合等距地图的视觉语言 */
.lg-void i{width:11px;height:11px;border:1.5px dashed #A8B4C8;border-radius:2px;
  transform:rotate(45deg);display:block}
/* 窄栏图例收紧：必须放在基础规则之后才能覆盖生效 */
@media (max-width:1440px){
  .lg-row{font-size:10.5px;gap:6px}
  .lg-ic{flex-basis:22px;width:22px}
}

/* ================= 新手引导（聚光灯 + 分步卡片） ================= */
/* 遮罩与聚光灯都 pointer-events:none —— 引导只是「指着讲」，
   不拦截点击，学员可以边看边动手；只有卡片本身可点。
   模糊与压暗都只作用于「洞口之外」，框住的部分保持原样清晰：
     - 模糊：4 块洞外面板各自 backdrop-filter（只模糊自己盖住的区域）
     - 压暗：聚光灯自己的巨型外阴影（天然绕开洞口，且支持圆角）
   早期版本把模糊和压暗都放在一张全屏遮罩上，连框住的区域一起糊掉了，看不清讲的是什么。 */
.gd{position:fixed;inset:0;z-index:400}
.gd-blur{position:absolute;inset:0;pointer-events:none}
.gd-blur i{
  position:absolute;display:block;
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease;
}
/* 没有锚点可框时（选不到元素）才用整屏遮罩，此时不存在「要看清的部分」 */
.gd-veil{
  position:absolute;inset:0;pointer-events:none;background:#05060EB8;
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
}
/* 聚光灯：透明矩形 + 巨型外阴影 = 挖了洞的压暗层；洞内不压暗也不模糊 */
.gd-spot{
  position:absolute;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 9999px #05060EB8, 0 0 0 3px #67E8F9CC, 0 0 26px 5px #22D3EE66;
  transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease;
}
.gd-card{
  position:absolute;width:min(360px,calc(100vw - 28px));
  padding:15px 17px 13px;border-radius:16px;outline:0;
  background:linear-gradient(168deg,#1B2450,#0E1430);
  border:1px solid #FFFFFF26;color:#E7EDF8;
  box-shadow:0 22px 60px #000000A6, inset 0 1px 0 #FFFFFF1A;
  animation:gdIn .26s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes gdIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.gd-card.gd-center{left:50% !important;top:50% !important;transform:translate(-50%,-50%)}
.gd-card.gd-center{animation:gdInC .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes gdInC{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}
 to{opacity:1;transform:translate(-50%,-50%)}}
.gd-head{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.gd-kicker{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;color:#A5F3FC;
  background:#22D3EE1F;border:1px solid #22D3EE3D;white-space:nowrap;
}
.gd-dots{display:flex;gap:5px;margin-left:auto}
.gd-dots i{width:6px;height:6px;border-radius:50%;background:#FFFFFF2E;transition:.2s}
.gd-dots i.on{background:#67E8F9;box-shadow:0 0 8px #22D3EEAA}
.gd-title{margin:0 0 7px;font-size:16.5px;font-weight:800;color:#FFFFFF;letter-spacing:.01em}
.gd-body{font-size:13px;line-height:1.85;color:#B7C3D8}
.gd-body b{color:#A5F3FC;font-weight:700}
.gd-foot{display:flex;align-items:center;gap:8px;margin-top:14px}
.gd-spacer{flex:1}
.gd-foot button{
  font:13px/1.4 inherit;padding:8px 15px;border-radius:10px;cursor:pointer;font-weight:600;
  border:1px solid #FFFFFF1F;background:#FFFFFF0F;color:#D5DDEE;transition:.18s;white-space:nowrap;
}
.gd-foot button:hover{background:#FFFFFF1A}
.gd-foot button.primary{
  background:linear-gradient(135deg,#0891B2,#4338CA);border-color:#67E8F966;color:#fff;
  box-shadow:0 4px 14px #0891B24D;
}
.gd-foot button.primary:hover{filter:brightness(1.12)}
.gd-foot button:disabled{opacity:.4;cursor:not-allowed}
.gd-foot button.gd-skip{
  border:0;background:transparent;color:#7C8AA6;padding:8px 4px;
  text-decoration:underline;text-underline-offset:3px;
}
.gd-foot button.gd-skip:hover{background:transparent;color:#A9B6CD}
body.gd-on{cursor:default}

/* 窄屏：卡片沉到底部通栏，不再跟随锚点（小屏跟来跟去反而看不全）。
   目标本身就在下半屏时加 .gd-dock-top 改贴顶部，免得卡片盖住要讲的东西。 */
@media (max-width:700px){
  .gd-card{
    left:10px !important;right:10px !important;width:auto;top:auto !important;
    bottom:10px;transform:none;max-height:52vh;overflow-y:auto;
  }
  .gd-card.gd-center{left:10px !important;top:auto !important;transform:none}
  .gd-card,.gd-card.gd-center{animation:gdIn .26s cubic-bezier(.2,.8,.3,1) both}
  .gd-card.gd-dock-top{top:10px !important;bottom:auto}
  /* 贴顶时把磨砂也补齐到卡片下方，否则卡片会压在清晰的洞口上显得割裂 */
  .gd-card.gd-dock-top{animation:gdInTop .26s cubic-bezier(.2,.8,.3,1) both}
}
@keyframes gdInTop{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
/* 无障碍：减少动效 */
@media (prefers-reduced-motion:reduce){
  .gd-card,.gd-card.gd-center{animation:none}
  .gd-spot{transition:none}
}

/* ================= 结果弹窗（失败 / 通关） ================= */
.rmodal{position:fixed;inset:0;background:#05060ECC;display:none;align-items:center;
 justify-content:center;z-index:500;padding:20px;backdrop-filter:blur(5px)}
.rmodal.on{display:flex}
.rmodal-box{
  width:100%;max-width:412px;max-height:92vh;overflow:hidden;border-radius:20px;
  background:linear-gradient(168deg,#161D3D,#0B1020);
  border:1px solid #FFFFFF1F;display:flex;flex-direction:column;
  box-shadow:0 30px 80px #000000bb, inset 0 1px 0 #FFFFFF16;
  animation:rmIn .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rmIn{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
.rmodal-art{
  display:block;width:100%;height:clamp(130px,20vh,190px);object-fit:cover;
  object-position:center 38%;flex:0 0 auto;
  mask-image:linear-gradient(180deg,#000 56%,#0000 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 56%,#0000 100%);
  background:#0B1020;
}
.rmodal-inner{padding:2px 24px 22px;overflow-y:auto;min-height:0}
.rmodal-kicker{font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;margin-bottom:8px}
.rmodal-title{margin:0 0 10px;font-size:23px;font-weight:800;color:#F1F5FF;letter-spacing:.01em}
.rmodal-body{font-size:13.5px;line-height:1.8;color:#B7C3D8}
.rmodal-foot{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.rmodal-foot button{
  font:14px/1.4 inherit;padding:10px 18px;border-radius:11px;cursor:pointer;font-weight:600;
  border:1px solid #FFFFFF1F;background:#FFFFFF0F;color:#D5DDEE;transition:.2s;flex:1;min-width:118px;
}
.rmodal-foot button:hover{background:#FFFFFF1A}
.rmodal-foot button.primary{
  background:linear-gradient(135deg,#4338CA,#7C3AED);border-color:#818CF866;color:#fff;
}
.rmodal-foot button.primary:hover{filter:brightness(1.12)}
.rmodal-foot button.ghost{flex:0 0 auto;min-width:0;color:#8A9AB5}
.rmodal.fail .rmodal-kicker{color:#FCA5A5}
.rmodal.fail .rmodal-title{color:#FEE2E2}
.rmodal.win .rmodal-kicker{color:#6EE7B7}
/* 确认框（复用结果弹窗皮肤）：没有配图，标题用中性亮色，别继承 fail/win 的红绿 */
.rmodal.ask .rmodal-kicker{color:#A5B4FC}
.rmodal.ask .rmodal-title{color:#F1F5FF}
.rmodal.win .rmodal-title{
  background:linear-gradient(100deg,#FFFFFF,#FDE68A 45%,#FBBF24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rm-info{margin-top:14px;padding:12px 14px;border-radius:12px;
 background:#FFFFFF0A;border:1px solid #FFFFFF14;font-size:13px}
.rm-info .rm-row{display:flex;gap:9px;align-items:baseline;padding:3px 0}
.rm-info .rm-ic{width:15px;text-align:center;font-weight:700;flex:0 0 15px}
.rm-info .rm-ok{color:#6EE7B7}
.rm-info .rm-no{color:#FCA5A5}
.rm-info .rm-k{color:#C3CCDD;flex:0 0 auto;min-width:96px}
.rm-info .rm-d{color:#8A9AB5;font-size:12.5px}
.rm-adv{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:12.5px;line-height:1.75;
 background:#F59E0B14;border:1px solid #F59E0B33;color:#FCD34D}
.rm-count{margin-top:15px;font-size:13px;color:#8A9AB5;display:flex;align-items:center;gap:9px}
.rm-count b{color:#67E8F9;font-variant-numeric:tabular-nums;font-size:15px}
.rm-count .rm-ring{width:16px;height:16px;border-radius:50%;flex:0 0 16px;
 border:2px solid #67E8F955;border-top-color:#22D3EE;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rm-simple{margin-top:6px;font-family:ui-monospace,Consolas,monospace;font-size:12px;
 white-space:pre-wrap;color:#FCA5A5;max-height:150px;overflow:auto}

/* 通关弹窗大星星 */
.rm-stars{display:flex;justify-content:center;gap:14px;margin:10px 0 2px}
.rm-stars .star{width:64px;height:64px;flex:0 0 auto}
.rm-stars .on .bigstar{fill:#FBBF24;stroke:#F59E0B;stroke-width:1;
  filter:drop-shadow(0 0 9px #F59E0B99)}
.rm-stars .off .bigstar{fill:none;stroke:#FFFFFF52;stroke-width:1.6}
.rm-stars .on{animation:starPop .5s cubic-bezier(.2,1.5,.4,1) both}
.rm-stars .on:nth-child(2){animation-delay:.13s}
.rm-stars .on:nth-child(3){animation-delay:.26s}
@keyframes starPop{from{transform:scale(.15);opacity:0}to{transform:scale(1);opacity:1}}
.rm-star-cap{text-align:center;font-size:13px;color:#8A9AB5;margin:2px 0 6px}
.rm-star-cap b{color:#FCD34D;font-size:16px}

/* ================= 自适应 ================= */

/* 中等屏：收窄左右栏，保证地图还有空间 */
@media (max-width:1440px){
  :root{ --side-w: clamp(320px,28vw,400px); --palette-w: clamp(189px,15.75vw,237px); }
}

/* 小笔记本 / 投影（常见 1366×768）：进一步压缩纵向与栏宽 */
@media (max-width:1280px), (max-height:800px){
  :root{ --topbar-h: clamp(50px,6.4vh,62px); --gap:8px;
         --side-w: clamp(300px,29vw,360px); --palette-w: clamp(177px,15vw,210px); }
  .brand-text{font-size:15px}
  #stars{padding:6px 13px 2px}
  #stars .star{width:29px;height:29px}
  .rm-stars .star{width:54px;height:54px}
  #scorecard{max-height:22vh}
  .bar{padding:8px 10px;gap:6px}
  .bar button{padding:7px 11px;font-size:12.5px}
}

/* 窄屏：折成两栏，代码块列变成横向条 */
@media (max-width:1100px){
  main{flex-wrap:wrap;height:auto;min-height:calc(100vh - var(--topbar-h));overflow:auto}
  .stagewrap{flex:1 1 100%;height:46vh;min-height:300px;order:1}
  aside{flex:1 1 100%;order:2;max-height:none;width:auto}
  .palettecol{flex:1 1 100%;order:3;height:auto;width:auto}
  /* 组本身横向铺开：卡片在组内并排（flex:1 1 150px 起码 150px 才换行），
     图例作为最后一组靠右侧展开；chip 保持「图标+代码」的横向结构不竖叠 */
  #palette{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px;max-height:34vh;align-items:flex-start}
  #palette .palgroup{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 340px;margin-bottom:0}
  #palette .palgroup-t{flex:1 1 100%}
  #palette .chip{display:flex;width:auto;flex:1 1 150px;margin-bottom:0}
  .legend{border-top:0;padding-top:2px}
  .editorwrap{min-height:180px;height:34vh}
  body{overflow:auto}
  .topnav{gap:6px}
  .tnav{padding:5px 9px;font-size:12px}
}

/* 手机 */
@media (max-width:640px){
  .topbar-inner{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .brand-text,.topnav-user{display:none}
  .topnav{margin-left:0;flex:1;justify-content:flex-end}
  .lvchip{padding:4px 10px 4px 5px}
  #goals{gap:6px}
  .goal{flex:1 1 72px;padding:6px 8px}
  .goal .gno{font-size:15px}
  .bar button{padding:8px 10px;font-size:12.5px;flex:1 1 auto}
  .speedwrap{width:100%;justify-content:flex-end}
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion:reduce){
  .robot,.ship,.item{transition:none}
  .rmodal-box{animation:none}
  .rm-count .rm-ring{animation:none}
  .rm-stars .on{animation:none}
}