/* 墓室巡礼 · 全景机器人（/tomb-walk）
 * 乐高主题：积木黄/橙配色 + 凸点纹理；深色页头与全站 news-* 布局保持一致。
 * 坐标系：场景内一切定位使用 0–100 百分比（相对全景底图），毫米换算见页面比例尺。
 */

.tw-page{min-height:100dvh;background:#eef3ef;color:#20363a}
.tw-main{width:min(1240px,calc(100% - 44px));margin:0 auto;padding:40px 0 64px}
.tw-heading{max-width:820px;margin-bottom:26px}
.tw-heading h1{max-width:none;margin:10px 0 12px;font-size:clamp(26px,3.4vw,38px);line-height:1.25;color:#142f35}
.tw-heading p{margin:0;color:#607176;line-height:1.8}

.tw-layout{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:22px;align-items:start}
.tw-panel{background:#fff;border:1px solid rgba(32,54,58,.14);box-shadow:0 14px 30px rgba(32,54,58,.08);padding:22px}
.tw-panel-heading{margin-bottom:14px}
.tw-panel-heading h2{margin:4px 0 0;font-size:20px;color:#142f35}
.public-kicker{margin:0;font-size:11px;font-weight:900;letter-spacing:.12em;color:#1b6e68;text-transform:uppercase}

/* ---------- 左栏：积木面板 ---------- */
.tw-palette{display:grid;gap:10px;padding:14px;background:#f4f7f5;border:1px dashed rgba(32,54,58,.25);border-radius:8px}
.tw-palette-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tw-add{border:0;border-radius:6px;padding:9px 12px;font-weight:900;font-size:14px;color:#142f35;cursor:pointer;box-shadow:0 3px 0 rgba(20,47,53,.25);transition:transform .08s ease}
.tw-add:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(20,47,53,.25)}
.tw-add-forward{background:#f7c948}
.tw-add-turn{background:#fbd786}
.tw-add-goto{background:#e8a13f;color:#fff}
.tw-field{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#45595e}
.tw-field input{width:64px;padding:7px 8px;border:1px solid rgba(32,54,58,.3);border-radius:6px;font:inherit}
.tw-palette select{flex:1;min-width:150px;padding:8px;border:1px solid rgba(32,54,58,.3);border-radius:6px;font:inherit;background:#fff}

/* ---------- 左栏：积木程序序列 ---------- */
.tw-block-list{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px;min-height:44px}
.tw-empty{padding:14px;border:1px dashed rgba(32,54,58,.25);border-radius:8px;color:#7d8f94;font-size:13px;text-align:center}
.tw-block{position:relative;display:flex;align-items:center;gap:10px;padding:11px 40px 11px 14px;border-radius:8px;font-weight:800;font-size:14px;color:#142f35;box-shadow:0 3px 0 rgba(20,47,53,.22);border:2px solid transparent}
.tw-block-forward{background:#f7c948}
.tw-block-turn{background:#fbd786}
.tw-block-goto{background:#e8a13f;color:#fff}
/* 乐高凸点：每块积木左上角两颗小圆钉 */
.tw-studs{position:absolute;left:10px;top:-6px;display:flex;gap:6px}
.tw-studs i{width:12px;height:6px;border-radius:3px 3px 0 0;background:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 -1px 0 rgba(20,47,53,.15)}
.tw-block-icon{font-size:16px}
.tw-block-text{flex:1}
.tw-block-del{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:rgba(20,47,53,.18);color:inherit;font-size:15px;font-weight:900;cursor:pointer;line-height:1}
.tw-block-del:hover{background:rgba(20,47,53,.32)}
.tw-block.is-active{border-color:#142f35;box-shadow:0 0 0 3px rgba(247,201,72,.75),0 3px 0 rgba(20,47,53,.22);animation:twBlockPulse 1s ease-in-out infinite}
@keyframes twBlockPulse{50%{box-shadow:0 0 0 6px rgba(247,201,72,.35),0 3px 0 rgba(20,47,53,.22)}}

/* ---------- 左栏：运行控制与状态 ---------- */
.tw-runbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tw-run{border:0;border-radius:6px;padding:11px 20px;background:#1b6e68;color:#fff;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 3px 0 #0f4b46}
.tw-run:disabled{background:#9db3b0;box-shadow:none;cursor:not-allowed}
.tw-ghost{border:1px solid rgba(32,54,58,.3);border-radius:6px;padding:10px 14px;background:#fff;color:#20363a;font-weight:800;cursor:pointer}
.tw-ghost:hover{background:#f4f7f5}
.tw-warnings{margin:12px 0 0;padding:10px 12px;border-radius:6px;background:#fdf1e3;border:1px solid #e8a13f;color:#8a5a12;font-size:13px;line-height:1.6}
.tw-plan-info{margin:10px 0 0;font-size:13px;color:#607176}
.tw-telemetry{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tw-telemetry>div{padding:10px;background:#142f35;border-radius:8px;color:#fff;display:grid;gap:4px}
.tw-telemetry span{font-size:11px;color:#9fc3bd}
.tw-telemetry strong{font-size:13px;line-height:1.4}

/* ---------- 左栏：AI 一句话编程 ---------- */
.tw-ai-box{margin-top:18px;padding:16px;border-radius:10px;background:linear-gradient(135deg,#142f35,#1b4a52);color:#fff}
.tw-ai-box .public-kicker{color:#f7c948}
.tw-ai-label{display:block;margin:8px 0;font-size:13px;color:#cfe2de}
.tw-ai-row{display:flex;gap:8px}
.tw-ai-row input{flex:1;min-width:0;padding:10px 12px;border:0;border-radius:6px;font:inherit}
.tw-ai-ask{border:0;border-radius:6px;padding:10px 14px;background:#f7c948;color:#142f35;font-weight:900;cursor:pointer;white-space:nowrap}
.tw-ai-ask:disabled{opacity:.6;cursor:wait}
.tw-ai-status{margin:10px 0 0;font-size:13px;color:#cfe2de;min-height:1.2em;line-height:1.6}
.tw-ai-fallback{display:inline-block;padding:2px 8px;border-radius:4px;background:#e8a13f;color:#fff;font-weight:800}

/* ---------- 右栏：全景场景 ---------- */
.tw-stage{position:relative;width:100%;aspect-ratio:2/1;border-radius:10px;overflow:hidden;background:#0d2226 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tw-overlay{position:absolute;inset:0;width:100%;height:100%}
.tw-walk-poly{fill:rgba(27,110,104,.16);stroke:rgba(255,255,255,.35);stroke-width:.3}
.tw-obstacle{fill:rgba(214,69,51,.4);stroke:#d64533;stroke-width:.35;stroke-dasharray:1.4 1}
.tw-obstacle-label{font-size:2.1px;fill:#fff;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(20,47,53,.85);stroke-width:.45}
.tw-path-line{fill:none;stroke:#f7c948;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 5;filter:drop-shadow(0 0 2px rgba(20,47,53,.8))}

/* 热点标记：发光圆点 + 名称标签 */
.tw-markers{position:absolute;inset:0}
.tw-marker{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;background:none;border:0;padding:4px;cursor:pointer;z-index:3}
.tw-marker-dot{width:14px;height:14px;border-radius:50%;background:#f7c948;border:2px solid #fff;box-shadow:0 0 0 3px rgba(247,201,72,.45),0 0 12px 3px rgba(247,201,72,.8);animation:twMarkerGlow 2.2s ease-in-out infinite}
@keyframes twMarkerGlow{50%{box-shadow:0 0 0 5px rgba(247,201,72,.25),0 0 16px 5px rgba(247,201,72,.55)}}
.tw-marker:hover .tw-marker-dot,.tw-marker:focus-visible .tw-marker-dot{background:#e8a13f}
.tw-marker-name{padding:2px 7px;border-radius:4px;background:rgba(20,47,53,.88);color:#fff;font-size:11px;font-weight:800;white-space:nowrap;pointer-events:none}

/* 机器人：橙色小车 + 朝右箭头（heading 0 = 地图正右方，JS 用 rotate 转向） */
.tw-robot{position:absolute;left:18%;top:82%;width:30px;height:22px;border-radius:6px;background:linear-gradient(#f7c948,#e8a13f);border:2px solid #142f35;box-shadow:0 2px 8px rgba(0,0,0,.5);transform:translate(-50%,-50%);z-index:4;transition:none}
.tw-robot::before{content:"";position:absolute;right:-11px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left-color:#e8a13f;filter:drop-shadow(1px 0 0 #142f35)}
.tw-robot::after{content:"";position:absolute;left:4px;right:4px;bottom:-5px;height:5px;border-radius:3px;background:#142f35}
.tw-robot-light{position:absolute;left:5px;top:4px;width:6px;height:6px;border-radius:50%;background:#7cf2c4;box-shadow:0 0 6px 2px rgba(124,242,196,.8)}

/* 比例尺：宽度恒为场景 5%，标注真实厘米数 */
.tw-scalebar{position:absolute;left:14px;bottom:12px;display:grid;gap:3px;z-index:3}
.tw-scalebar i{display:block;width:5vw;max-width:64px;height:6px;border:2px solid #fff;border-top:0;background:rgba(20,47,53,.5)}
.tw-scalebar span{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* 热点讲解卡：到达热点后弹出 */
.tw-card{position:absolute;right:14px;bottom:14px;width:min(300px,72%);padding:16px 18px;border-radius:10px;background:rgba(20,47,53,.94);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:5;border-left:5px solid #f7c948}
.tw-card-kicker{margin:0 0 4px;font-size:11px;font-weight:900;letter-spacing:.1em;color:#f7c948}
.tw-card h3{margin:0 0 8px;font-size:17px}
.tw-card p{margin:0;font-size:13px;line-height:1.75;color:#dcebe5}
.tw-card small{display:block;margin-top:8px;font-size:11px;color:#9fc3bd}
.tw-card-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:15px;cursor:pointer;line-height:1}
.tw-card-close:hover{background:rgba(255,255,255,.3)}

.tw-scene-foot{display:grid;gap:6px;margin-top:12px}
.tw-scale-note{margin:0;font-size:13px;color:#45595e;line-height:1.7;font-weight:600}
.tw-scene-hint{margin:0;font-size:12px;color:#7d8f94}

@media(max-width:980px){
  .tw-layout{grid-template-columns:1fr}
  .tw-scene{order:-1}
  .tw-marker-name{font-size:10px}
}

/* 热点讲解卡 · 真实影像联动 */
.tw-card-media{margin:10px 0 8px}
.tw-card-media video{display:block;width:100%;aspect-ratio:16/9;border-radius:6px;background:#0d1b1e}
.tw-card-media-label{margin:6px 0 0;font-size:11px;line-height:1.5;color:#f7c948}

/* 真实 SPIKE 联动面板（方案B · 网页蓝牙直连） */
.tw-real-box{margin-top:16px;padding-top:14px;border-top:2px solid rgba(23,35,43,.14)}
.tw-real-box h3{margin:4px 0 10px;font-size:16px;color:#27353a}
.tw-real-box h3 small{margin-left:6px;font-size:11px;font-weight:600;color:#66747b}
.tw-real-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tw-real-actions button{min-height:38px;padding:0 13px;border:1px solid rgba(23,35,43,.18);border-radius:4px;background:#fff;color:#27353a;cursor:pointer;font:inherit;font-size:12px;font-weight:800}
.tw-real-actions button[data-scene-primary]{border-color:#1b6e68;background:#1b6e68;color:#fff}
.tw-real-actions button:disabled{cursor:not-allowed;opacity:.45}
.tw-real-actions button:not(:disabled):active{transform:translateY(1px)}
.real-robot-status{display:inline-flex;align-items:center;min-height:38px;padding:0 11px;border-left:3px solid #a34d2b;background:#fff;color:#27353a;font-size:12px;font-weight:900}
.real-robot-status[data-state="ok"]{border-left-color:#1b6e68}
.real-robot-status[data-state="error"]{border-left-color:#b24b36}
.real-robot-log{min-height:60px;max-height:140px;overflow:auto;margin:12px 0 0;padding:11px 13px;border-radius:6px;background:#182d31;color:#d7efe6;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}
.tw-real-hint{margin:10px 0 0;font-size:12px;line-height:1.7;color:#66747b}
.tw-real-scale{display:grid;gap:4px;font-size:11px;font-weight:800;color:#66747b}
.tw-real-scale select{min-height:38px;padding:0 8px;border:1px solid rgba(23,35,43,.18);border-radius:4px;background:#fff;color:#27353a;font:inherit;font-size:12px;font-weight:700}

/* ---------- SPIKE Essential 玩法：电机机关 + 传感器任务 ---------- */

/* 电机机关：热点位置的可旋转装置（转盘/展台） */
.tw-gadget{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(16,38,44,.72);border:2px solid rgba(247,201,72,.85);box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:2;pointer-events:none}
.tw-gadget-disc{position:absolute;inset:5px;border-radius:50%;transition:box-shadow .3s}
.tw-gadget-wheel .tw-gadget-disc{background:conic-gradient(#f7c948 0 45deg,#2f6f6a 45deg 90deg,#f7c948 90deg 135deg,#3d8b84 135deg 180deg,#f7c948 180deg 225deg,#2f6f6a 225deg 270deg,#f7c948 270deg 315deg,#3d8b84 315deg 360deg)}
.tw-gadget-wheel .tw-gadget-disc::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#fff8e2;box-shadow:0 0 4px rgba(0,0,0,.45)}
.tw-gadget-turntable .tw-gadget-disc{background:radial-gradient(circle at 50% 50%,#e8c39a 0 18%,#c87f4e 20% 38%,#8a5a36 40% 62%,#5d3b24 64% 100%)}
.tw-gadget-turntable .tw-gadget-disc::after{content:"";position:absolute;left:50%;top:26%;width:9px;height:12px;transform:translateX(-50%);border-radius:40% 40% 30% 30%;background:#f3e2c7;box-shadow:0 0 3px rgba(0,0,0,.5)}
.tw-gadget.is-spinning{border-color:#ffd970;box-shadow:0 0 0 4px rgba(247,201,72,.28),0 4px 16px rgba(0,0,0,.45)}
.tw-gadget.is-spinning .tw-gadget-disc{animation:tw-spin 1.1s linear infinite}
@keyframes tw-spin{to{transform:rotate(360deg)}}

/* 热点标记上的 ⚙ 角标：提示这里有电机机关 */
.tw-marker-gear{position:absolute;right:-8px;top:-9px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#f7c948;color:#27353a;font-size:11px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* 颜色传感器标记：地面上的彩色圆点 + 脉冲光圈 */
.tw-sensor-color{position:absolute;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 7px rgba(0,0,0,.45);z-index:2;pointer-events:none}
.tw-sensor-color::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid currentColor;opacity:.5;animation:tw-pulse 2.4s ease-out infinite}
@keyframes tw-pulse{0%{transform:scale(.6);opacity:.65}80%{transform:scale(1.35);opacity:0}100%{opacity:0}}

/* 距离传感器侦测区：虚线椭圆圈（与触发判定同口径的百分比坐标） */
.tw-sensor-dist{position:absolute;transform:translate(-50%,-50%);border:2px dashed rgba(87,199,255,.75);border-radius:50%;background:rgba(87,199,255,.07);z-index:1;pointer-events:none}

/* 任务记录：传感器侦测与电机任务的时间线 */
.tw-taskbox{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(23,35,43,.2)}
.tw-task-log{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;max-height:150px;overflow:auto}
.tw-task-log li{padding:7px 10px;border-left:3px solid #2f6f6a;border-radius:4px;background:rgba(47,111,106,.09);font-size:12px;line-height:1.55;color:#27353a}
.tw-task-log li.tw-task-empty{border-left-color:#a7b4b8;background:rgba(23,35,43,.05);color:#7d8f94}

/* 热点讲解卡里的「启动电机」按钮 */
.tw-card-motor{display:block;width:100%;margin-top:10px;padding:9px 12px;border:0;border-radius:6px;background:#f7c948;color:#27353a;font:inherit;font-size:13px;font-weight:900;cursor:pointer;text-align:left}
.tw-card-motor:hover{background:#ffd970}
.tw-card-motor:active{transform:translateY(1px)}

/* 电机积木添加按钮配色（与前进/转向/走到热点区分） */
.tw-add-motor{border-color:#8a5a36!important;background:#8a5a36!important;color:#fff!important}
.tw-add-motor:hover{background:#a06a40!important}