/* === DSP Mall · Game-View Top-Down Visualization === */
/* 与 icons.css 配合使用，提供 board / grid / belt / sorter / lab-stack 等组件 */

.gv-section {
  margin: 24px 0;
  padding: 22px 18px 18px;
  background:
    radial-gradient(ellipse at top, rgba(120, 90, 60, 0.18), transparent 70%),
    rgba(28, 22, 18, 0.85);
  border: 1px solid #5a4a3a;
  border-left: 3px solid var(--phase-yellow, #FFD23A);
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
}
.gv-section::before {
  content: ''; position: absolute; top: 10px; left: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--phase-green, #3DDC97);
  box-shadow: 12px 0 0 var(--phase-yellow, #FFD23A), 24px 0 0 var(--phase-red, #FF6B47);
  opacity: 0.7;
}
.gv-section::after {
  content: 'IN-GAME ICONS · TOP-DOWN';
  position: absolute; top: 10px; right: 14px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: 0.15em; color: var(--phase-yellow, #FFD23A); opacity: 0.7;
}
.gv-title {
  font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--phase-yellow, #FFD23A); letter-spacing: 0.15em;
  margin: 8px 0 14px; padding-left: 18px;
}
.gv-caption {
  margin-top: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--fg-muted, #8295b3);
  text-align: center;
  letter-spacing: 0.05em;
}
.gv-scroll {
  overflow-x: auto; padding: 8px 4px 14px;
}
.gv-board {
  position: relative;
  background-color: #3a2f24;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid #6a5a4a;
  border-radius: 2px;
  padding: 0;
  display: inline-block;
  min-width: 100%;
}
.gv-board.is-night {
  background-color: #1a2030;
  background-image:
    linear-gradient(rgba(63,191,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,191,255,0.06) 1px, transparent 1px);
}
.gv-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 16), 48px);
  grid-template-rows: repeat(var(--rows, 12), 48px);
  position: relative;
}
.gv-grid > * {
  grid-row: var(--r, 1) / span var(--rs, 1);
  grid-column: var(--c, 1) / span var(--cs, 1);
  position: relative;
}
.gv-grid .gi {
  align-self: center; justify-self: center;
}
/* 占地容器：把 .gi 图标居中放在 N×N tile 单元里 */
.gv-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(255,255,255,0.02);
  border-radius: 3px;
  outline: 1px dashed rgba(255,255,255,0.05);
  outline-offset: -2px;
}
.gv-cell.is-asm    { background: linear-gradient(135deg, rgba(63,191,255,0.10), rgba(63,191,255,0.02)); outline-color: rgba(63,191,255,0.3); }
.gv-cell.is-furn   { background: linear-gradient(135deg, rgba(255,107,71,0.10), rgba(255,107,71,0.02)); outline-color: rgba(255,107,71,0.3); }
.gv-cell.is-lab    { background: linear-gradient(135deg, rgba(185,104,255,0.12), rgba(185,104,255,0.02)); outline-color: rgba(185,104,255,0.3); }
.gv-cell.is-bin    { background: linear-gradient(135deg, rgba(255,210,58,0.10), rgba(255,210,58,0.02)); outline-color: rgba(255,210,58,0.3); }
.gv-cell.is-refine { background: linear-gradient(135deg, rgba(255,107,71,0.12), rgba(255,107,71,0.04)); outline-color: rgba(255,107,71,0.4); }
.gv-cell.is-tank   { background: linear-gradient(135deg, rgba(77,255,224,0.10), rgba(77,255,224,0.02)); outline-color: rgba(77,255,224,0.3); }
.gv-cell.is-mine   { background: linear-gradient(135deg, rgba(201,168,120,0.10), rgba(201,168,120,0.02)); outline-color: rgba(201,168,120,0.3); }
.gv-cell.is-power  { background: linear-gradient(135deg, rgba(61,220,151,0.10), rgba(61,220,151,0.02)); outline-color: rgba(61,220,151,0.3); }
.gv-cell .gi { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }

