/* origin-star-ui.css
 * 儿童工程课 · 通用任务页视觉系统
 * 这一份作为【所有关卡共享的基础样式层】
 */

/* ========== 基础变量 ========== */
:root{
  /* 色板：明亮、工程感、略多巴胺 */
  --bg-body:#f4f5fb;
  --bg-page:#f9fafb;
  --bg-card:#ffffff;
  --bg-soft:#eef2ff;
  --bg-soft-alt:#e0f2fe;

  --accent-orange:#ff8a3c;
  --accent-orange-soft:rgba(255,138,60,.14);
  --accent-blue:#2563eb;
  --accent-blue-soft:rgba(37,99,235,.14);
  --accent-green:#16a34a;
  --accent-green-soft:rgba(22,163,74,.12);

  --text-main:#111827;
  --text-soft:#6b7280;
  --text-faint:#9ca3af;

  --border-soft:rgba(148,163,184,.45);
  --border-strong:rgba(148,163,184,.7);

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-soft:0 18px 40px rgba(15,23,42,.08);
  --shadow-card:0 12px 30px rgba(15,23,42,.08);

  --font-main:"PingFang SC","SF Pro SC","Microsoft YaHei",
              system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ========== 全局 Reset / 排版 ========== */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  font-family:var(--font-main);
  background:
    radial-gradient(circle at 0 -10%,#dbeafe 0,#f4f5fb 45%,#e5e7eb 100%);
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;}

.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ========== 顶部栏（所有关卡共用） ========== */
.header{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(90deg,#ff8a3c,#f97316);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(248,113,113,.9);
  box-shadow:0 6px 14px rgba(248,113,113,.35);
}


.header-inner{
  max-width:1240px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-icon{
  width:32px;height:32px;
  border-radius:14px;
  background:conic-gradient(from 210deg,#ff8a3c,#f97316,#3b82f6,#22c55e,#ff8a3c);
  display:flex;align-items:center;justify-content:center;
  color:#f9fafb;
  font-size:18px;
  font-weight:700;
  box-shadow:0 0 0 2px #fee2e2,0 8px 18px rgba(248,113,113,.4);
}
.brand-title{
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}
.brand-sub{
  font-size:12px;
  color:var(--text-soft);
}

/* ========== 通用按钮体系 ========== */
.btn{
  border:none;
  cursor:pointer;
  border-radius:999px;
  font-size:13px;
  padding:6px 14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#ffffff;
  border:1px solid rgba(209,213,219,.9);
  color:#111827;
  transition:all .16s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{
  background:#f9fafb;
  box-shadow:0 3px 10px rgba(15,23,42,.1);
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
  box-shadow:none;
}

.btn-primary{
  background:linear-gradient(135deg,#ff8a3c,#f97316);
  color:#111827;
  border:1px solid rgba(248,113,113,.9);
  box-shadow:0 10px 24px rgba(248,113,113,.42);
}
.btn-primary:hover{
  filter:brightness(1.03);
  box-shadow:0 14px 32px rgba(248,113,113,.52);
}
.btn-primary:disabled{
  opacity:.6;
  cursor:default;
  box-shadow:none;
  transform:none;
}

/* 舞台播放按钮专用微调 */
.btn-stage-play{
  font-size:12px;
  padding-inline:14px;
}

/* ========== 主体布局 ========== */
.main{
  flex:1;
  padding:14px 16px 20px;
}
.main-inner{
  max-width:1240px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ========== 任务头部卡片 ========== */
.mission-head{
  border-radius:var(--radius-lg);
  padding:14px 16px 14px;
  background:
    linear-gradient(135deg,rgba(129,230,217,.45),rgba(191,219,254,.65)),
    linear-gradient(120deg,#ffffff,#f9fafb);
  border:1px solid rgba(191,219,254,.9);
  box-shadow:var(--shadow-soft);
}
.mission-title{
  font-size:17px;
  font-weight:600;
  color:#0f172a;
  margin-bottom:4px;
}
.mission-meta{
  font-size:12px;
  color:var(--text-soft);
}
.mission-tags{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag{
  font-size:11px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(129,140,248,.35);
  background:rgba(239,246,255,.9);
  color:#1e40af;
}
.mission-story{
  margin-top:8px;
  font-size:13px;
  line-height:1.7;
  color:#111827;
}

/* ========== 主体两栏基础布局：左积木 / 右舞台 ========== */
.scratch-layout{
  display:flex;
  gap:16px;
  align-items:stretch;
  margin-top:2px;
}

/* 左列：积木编辑区（约 65%） */
.scratch-col-editor{
  flex:0 0 66%;
  max-width:66%;
  display:flex;
  flex-direction:column;
}

/* 右列：舞台 + UNO + 日志（约 34%） */
.scratch-col-stage{
  flex:0 0 34%;
  max-width:34%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* 窄屏切单列 */
@media (max-width:1024px){
  .scratch-layout{
    flex-direction:column;
  }
  .scratch-col-editor,
  .scratch-col-stage{
    flex:1 1 auto;
    max-width:100%;
  }
}

/* ========== 通用卡片 / Panel ========== */
.panel{
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-card);
  padding:12px 12px 14px;
}

/* 左：编辑区卡片 */
.panel-editor{
  display:flex;
  flex-direction:column;
}

/* 右：舞台卡片 */
.panel-stage{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* 舞台头部 */
.panel-stage-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.panel-stage-title{
  font-size:14px;
  font-weight:600;
  color:#111827;
}
.panel-stage-sub{
  font-size:12px;
  color:var(--text-soft);
}

/* 底部：操作步骤 / 家长引导 */
.panel-story{
  font-size:13px;
  color:var(--text-main);
}
.panel-story .panel-title{
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}
.panel-story .panel-sub{
  font-size:12px;
  color:var(--text-soft);
  margin-bottom:8px;
}

/* 步骤内容块 */
.story-block{
  display:flex;
  flex-direction:column;
  gap:10px;
  line-height:1.7;
}
.story-section h4{
  font-size:13px;
  margin-bottom:3px;
  color:#1d4ed8;
}
.story-section p{
  margin-bottom:4px;
}
.story-section ul{
  margin:2px 0 4px 1.2em;
}
.story-section li{
  margin-bottom:2px;
}

/* 家长提示 */
.parent-hint{
  margin-top:6px;
  padding:7px 9px;
  border-radius:var(--radius-md);
  background:rgba(219,234,254,.9);
  border:1px dashed rgba(59,130,246,.65);
  font-size:12px;
  color:#1d4ed8;
}

/* ========== 左侧：积木编辑器通用样式 ========== */
.editor-shell{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.editor-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.panel-title{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}
.panel-sub{
  font-size:12px;
  color:var(--text-soft);
  margin-top:2px;
}

/* 模式切换标签：积木 / 代码 */
.editor-tabs{
  display:inline-flex;
  padding:3px;
  border-radius:999px;
  background:#f3f4ff;
  border:1px solid rgba(191,219,254,.9);
}
.editor-tab{
  border:none;
  background:transparent;
  font-size:11px;
  color:var(--text-soft);
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
}
.editor-tab.active{
  background:linear-gradient(135deg,#dbeafe,#e0f2fe);
  color:#1d4ed8;
  font-weight:600;
}

/* 设备状态条（顶部 pills） */
.device-bar{
  margin-top:6px;
  padding:6px 9px;
  border-radius:999px;
  background:#f3f4ff;
  border:1px solid rgba(191,219,254,.9);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.device-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--text-soft);
}
.device-dot{
  width:9px;height:9px;
  border-radius:999px;
  background:#e5e7eb;
  box-shadow:0 0 0 1px rgba(148,163,184,.7);
}
.device-dot.online{
  background:#22c55e;
  box-shadow:0 0 0 1px rgba(34,197,94,.5),0 0 10px rgba(34,197,94,.7);
}
.device-label{
  font-size:11px;
}
.device-led{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 7px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(209,213,219,.9);
  font-size:11px;
}
.device-led-indicator{
  width:10px;height:10px;
  border-radius:50%;
  background:#e5e7eb;
  box-shadow:0 0 0 1px rgba(148,163,184,.7);
}
.device-led-indicator.on{
  background:#facc15;
  box-shadow:0 0 0 1px rgba(234,179,8,.9),0 0 10px rgba(250,204,21,.9);
}
.device-mode-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(219,234,254,.9);
  border:1px solid rgba(129,140,248,.7);
  font-size:11px;
  color:#1d4ed8;
}
.device-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.device-select{
  min-width:160px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(209,213,219,.95);
  background:#ffffff;
  font-size:11px;
  color:#111827;
}

/* 主编辑区域：积木 / 代码切换容器 */
.editor-main{
  position:relative;
  margin-top:6px;
  border-radius:var(--radius-md);
  border:1px solid rgba(191,219,254,.95);
  background:#e5edf9;
  min-height:360px;
  overflow:hidden;
}

/* Blockly 容器 */
#blocklyDiv{
  width:100%;
  height:100%;
  min-height:420px;
}

/* 代码模式文本区 */
#codeArea{
  display:none;
  width:100%;
  height:100%;
  border:none;
  box-sizing:border-box;
  padding:10px;
  background:#0f172a;
  color:#e5e7eb;
  font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  outline:none;
}

/* 提示浮层 */
.editor-hint{
  position:absolute;
  right:10px;
  bottom:10px;
  max-width:48%;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.95);
  border:1px dashed rgba(148,163,184,.9);
  font-size:11px;
  color:#374151;
  pointer-events:none;
}

/* 运行 / 烧录 按钮区域，通用容器仅靠 HTML 内联控制布局 */

/* ========== 右侧：城市舞台 / UNO / 日志 ========== */

/* 城市舞台容器（SVG 外框） */
.stage-city-wrapper{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(191,219,254,.95);
  background:radial-gradient(circle at 50% -40%,#bfdbfe,#1d4ed8 55%,#0f172a 100%);
}

/* SVG 自身：铺满宽度 */
.city-stage-svg{
  display:block;
  width:100%;
  height:auto;
}

/* 灯泡联动状态（与 JS 对应） */
.city-lamp-bulb{
  transition:.25s;
}
.city-lamp-glow{
  transition:.25s;
}
.city-lamp.on .city-lamp-bulb{
  filter:drop-shadow(0 0 22px rgba(250,204,21,.95));
}
.city-lamp.on .city-lamp-glow{
  fill:rgba(253,224,71,.3);
}

/* UNO 仿真卡片 */
.uno-stage{
  margin-top:8px;
  border-radius:var(--radius-md);
  padding:7px 8px 9px;
  background:linear-gradient(135deg,#eef2ff,#e0f2fe);
  border:1px solid rgba(165,180,252,.9);
}
.uno-stage-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#4b5563;
}
.uno-stage-svg{
  margin-top:6px;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.8);
  background:#020617;
}

/* 仿真 / 日志面板 */
.sim-panel{
  margin-top:8px;
  border-radius:var(--radius-md);
  border:1px solid rgba(209,213,219,.95);
  background:#f9fafb;
  padding:7px 9px 9px;
}
.sim-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:5px;
}
.sim-title{
  font-size:13px;
  font-weight:600;
  color:#111827;
}
.sim-log{
  height:110px;
  overflow:auto;
  font-size:11px;
  font-family:ui-monospace,Consolas,monospace;
  background:#0f172a;
  color:#e5e7eb;
  border-radius:var(--radius-sm);
  padding:6px 8px;
  border:1px solid #020617;
  white-space:pre-wrap;
}

/* ========== Blockly 主题（浅色儿童版） ========== */
.blocklySvg{
  background-color:#e5edf9 !important;
}
.blocklyToolboxDiv{
  background-color:#ffffff !important;
  color:#111827 !important;
  border-right:1px solid rgba(209,213,219,.9);
}
.blocklyTreeLabel{
  color:#111827 !important;
  font-size:12px !important;
}
.blocklyFlyoutBackground{
  fill:#f1f5f9 !important;
}
.blocklyFlyoutLabelText{
  fill:#6b7280 !important;
}
.blocklyText{
  fill:#111827 !important;
}

/* ========== 响应式微调 ========== */
@media (max-width:900px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .device-actions{
    width:100%;
    justify-content:flex-end;
  }
  .device-select{
    width:100%;
  }
}

@media (max-width:640px){
  .main{
    padding-inline:10px;
  }
  .mission-head{
    padding-inline:12px;
  }
  .editor-main{
    min-height:320px;
  }
  #blocklyDiv{
    min-height:360px;
  }
}
/* 亮橙顶栏文字改为白色 */
.header .brand-title{
  color:#ffffff !important;
}
.header .brand-sub{
  color:rgba(255,255,255,.85) !important;
}
.header .brand-icon{
  /* 如果希望图标里的文字也亮一点，可以用白色 */
  color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.25),
             0 8px 18px rgba(0,0,0,.25) !important;
}

/* 顶栏右侧按钮（返回元宇宙首页）改成白色文字 + 半透明白边 */
.header .btn{
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.55) !important;
  background:rgba(255,255,255,.12) !important;
}
.header .btn:hover{
  background:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
/* ========== 全局按钮美化升级 ========== */

/* 基础按钮：液态玻璃 + 轻光感边框 */
.btn{
  position:relative;
  border:none;
  cursor:pointer;
  border-radius:999px;
  font-size:13px;
  padding:7px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  white-space:nowrap;

  /* 液态玻璃感 */
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  color:#111827;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:
    0 10px 24px rgba(15,23,42,.16),
    inset 0 0 0 0.5px rgba(255,255,255,.8);
  backdrop-filter:blur(18px);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .18s ease,
    border-color .16s ease,
    filter .16s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 0, rgba(255,255,255,.35), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 32px rgba(15,23,42,.22),
    inset 0 0 0 0.5px rgba(255,255,255,.9);
  border-color:rgba(148,163,184,.85);
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
}

.btn:active{
  transform:translateY(0);
  box-shadow:
    0 6px 14px rgba(15,23,42,.25),
    inset 0 0 0 0.5px rgba(255,255,255,.9);
}

/* 禁用态：不做“假高亮” */
.btn:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
  box-shadow:
    0 4px 10px rgba(15,23,42,.08),
    inset 0 0 0 0.5px rgba(255,255,255,.75);
}

/* 主按钮：亮橙渐变 + 轻光晕 */
.btn-primary{
  position:relative;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(135deg, var(--accent-orange), #f97316);
  color:#111827;
  border:1px solid rgba(248,113,113,.95);
  box-shadow:
    0 14px 34px rgba(248,113,113,.55),
    0 0 0 0.5px rgba(255,255,255,.85) inset;
  backdrop-filter:blur(20px);
}

.btn-primary::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    radial-gradient(circle at 20% 0, rgba(255,255,255,.55), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.btn-primary:hover{
  filter:brightness(1.03);
  box-shadow:
    0 18px 40px rgba(248,113,113,.65),
    0 0 0 0.5px rgba(255,255,255,1) inset;
}

.btn-primary:disabled{
  opacity:.65;
  box-shadow:
    0 8px 20px rgba(248,113,113,.35),
    0 0 0 0.5px rgba(255,255,255,.9) inset;
}

/* 舞台播放按钮：更紧凑一点的主按钮 */
.btn-stage-play{
  font-size:12px;
  padding:5px 13px;
  min-height:0;
}

/* 顶栏按钮：保持白色系（覆盖上面全局按钮） */
.header .btn{
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.65) !important;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.42), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.10)) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    inset 0 0 0 0.5px rgba(255,255,255,.9) !important;
}

.header .btn:hover{
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.14)) !important;
}

