*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Courier New', monospace; font-size: 12px; }

#app { display: flex; flex-direction: column; width: 100%; height: 100%; }

#toolbar {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.35rem 0.7rem;
  background: #4a3010; border-bottom: 3px solid #2a1800; flex-shrink: 0; flex-wrap: wrap;
}
.logo { color: #ffd700; font-weight: bold; font-size: 0.95rem; letter-spacing: 0.1em; white-space: nowrap; }
.tool-group { display: flex; gap: 0.25rem; align-items: center; }
.tool-sep { width: 2px; height: 22px; background: #6a4820; margin: 0 0.15rem; }

.tool-btn {
  padding: 0.28rem 0.55rem; background: #7a5330; color: #edd0a0;
  border: 2px solid #4a2e0e; border-bottom: 3px solid #2a1000;
  cursor: pointer; font-family: inherit; font-size: 0.8rem; white-space: nowrap;
}
.tool-btn:hover { background: #9a6840; }
.tool-btn.active { background: #ffd700; color: #2a1a00; border-color: #c09000; }
.tool-btn.danger { color: #ff9090; }
.tool-btn.danger.active { background: #cc3333; color: #fff; border-color: #881111; }

.action-btn {
  padding: 0.28rem 0.6rem; background: #3a6a1a; color: #b8e890;
  border: 2px solid #1e3e0a; border-bottom: 3px solid #0e2000;
  cursor: pointer; font-family: inherit; font-size: 0.8rem; text-decoration: none;
  display: inline-block; white-space: nowrap;
}
.action-btn:hover { background: #4a7a2a; }
.action-btn.warn { background: #7a4010; color: #f0c090; border-color: #4a2000; }
.action-btn.warn:hover { background: #8a5020; }
.action-btn.play { background: #0a5080; color: #90d8f8; border-color: #053050; }
.action-btn.play:hover { background: #1a6090; }

#main { display: flex; flex: 1; overflow: hidden; min-height: 0; }

#left-panel, #right-panel {
  width: 155px; flex-shrink: 0; background: #c8b880; display: flex;
  flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
#left-panel { border-right: 3px solid #8a7040; }
#right-panel { border-left: 3px solid #8a7040; }

.panel-title {
  background: #4a3010; color: #ffd700; padding: 0.28rem 0.5rem;
  font-weight: bold; font-size: 0.75rem; letter-spacing: 0.1em; flex-shrink: 0;
}
#minimap { width: 145px; height: 100px; display: block; margin: 4px auto; border: 2px solid #7a6030; cursor: pointer; }
#coord-display { padding: 0.3rem 0.45rem; color: #1a0e00; font-size: 0.8rem; line-height: 1.7; }
#object-counts { padding: 0.3rem 0.45rem; color: #1a0e00; font-size: 0.8rem; line-height: 1.7; }
#object-counts span { color: #2a5a00; font-weight: bold; }

#viewport-wrapper { flex: 1; overflow: hidden; position: relative; min-width: 0; }
#viewport { display: block; width: 100%; height: 100%; cursor: crosshair; }

#palette { padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pal-item {
  padding: 0.35rem; background: #ddd0a0; border: 2px solid #9a8050; border-bottom: 3px solid #6a5020;
  cursor: pointer; text-align: center; color: #1a0e00;
}
.pal-item:hover { background: #eee0b0; }
.pal-item.active { background: #ffd700; border-color: #b09000; }
.pal-item .icon { font-size: 1.2rem; display: block; }
.pal-item .label { font-size: 0.72rem; }

#props-panel { padding: 0.35rem; flex: 1; overflow-y: auto; }
.prop-hint { color: #5a4010; font-size: 0.78rem; line-height: 1.5; }
.prop-row { margin-bottom: 0.3rem; }
.prop-row label { display: block; color: #2a1a00; font-size: 0.76rem; margin-bottom: 0.05rem; }
.prop-row input[type=number] {
  width: 100%; padding: 0.18rem 0.25rem; background: #f0e8cc;
  border: 1px solid #9a8050; font-family: inherit; font-size: 0.8rem; color: #1a0e00;
}
.del-btn {
  margin-top: 0.4rem; width: 100%; padding: 0.28rem; background: #882020; color: #ffcccc;
  border: 2px solid #550e0e; border-bottom: 3px solid #330000; cursor: pointer; font-family: inherit; font-size: 0.78rem;
}
.del-btn:hover { background: #aa2828; }

#statusbar {
  display: flex; align-items: center; gap: 1.5rem; padding: 0.28rem 0.7rem;
  background: #2a1800; color: #c0a860; font-size: 0.78rem; flex-shrink: 0; border-top: 2px solid #0a0800;
}
#status-hint { margin-left: auto; opacity: 0.7; }

#toast {
  display: none; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: #ffd700; color: #2a1a00; padding: 0.4rem 1.2rem; z-index: 99;
  font-family: 'Courier New', monospace; font-weight: bold; border: 2px solid #a08000; font-size: 0.85rem;
}