/* === 传送带（横向） === */
.gv-belt-h {
  width: 100%; height: 14px;
  align-self: center;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.85) 0 6px,
    rgba(63,191,255,0.65) 6px 12px);
  box-shadow: 0 0 6px rgba(63,191,255,0.4);
  position: relative;
}
.gv-belt-h.mk1   { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.85) 0 6px, rgba(255,210,58,0.65) 6px 12px); box-shadow: 0 0 6px rgba(255,210,58,0.4); }
.gv-belt-h.mk2   { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.85) 0 6px, rgba(63,191,255,0.65) 6px 12px); box-shadow: 0 0 6px rgba(63,191,255,0.4); }
.gv-belt-h.mk3   { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.85) 0 6px, rgba(61,220,151,0.65) 6px 12px); box-shadow: 0 0 6px rgba(61,220,151,0.4); }
.gv-belt-h.sushi { background: repeating-linear-gradient(90deg,
    rgba(63,191,255,0.7) 0 6px, rgba(255,210,58,0.7) 6px 12px,
    rgba(255,107,71,0.7) 12px 18px, rgba(185,104,255,0.7) 18px 24px);
  box-shadow: 0 0 6px rgba(255,210,58,0.4); }
.gv-belt-h.ore   { background: repeating-linear-gradient(90deg, rgba(60,40,20,0.9) 0 6px, rgba(201,168,120,0.7) 6px 12px); box-shadow: 0 0 6px rgba(201,168,120,0.4); }
.gv-belt-h.coal  { background: repeating-linear-gradient(90deg, rgba(20,20,20,0.95) 0 6px, rgba(80,70,60,0.85) 6px 12px); }
.gv-belt-h.iron  { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 6px, rgba(150,180,210,0.7) 6px 12px); }
.gv-belt-h.cu    { background: repeating-linear-gradient(90deg, rgba(220,140,90,0.85) 0 6px, rgba(150,80,50,0.85) 6px 12px); }
.gv-belt-h.mag   { background: repeating-linear-gradient(90deg, rgba(150,150,170,0.85) 0 6px, rgba(80,80,100,0.85) 6px 12px); }
.gv-belt-h.circ  { background: repeating-linear-gradient(90deg, rgba(80,200,80,0.85) 0 6px, rgba(40,140,40,0.85) 6px 12px); }
.gv-belt-h.coil  { background: repeating-linear-gradient(90deg, rgba(200,80,150,0.85) 0 6px, rgba(140,30,90,0.85) 6px 12px); }
.gv-belt-h.gear  { background: repeating-linear-gradient(90deg, rgba(180,160,100,0.85) 0 6px, rgba(140,120,60,0.85) 6px 12px); }
.gv-belt-h.motor { background: repeating-linear-gradient(90deg, rgba(63,191,255,0.85) 0 6px, rgba(30,100,180,0.85) 6px 12px); }
.gv-belt-h.brick { background: repeating-linear-gradient(90deg, rgba(200,180,140,0.85) 0 6px, rgba(140,110,80,0.85) 6px 12px); }
.gv-belt-h.graph { background: repeating-linear-gradient(90deg, rgba(80,70,55,0.95) 0 6px, rgba(180,150,90,0.7) 6px 12px); }
.gv-belt-h.mblue { background: repeating-linear-gradient(90deg, rgba(160,220,255,0.95) 0 6px, rgba(63,191,255,0.95) 6px 12px); box-shadow: 0 0 8px rgba(63,191,255,0.6); }
.gv-belt-h.mred  { background: repeating-linear-gradient(90deg, rgba(255,180,160,0.95) 0 6px, rgba(255,107,71,0.95) 6px 12px); box-shadow: 0 0 8px rgba(255,107,71,0.6); }