/* 设备条里的小按钮，略收一点，避免压住文字 */
.device-bar .btn{
  font-size:11px;
  padding:4px 10px;
  box-shadow:
    0 6px 14px rgba(15,23,42,.16),
    inset 0 0 0 0.5px rgba(255,255,255,.85);
}
/* ========== 全局按钮统一美化（包含运行仿真 / 播放动画） ========== */

/* 所有 button 和 .btn 共用的基础外观 */
button,
.btn{
  position:relative;
  border:none;
  cursor:pointer;
  border-radius:999px;
  font-size:13px;
  padding:7px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  white-space:nowrap;

  /* 液态玻璃基底 */
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  color:#111827;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:
    0 10px 24px rgba(15,23,42,.16),
    inset 0 0 0 0.5px rgba(255,255,255,.8);
  backdrop-filter:blur(18px);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .18s ease,
    border-color .16s ease,
    filter .16s ease;
}

button::before,
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 0, rgba(255,255,255,.35), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

button:hover,
.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 32px rgba(15,23,42,.22),
    inset 0 0 0 0.5px rgba(255,255,255,.9);
  border-color:rgba(148,163,184,.85);
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
}

button:active,
.btn:active{
  transform:translateY(0);
  box-shadow:
    0 6px 14px rgba(15,23,42,.25),
    inset 0 0 0 0.5px rgba(255,255,255,.9);
}

button:disabled,
.btn:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
  box-shadow:
    0 4px 10px rgba(15,23,42,.08),
    inset 0 0 0 0.5px rgba(255,255,255,.75);
}

/* 主色按钮：运行仿真 / 播放动画这类高优先级 */
button.btn-primary,
.btn-primary{
  position:relative;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(135deg, var(--accent-orange), #f97316);
  color:#111827;
  border:1px solid rgba(248,113,113,.95);
  box-shadow:
    0 14px 34px rgba(248,113,113,.55),
    0 0 0 0.5px rgba(255,255,255,.85) inset;
  backdrop-filter:blur(20px);
}

button.btn-primary::before,
.btn-primary::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    radial-gradient(circle at 20% 0, rgba(255,255,255,.55), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

button.btn-primary:hover,
.btn-primary:hover{
  filter:brightness(1.03);
  box-shadow:
    0 18px 40px rgba(248,113,113,.65),
    0 0 0 0.5px rgba(255,255,255,1) inset;
}

/* 顶栏右上“返回星图”再覆盖成白字 */
.header .btn,
.header button{
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.65) !important;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.42), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.10)) !important;
}