*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Comic Sans MS','Nunito','Microsoft YaHei',sans-serif;overflow:hidden;background:linear-gradient(135deg,#e8f4fc 0%,#c9e4f6 100%);user-select:none}
#canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}
#canvas-container canvas{cursor:grab}

/* === 顶部栏 === */
#top-bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.97),rgba(240,248,255,0.93));
  border-bottom:3px solid #FF6B35;box-shadow:0 3px 15px rgba(0,0,0,0.12);
  border-radius:0 0 16px 16px;margin:0 8px;
}
#logo{font-size:22px;font-weight:bold;color:#FF6B35;text-shadow:1px 1px 0 #fff}
#logo span{color:#4ECDC4}
#mode-switch{
  display:flex;background:#fff;border-radius:12px;padding:3px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.1);border:2px solid #eee;
}
.mode-btn{padding:6px 18px;border:none;border-radius:10px;font-size:14px;font-weight:bold;
  cursor:pointer;transition:all 0.2s;background:transparent;color:#888;}
.mode-btn.active{background:linear-gradient(135deg,#FF6B35,#ff8f5a);color:#fff;
  box-shadow:0 2px 8px rgba(255,107,53,0.4)}
#top-actions{display:flex;gap:8px}

/* === 左侧积木面板 === */
#left-panel{
  position:fixed;left:10px;top:60px;bottom:70px;width:200px;z-index:90;
  background:rgba(255,255,255,0.95);border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);border:2px solid #ddd;
  display:flex;flex-direction:column;overflow:hidden;
}
.panel-header{padding:10px;font-weight:bold;font-size:15px;color:#333;
  background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;
  border-radius:14px 14px 0 0;text-align:center}