/* 流体管（横向） */
.gv-pipe-h { width: 100%; height: 14px; align-self: center; border-radius: 1px; border: 1px solid var(--phase-red, #FF6B47); background: rgba(60,30,15,0.9); }
.gv-pipe-h.h2  { border-color: #4DFFE0; background: rgba(77,255,224,0.35); box-shadow: 0 0 6px rgba(77,255,224,0.4); }
.gv-pipe-h.h2o { border-color: var(--phase-blue, #3FBFFF); background: rgba(63,191,255,0.3); }

/* 分拣器（爪子）· 圆形带方向箭头 */
.gv-sorter {
  align-self: center; justify-self: center;
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--phase-yellow, #FFD23A);
  border-radius: 50%;
  color: var(--phase-yellow, #FFD23A);
  font-size: 16px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 0 6px currentColor;
  box-shadow: 0 0 6px rgba(255,210,58,0.4);
}
.gv-sorter.mk1 { border-color: var(--phase-yellow, #FFD23A); color: var(--phase-yellow, #FFD23A); }
.gv-sorter.mk2 { border-color: var(--phase-blue, #3FBFFF); color: var(--phase-blue, #3FBFFF); box-shadow: 0 0 6px rgba(63,191,255,0.4); }
.gv-sorter.mk3 { border-color: var(--phase-green, #3DDC97); color: var(--phase-green, #3DDC97); box-shadow: 0 0 6px rgba(61,220,151,0.4); }
.gv-sorter.pile { border-color: var(--phase-purple, #B968FF); color: var(--phase-purple, #B968FF); box-shadow: 0 0 6px rgba(185,104,255,0.4); }
.gv-sorter.down::after  { content: '↓'; }
.gv-sorter.up::after    { content: '↑'; }
.gv-sorter.left::after  { content: '←'; }
.gv-sorter.right::after { content: '→'; }

/* Distributor (配送器) ※ 玻璃罩 */
.gv-dist {
  align-self: center; justify-self: center;
  width: 30px; height: 30px;
  background: radial-gradient(circle, rgba(185,104,255,0.5), rgba(185,104,255,0.15));
  border: 1.5px solid var(--phase-purple, #B968FF);
  border-radius: 50%;
  color: var(--phase-purple, #B968FF);
  font-size: 14px;
  font-family: var(--font-mono, monospace);
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 0 8px var(--phase-purple, #B968FF);
  box-shadow: 0 0 10px rgba(185,104,255,0.6);
}
.gv-dist::after { content: '✦'; }
.gv-dist.recycle { color: var(--phase-cyan, #4DFFE0); border-color: var(--phase-cyan, #4DFFE0); background: radial-gradient(circle, rgba(77,255,224,0.3), rgba(77,255,224,0.08)); text-shadow: 0 0 6px var(--phase-cyan, #4DFFE0); box-shadow: 0 0 8px rgba(77,255,224,0.4); }
.gv-dist.recycle::after { content: '▽'; }

/* 标签条 */
.gv-tag {
  position: absolute;
  top: -10px; left: 0;
  font-family: var(--font-mono, monospace); font-size: 9px;
  color: var(--phase-blue, #3FBFFF); background: rgba(0,0,0,0.85);
  padding: 1px 5px; border-radius: 2px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 5;
}
.gv-tag.t-red    { color: var(--phase-red, #FF6B47); }
.gv-tag.t-amber  { color: var(--phase-yellow, #FFD23A); }
.gv-tag.t-green  { color: var(--phase-green, #3DDC97); }
.gv-tag.t-purple { color: var(--phase-purple, #B968FF); }
.gv-tag.t-cyan   { color: var(--phase-cyan, #4DFFE0); }

/* Lab 叠堆 · 在同一格上叠加层数标记 */
.gv-stack { position: relative; }
.gv-stack-badge {
  position: absolute; top: 2px; right: 2px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--phase-purple, #B968FF);
  background: rgba(0,0,0,0.85);
  padding: 1px 5px;
  border-radius: 2px;
  text-shadow: 0 0 4px currentColor;
  font-weight: 700;
  z-index: 3;
}
.gv-stack-badge.is-blue { color: var(--phase-blue, #3FBFFF); }
.gv-stack-badge.is-red  { color: var(--phase-red, #FF6B47); }

/* Lab 侧视图叠堆 */
.gv-side-stack {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  position: relative;
}
.gv-side-stack .gi {
  outline: 1px solid rgba(255,255,255,0.1);
  margin: 0;
}
.gv-side-stack-base {
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(185,104,255,0.2);
  border: 1px solid var(--phase-purple, #B968FF);
  border-radius: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--phase-purple, #B968FF);
  letter-spacing: 0.08em;
}

/* 区域叠加框 */
.gv-area {
  pointer-events: none;
  border: 2px dashed currentColor;
  border-radius: 4px;
  opacity: 0.5;
  z-index: 4;
}
.gv-area-label {
  position: absolute;
  top: -10px; left: 8px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  background: rgba(0,0,0,0.85);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.1em;
  color: inherit;
  opacity: 1;
  pointer-events: none;
  z-index: 5;
}

.gv-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(255,210,58,0.3);
  border-radius: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
}
.gv-legend-item {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-muted, #8295b3);
}
.gv-legend-item strong { color: var(--fg-bright, #ffffff); }
.gv-legend-item .gi    { width: 32px; height: 32px; background-size: 735.5px 735.5px; }
.gv-legend-item .gv-belt-h { width: 32px; min-width: 32px; }

@media (max-width: 760px) {
  .gv-grid { grid-template-columns: repeat(var(--cols, 16), 36px); grid-template-rows: repeat(var(--rows, 12), 36px); }
  .gv-board { background-size: 36px 36px; }
}