.panel-section{border-bottom:1px solid #eee}
.section-toggle{
  width:100%;padding:8px 12px;border:none;background:#f8f9fa;color:#666;
  font-size:13px;font-weight:bold;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:background 0.2s,color 0.2s;
}
.section-toggle:hover{background:#eef2f7;color:#444}
.section-toggle .toggle-arrow{transition:transform 0.2s}
.section-toggle.collapsed .toggle-arrow{transform:rotate(-90deg)}
.section-title{padding:8px 12px;font-size:13px;color:#666;font-weight:bold;
  background:#f8f9fa;display:flex;align-items:center;gap:6px}
.section-content-collapsed{display:none}
.brick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}
.brick-item{
  aspect-ratio:1;border-radius:10px;border:2px solid transparent;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:all 0.15s;font-size:11px;font-weight:bold;color:#555;
  background:#fff;position:relative;padding:4px;
}
.brick-item:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:5}
.brick-item.selected{border-color:#FF6B35;background:#fff5f0;box-shadow:0 0 12px rgba(255,107,53,0.35)}
.brick-icon{width:48px;height:36px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:3px}
/* 用CSS画真实乐高砖形状 */
.bicon{position:relative;background:#ccc;border-radius:3px;box-sizing:border-box}
.bicon::after{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;
  border-radius:50%;background:rgba(0,0,0,0.08)}
.stud{position:absolute;width:7px;height:5px;border-radius:50%;
  background:linear-gradient(180deg,#ddd 40%,#aaa 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.6),0 1px 1px rgba(0,0,0,0.2);
  top:-2px}
/* 各尺寸砖的CSS图标 */
.b-1x1 .bicon{width:18px;height:16px}.b-1x1 .stud{left:5.5px}
.b-1x2 .bicon{width:18px;height:28px}.b-1x2 .s1{left:5.5px;top:-2px}.b-1x2 .s2{left:5.5px;top:9px}
.b-2x1 .bicon{width:30px;height:16px}.b-2x1 .s1{left:4px}.b-2x1 .s2{left:17px}
.b-2x2 .bicon{width:30px;height:28px}.b-2x2 .s1{left:4px;top:-2px}.b-2x2 .s2{left:17px;top:-2px}.b-2x2 .s3{left:4px;top:9px}.b-2x2 .s4{left:17px;top:9px}
.b-1x3 .bicon{width:18px;height:40px}.b-1x3 .s1{left:5.5px;top:-2px}.b-1x3 .s2{left:5.5px;top:9px}.b-1x3 .s3{left:5.5px;top:20px}
.b-3x1 .bicon{width:42px;height:16px}.b-3x1 .s1{left:4px}.b-3x1 .s2{left:17px}.b-3x1 .s3{left:30px}
.b-2x3 .bicon{width:30px;height:40px}
.b-2x3 .s1{left:4px;top:-2px}.b-2x3 .s2{left:17px;top:-2px}
.b-2x3 .s3{left:4px;top:9px}.b-2x3 .s4{left:17px;top:9px}
.b-2x3 .s5{left:4px;top:20px}.b-2x3 .s6{left:17px;top:20px}
.b-2x4 .bicon{width:30px;height:52px}
.b-2x4 .s1{left:4px;top:-2px}.b-2x4 .s2{left:17px;top:-2px}
.b-2x4 .s3{left:4px;top:9px}.b-2x4 .s4{left:17px;top:9px}
.b-2x4 .s5{left:4px;top:20px}.b-2x4 .s6{left:17px;top:20px}
.b-2x4 .s7{left:4px;top:31px}.b-2x4 .s8{left:17px;top:31px}
.b-3x2 .bicon{width:42px;height:28px}
.b-3x2 .s1{left:4px;top:-2px}.b-3x2 .s2{left:17px;top:-2px}.b-3x2 .s3{left:30px;top:-2px}
.b-3x2 .s4{left:4px;top:9px}.b-3x2 .s5{left:17px;top:9px}.b-3x2 .s6{left:30px;top:9px}
.b-4x2 .bicon{width:54px;height:28px}
.b-4x2 .s1{left:4px;top:-2px}.b-4x2 .s2{left:17px;top:-2px}.b-4x2 .s3{left:30px;top:-2px}.b-4x2 .s4{left:43px;top:-2px}
.b-4x2 .s5{left:4px;top:9px}.b-4x2 .s6{left:17px;top:9px}.b-4x2 .s7{left:30px;top:9px}.b-4x2 .s8{left:43px;top:9px}
.b-1x4 .bicon{width:18px;height:52px}.b-1x4 .s1{left:5.5px;top:-2px}.b-1x4 .s2{left:5.5px;top:9px}.b-1x4 .s3{left:5.5px;top:20px}.b-1x4 .s4{left:5.5px;top:31px}
.b-4x1 .bicon{width:54px;height:16px}.b-4x1 .s1{left:4px}.b-4x1 .s2{left:17px}.b-4x1 .s3{left:30px}.b-4x1 .s4{left:43px}
.b-3x3 .bicon{width:42px;height:40px}
.b-3x3 .s1{left:4px;top:-2px}.b-3x3 .s2{left:17px;top:-2px}.b-3x3 .s3{left:30px;top:-2px}
.b-3x3 .s4{left:4px;top:9px}.b-3x3 .s5{left:17px;top:9px}.b-3x3 .s6{left:30px;top:9px}
.b-3x3 .s7{left:4px;top:20px}.b-3x3 .s8{left:17px;top:20px}.b-3x3 .s9{left:30px;top:20px}
.b-2x6 .bicon{width:30px;height:76px}
.b-2x6 .s1{left:4px;top:-2px}.b-2x6 .s2{left:17px;top:-2px}
.b-2x6 .s3{left:4px;top:9px}.b-2x6 .s4{left:17px;top:9px}
.b-2x6 .s5{left:4px;top:20px}.b-2x6 .s6{left:17px;top:20px}
.b-2x6 .s7{left:4px;top:31px}.b-2x6 .s8{left:17px;top:31px}
.b-2x6 .s9{left:4px;top:42px}.b-2x6 .s10{left:17px;top:42px}
.b-2x6 .s11{left:4px;top:53px}.b-2x6 .s12{left:17px;top:53px}
.b-4x4 .bicon{width:54px;height:52px}
.b-4x4 .s1{left:4px;top:-2px}.b-4x4 .s2{left:17px;top:-2px}.b-4x4 .s3{left:30px;top:-2px}.b-4x4 .s4{left:43px;top:-2px}
.b-4x4 .s5{left:4px;top:9px}.b-4x4 .s6{left:17px;top:9px}.b-4x4 .s7{left:30px;top:9px}.b-4x4 .s8{left:43px;top:9px}
.b-4x4 .s9{left:4px;top:20px}.b-4x4 .s10{left:17px;top:20px}.b-4x4 .s11{left:30px;top:20px}.b-4x4 .s12{left:43px;top:20px}
.b-4x4 .s13{left:4px;top:31px}.b-4x4 .s14{left:17px;top:31px}.b-4x4 .s15{left:30px;top:31px}.b-4x4 .s16{left:43px;top:31px}
.b-6x2 .bicon{width:78px;height:28px}
.b-6x2 .s1{left:4px;top:-2px}.b-6x2 .s2{left:17px;top:-2px}.b-6x2 .s3{left:30px;top:-2px}.b-6x2 .s4{left:43px;top:-2px}.b-6x2 .s5{left:56px;top:-2px}.b-6x2 .s6{left:69px;top:-2px}
.b-6x2 .s7{left:4px;top:9px}.b-6x2 .s8{left:17px;top:9px}.b-6x2 .s9{left:30px;top:9px}.b-6x2 .s10{left:43px;top:9px}.b-6x2 .s11{left:56px;top:9px}.b-6x2 .s12{left:69px;top:9px}

/* 场景中积木选中高亮效果 */
.scene-brick-selected > * {
  filter: brightness(1.3) drop-shadow(0 0 8px rgba(255,200,0,0.8)) !important;
}
.brick-outline{
  position:absolute;inset:-3px;border:3px solid #FFD700;
  border-radius:8px;pointer-events:none;z-index:10;
  animation:pulseOutline 1s ease-in-out infinite alternate;
}
@keyframes pulseOutline{
  from{box-shadow:0 0 8px rgba(255,215,0,0.5)}to{box-shadow:0 0 20px rgba(255,215,0,0.9)}
}
.brick-label{font-size:10px;text-align:center;line-height:1.2}

/* === 颜色面板 === */
.color-palette{display:flex;flex-wrap:wrap;gap:5px;padding:8px;justify-content:center}
.color-swatch{
  width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:all 0.15s;
}
.color-swatch:hover{transform:scale(1.2)}
.color-swatch.selected{border-color:#333;transform:scale(1.2);box-shadow:0 0 8px rgba(0,0,0,0.3)}

/* === 右侧信息栏 === */
#right-panel{
  position:fixed;right:10px;top:60px;width:220px;z-index:90;
  display:flex;flex-direction:column;gap:8px;
}
.info-card{
  background:rgba(255,255,255,0.95);border-radius:14px;padding:12px;
  box-shadow:0 3px 15px rgba(0,0,0,0.08);border:2px solid #eee;
}
.info-card h3{font-size:13px;color:#666;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.info-value{font-size:22px;font-weight:bold;color:#FF6B35}
.stat-row{display:flex;justify-content:space-between;margin:4px 0;font-size:12px}
.stat-label{color:#888}
.stat-num{font-weight:bold;color:#333}

/* === 底部工具栏 === */
#bottom-bar{
  position:fixed;bottom:10px;left:50%;transform:translateX(-50%);
  z-index:100;display:flex;gap:8px;padding:8px 16px;
  background:rgba(255,255,255,0.95);border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,0.12);border:2px solid #ddd;
}
#camera-pad{
  position:fixed;right:12px;bottom:14px;z-index:101;
  display:flex;flex-direction:column;gap:8px;padding:10px;
  background:rgba(255,255,255,0.95);border-radius:18px;
  box-shadow:0 4px 20px rgba(0,0,0,0.12);border:2px solid #ddd;
}
.camera-pad-title{
  font-size:12px;font-weight:bold;color:#666;text-align:center;
}
.camera-pad-row{
  display:flex;gap:8px;
}
.camera-btn{
  width:42px;height:42px;border:none;border-radius:12px;
  background:#f5f5f5;color:#555;font-size:20px;font-weight:bold;
  cursor:pointer;transition:all 0.15s;border:2px solid #eee;
}
.camera-btn:hover{
  background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
.camera-btn:active{transform:translateY(0)}
.tool-btn{
  padding:10px 16px;border:none;border-radius:12px;font-size:14px;font-weight:bold;
  cursor:pointer;display:flex;align-items:center;gap:5px;
  transition:all 0.15s;color:#555;background:#f5f5f5;border:2px solid #eee;
}
.tool-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.tool-btn:active{transform:translateY(0)}
.tool-btn.danger:hover{background:#ffebee;color:#d32f2f;border-color:#ef9a9a}
.tool-btn.primary{background:linear-gradient(135deg,#4CAF50,#81C784);color:#fff;border:none}
.tool-btn.primary:hover{box-shadow:0 4px 15px rgba(76,175,80,0.4)}

/* === 蓝图选择弹窗 === */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;
  display:none;justify-content:center;align-items:center;
}
.modal-overlay.show{display:flex}
.modal-box{
  background:#fff;border-radius:20px;padding:24px;width:500px;max-height:80vh;overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
}
.modal-title{text-align:center;font-size:22px;color:#FF6B35;margin-bottom:16px}
.blueprint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bp-card{
  border-radius:14px;border:2px solid #eee;overflow:hidden;cursor:pointer;
  transition:all 0.2s;background:#fafafa;
}
.bp-card:hover{border-color:#4ECDC4;transform:scale(1.03);box-shadow:0 6px 20px rgba(78,205,196,0.2)}
.bp-preview{height:120px;display:flex;align-items:center;justify-content:center;
  font-size:48px;background:linear-gradient(135deg,#f5f7fa,#e8ecf1)}
.bp-info{padding:10px}
.bp-name{font-weight:bold;font-size:14px;color:#333}
.bp-detail{font-size:11px;color:#888;margin-top:3px}
.bp-stars{color:#FFD700;font-size:12px;margin-top:3px}
.locked{opacity:0.5;position:relative}
.locked::after{content:'🔒';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);font-size:36px}

/* === 关卡进度条 === */
.level-progress{width:100%;height:12px;background:#eee;border-radius:6px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:6px;transition:width 0.3s;
  background:linear-gradient(90deg,#4CAF50,#8BC34A)}

/* === 提示框 === */
#toast{
  position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:300;padding:12px 24px;border-radius:16px;font-size:16px;font-weight:bold;
  color:#fff;opacity:0;transition:all 0.3s;pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,0.2)
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === 帮助提示 === */
#help-hint{
  position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
  z-index:80;padding:8px 20px;background:rgba(0,0,0,0.65);color:#fff;
  border-radius:20px;font-size:13px;pointer-events:none;opacity:0;transition:opacity 0.3s
}
#help-hint.show{opacity:1}

/* === 蓝图预览小窗 === */
#blueprint-hint{
  position:fixed;right:240px;top:60px;width:160px;z-index:85;
  background:rgba(255,255,255,0.95);border-radius:12px;
  border:2px dashed #4ECDC4;padding:10px;display:none;text-align:center
}
#blueprint-hint.show{display:block}
#blueprint-hint h4{font-size:12px;color:#4ECDC4;margin-bottom:6px}
#bp-mini-canvas{width:140px;height:140px;border-radius:8px;background:#f0f4f8}

/* === 关卡完成庆祝 === */
#celebration{
  position:fixed;inset:0;z-index:250;pointer-events:none;display:none
}
#celebration.show{display:block}
.confetti{position:absolute;width:10px;height:10px;pointer-events:none}

/* === 滚动区域 === */
.scroll-area{flex:1;overflow-y:auto}
.scroll-area::-webkit-scrollbar{width:5px}
.scroll-area::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* === 关卡选择标签页 === */
.tab-row{display:flex;gap:4px;padding:6px;background:#f5f5f5;border-radius:10px;margin:8px}
.tab-btn{flex:1;padding:6px;border:none;border-radius:8px;font-size:12px;font-weight:bold;
  cursor:pointer;background:transparent;color:#888;transition:all 0.2s}
.tab-btn.active{background:#fff;color:#FF6B35;box-shadow:0 2px 6px rgba(0,0,0,0.1)}